O Bootstrap é um kit de ferramentas de código aberto lançado pelo Twitter para desenvolvimento front-end. Foi desenvolvido pelo designer do Twitter Mark Otto e Jacob Thornton e é uma estrutura CSS/HTML.
Em seguida, durante este artigo, apresentarei a você o código de bootstrap para implementar a caixa de pesquisa elástica, vamos dar uma olhada.
<form action = "" method = "get"> <div> <input type = "hidden" name = "scope" value = "1"> <input name = "key" autocomplete = "off" type = "text" placeholder = "Digite a palavra -chave de conteúdo para pesquisar"> <pan> <butt = "submit"> <pan> </span> </buttão para ">
CSS correspondente:
.search-input-group .input-group-addon {background: white! IMPORTANTE; } .search-input-group .form-Control {Border-Right: 0; Shadow de caixa: 0 0; Border-Color: #ccc;}. Grupo de pesquisa-entrada {largura: 40%;}. facilidade-in-out; -O-transição: largura 0.2s facilidade-in-out; transição: largura 0,2s facilidade-in-out;}. Entrada de grupo de pesquisa: foco {width: 500px;}Se você deseja colocar o ícone de pesquisa na frente da caixa de entrada, o Bootstrap realmente não o suporta e você precisará personalizá -lo.
http://bootsnipp.com/snippets/Featured/support-glyph-and-fa-iCon-inside-input
O exposto acima é a descrição completa do Bootstrap implementando a caixa de pesquisa elástica apresentada a você pelo editor. Espero que seja útil para você. Se você quiser saber mais, preste atenção no site do Wulin.com!