Bootstrap est une boîte à outils open source lancée par Twitter pour le développement frontal. Il a été développé par le concepteur de Twitter Mark Otto et Jacob Thornton et est un cadre CSS / HTML.
Ensuite, via cet article, je vous présenterai le code de bootstrap pour implémenter la zone de recherche élastique, jetons un coup d'œil.
<form action = "" Method = "get"> <div> <input type = "HIDDEN" name = "scope" value = "1"> <input name = "key" automatique assocle = "off" type = "text" placeholder = "Entrez le mot-clé de contenu à la recherche"> <span> <bouton type = "
CSS correspondant:
.Search-int-groupe .input-group-addon {Background: White! IMPORTANT; } .search-int-groupe .form-control {border-right: 0; Box-Shadow: 0 0 0; Border-Color: #ccc;}. Search-Input-Group {Width: 40%;}. Recherche-Input-Group Button {Border: 0; Background: Transparent;}. Search-Input-Group Entrée {-webkit-transition: 3;}. facilite-ou-out; -o-transition: largeur 0.2S facilité-in-out; transition: largeur 0,2s facilité-in-out;}. Entrée de groupe de recherche: focus {width: 500px;}Si vous souhaitez mettre l'icône de recherche devant la zone d'entrée, Bootstrap ne le prend en charge pas et vous devez le personnaliser vous-même.
http://bootsnipp.com/snippets/feured/support-glyph-and-fa-icon-inside-input
Ce qui précède est la description complète du bootstrap implémentant la boîte de recherche élastique qui vous est présentée par l'éditeur. J'espère que cela vous sera utile. Si vous voulez en savoir plus, veuillez faire attention au site Web de Wulin.com!