Bootstrap-это инструментарий с открытым исходным кодом, запущенный Twitter для фронтальной разработки. Он был разработан дизайнером Twitter Марком Отто и Джейкобом Торнтоном и является фреймворком CSS/HTML.
Затем, благодаря этой статье, я представлю вам код Bootstrap для реализации эластичного поиска, давайте посмотрим.
<form action = "" method = "get"> <div> <input type = "hidden" name = "scope" value = "1"> <input name = "key" autoComplete = "off" type = "text" Placeholder = "Введите ключ содержимого в поисках"> <pran> <futne = "Отправить"> <span> </span> </button> </span> </div> </form> </form wype = "
Соответствующий CSS:
.search-input-группа. INPUT-GROUP-ADDON {фон: белый! Важно; } .Search-Input-Group .form-Control {Border-Right: 0; Box-Shadow: 0 0 0; Пограничный цвет: #CCC;}. Поисковая входная группа {ширина: 40%;}. Кнопка поиска-входной группы {граница: 0. Easy-in-Out; -o-transition: ширина 0,2S Easy-in-Out; переход: ширина 0,2S Easy-in-Out;}. Ввод поиска входов в группе: Focus {ширина: 500px;}Если вы хотите поместить значок поиска перед коробкой ввода, Bootstrap фактически не поддерживает его, и вам нужно настроить его самостоятельно.
http://bootsnipp.com/snippets/featured/support-glyph-and-fa-icon-inside-input
Выше приведено полное описание Bootstrap, внедренное эластичным поисковым окном, представленным вам редактором. Я надеюсь, что это будет полезно для вас. Если вы хотите узнать больше, обратите внимание на веб -сайт wulin.com!