Bootstrapは、フロントエンド開発のためにTwitterによって発売されたオープンソースのツールキットです。 TwitterデザイナーのMark OttoとJacob Thorntonによって開発され、CSS/HTMLフレームワークです。
次に、この記事を通して、弾性検索ボックスを実装するためにブートストラップのコードを紹介します。見てみましょう。
<form action="" method="get"><div><input type="hidden" name="scope" value="1"><input name="key" autocomplete="off" type="text" placeholder="enter the content keyword to search" ><span><button type="submit"><span></span></button> </span></div></form>
対応するCSS：
.search-input-group .input-group-addon {background：white！comefict; } .search-input-group .form-control {border-right：0;ボックスシャドウ：0 0 0;境界線：#ccc;}。検索 - インプットグループ{width：40％;}。検索入力グループボタン{border：0; background：transparent;}。検索 - インプットグループ入力：フォーカス +ボタン{z-index：3;}。 ease-in-out; -o-transition：width 0.2s ease-int; transition：width 0.2s ease-in-out;}。検索-input-group input：focus {width：500px;}検索アイコンを入力ボックスの前に配置する場合、ブートストラップは実際にはサポートせず、自分でカスタマイズする必要があります。
http://bootsnipp.com/snippets/featured/support-glyph-and-fa-icon-inside-input
上記は、編集者が紹介した弾性検索ボックスを実装するブートストラップの完全な説明です。それがあなたに役立つことを願っています。もっと知りたい場合は、wulin.comのWebサイトに注意してください！