Bootstrap adalah toolkit open source yang diluncurkan oleh Twitter untuk pengembangan front-end. Ini dikembangkan oleh perancang Twitter Mark Otto dan Jacob Thornton dan merupakan kerangka kerja CSS/HTML.
Selanjutnya, melalui artikel ini, saya akan memperkenalkan kepada Anda kode Bootstrap untuk mengimplementasikan kotak pencarian elastis, mari kita lihat.
<Form Action = "" Method = "Get"> <ver> <input type = "hidden" name = "scope" value = "1"> <input name = "key" autoComplete = "off" type = "text" placeholder = "Masukkan kata kunci konten untuk mencari"> <span> <tombol type = "kirim"> <pan> </span> </rentang> </tombol>
CSS yang sesuai:
.search-input-group .input-group-addon {latar belakang: putih! penting; } .search-input-group .Form-control {border-right: 0; Kotak-Shadow: 0 0 0; border-color:#ccc;}.search-input-group{width: 40%;}.search-input-group button{border:0;background:transparent;}.search-input-group input:focus + button{z-index:3;}.search-input-group input{-webkit-transition: width 0.2s ease-in-out;-moz-transition:width 0.2s kemudahan-in-out; -o-transisi: lebar 0,2s kemudahan-in-out; transisi: lebar 0.2 kemudahan;Jika Anda ingin meletakkan ikon pencarian di depan kotak input, Bootstrap sebenarnya tidak mendukungnya dan Anda perlu menyesuaikannya sendiri.
http://bootnipp.com/snippets/featured/support-glyph-and-fa-icon-inside-input
Di atas adalah deskripsi lengkap kotak pencarian elastis yang diimplementasikan oleh bootstrap yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda ingin tahu lebih banyak, harap perhatikan situs web Wulin.com!