Bootstrap es un conjunto de herramientas de código abierto lanzado por Twitter para el desarrollo front-end. Fue desarrollado por el diseñador de Twitter Mark Otto y Jacob Thornton y es un marco CSS/HTML.
A continuación, a través de este artículo, le presentaré el código de Bootstrap para implementar el cuadro de búsqueda elástico, echemos un vistazo.
<form de acción = "" método = "get"> <div> <input type = "Hidden" name = "Scope" valor = "1"> <input name = "key" key "autocompletete =" Off "type =" text "de posición =" Ingrese la palabra clave de contenido para buscar "> <span> <button type =" Envíe "> <pan> </span> </botin> </span> </biv> </biv>
CSS correspondiente:
.Search-Input-Group .Input-Group-Addon {Background: White! IMPORTANTE; } .Search-Input-Group .Form-Control {Border-Right: 0; Shadow de caja: 0 0 0; border-color: #ccc;}. Search-Input-Group {Width: 40%;}. Botón de búsqueda de Input-Input {border: 0; fondo: transparente;}. Entrada de grupo de búsqueda de búsqueda: focal + botón {Z-Index: 3;}. Ingreso de grupo de búsqueda {-Webkit-Transition: Width 0.2S-In-Out; Facilia-Out; -O-Transition: ancho 0.2s Facle-in; Transition: Width 0.2s Facily-In;}. Ingreso de grupo de búsqueda de búsqueda: Focus {Width: 500px;}Si desea colocar el icono de búsqueda frente al cuadro de entrada, Bootstrap en realidad no lo admite y necesita personalizarlo usted mismo.
http://bootsnipp.com/snippets/featured/support-glyph-and-fa-icon-inside-input
Lo anterior es la descripción completa del cuadro de búsqueda elástico de implementación de Bootstrap presentada por el editor. Espero que te sea útil. Si desea saber más, ¡preste atención al sitio web de Wulin.com!