TwitterのBootstrapは、現在最も人気のあるフロントエンドフレームワークです。 Bootstrapは、HTML、CSS、およびJavaScriptに基づいています。シンプルで柔軟で、Web開発をより速くします。
学習のための重要なポイント：
1。小さなアイコンコンポーネント
2。プルダウンメニューコンポーネント
3。ボタングループコンポーネント
4。ボタンスタイルのドロップダウンメニュー
このレッスンでは、主にブートストラップの3つのコンポーネント関数、小さなアイコンコンポーネント、ドロップダウンメニューコンポーネント、さまざまなボタンコンポーネントについて学びます。
1つ。小さなアイコンコンポーネント
Bootstrapは263個の無料の小さなアイコン（2回カウント）を提供します。詳細については、中国の公式ウェブサイトのコンポーネントリンクを参照してください。
http://v3.bootcss.com/components/#glyphicons。
いくつかのアイコンは次のとおりです。
次のように、<i>または<Span>タグを使用して使用できます。
//小さなアイコンを使用<i> </i> <span> </span> // <button> <span> </span> </button> <button> <button> <span> </span> </button> <button> </span> </button>
二。ドロップダウンメニューコンポーネント
ドロップダウンメニューは、要素またはボタンをクリックして、表示される表示される非表示リストをトリガーすることです。
// BASIC FORMAT <Div> <Button Data-Toggle = "Dropdown">ドロップダウンメニュー<span> </span> </button> <ul> <li> <a href = "＃"> home </a> </li> <li> <a href = "＃">情報</a> </li> <li> </a> </li> </ul> </div>
ボタンとメニューは.dropdownコンテナにラップする必要があり、クリックされた要素ボタンとして、Data-Toggle = "Dropdown"を効果的に設定する必要があります。メニューセクションの場合、設定は固定スタイルを自動的に非表示および追加できます。矢印を上または下に設定します。
//トリガーに設定<div> //メニュー項目が右に並べられています、デフォルト値はドロップダウン - 左<ul> //メニューのタイトルを設定します</li>ウェブサイトナビゲーション</li> //メニューの分割行を設定しない<li> </li> //メニューを設定//デフォルトで<div>を表示するようにメニューを設定します
三つ。ボタングループコンポーネント
ボタングループは、複数のボタンをコンテナに統合するユニークな効果です。
//基本形式<div> <ボタンタイプ= "ボタン">左</button> <ボタンタイプ= "ボタン">中央</button> <ボタンタイプ= "ボタン">右</button> </div> //管理を促進するために複数のボタンを統合して、管理を促進する<div> <ボタンタイプ= "ボタン">左</ボタン> <ボタンtype = "button"> </button> <button> <button = "button"> </button> <button> <button = "button"> </button> <button> <button> <button = "button"> </button> <ボタン> <ボタンタイプ= "> </button> <ボタン> <ボタンタイプ="ボタン "> </button btn-group-sm "> <div> //ドロップダウンメニューなどのグループをネスト<div> <ボタン=" button "> left </button> <button type =" button "> middle </button> <button =" button "> right </button> <div> <butondata-toggle =" dropdown ">ドロップダウンhref = "＃"> home </a> </li> <li> <a href = "＃">情報</a> </li> <li> <a href = "＃"> product </a> </li> <li> <a href = "＃"> about </a> </li> </ul>
注：これは<div>に実装されていません。ソースコード分析を通じて、巣自体に位置付けがあることがわかっているため、セットアップする必要はありません。右側にもう1つ丸い角を追加します。
//ボタングループを設定して垂直に配置しますtype = "button">左</button> </div> <div> <ボタンtype = "button">右</button> </div>
4。ボタンスタイルのドロップダウンメニュー
このドロップダウンメニューは、実際には第2の知識ポイントと同じですが、これはグループ内であり、class = "ドロップダウン"を宣言する必要はありません。
//ドロップダウンメニュー<div> <ボタンタイプ= "ボタン" data-toggle = "ドロップダウン">ドロップダウンメニュー<span> </span> </button> <ul> <li> <a href = "＃"> home </a> </li> <li> <a href = "＃">情報</a> href = "＃"> bout </a> </li> </ul> </div> //ドロップダウンメニュー<div> <ボタンタイプ= "ボタン">ドロップダウンメニュー</button = "ボタン=" button "data-toggle =" dropdown "> <span> <span> </span> </button> <ul> <a href = "＃">情報</a> </li> <li> <a href = "＃"> product </a> </li> <li> <a href = "＃"> bout </a> </li> </ul> </div> // pop-up <div>
上記のコンテンツは、エディターが紹介したブートストラップコンポーネントのメニューボタンアイコンコンポーネントです。私はそれが誰にでも役立つことを願っています！