ブートストラップドロップダウンメニュー
この章では、ブートストラップのドロップダウンメニューに焦点を当てます。 ドロップダウンメニューが切り替えられ、リンクがリスト形式のコンテキストメニューに表示されます。 これは次のようにして行うことができますプラグインはJavaScriptのプルダウンメニュー(ドロップダウン)を達成するために相互作用します。
次のメニューを使用するには、あなただけのクラス .dropdownのドロップダウンメニューを追加する必要があります。 次の例では、基本的なドロップダウンメニューを示しています。
例
<DIV クラス = "]プルダウン">
<ボタン = "ボタン"を入力 クラス = "BTNドロップダウントグル」 ID = "dropdownMenu1" データトグル = "]プルダウン"> テーマ <スパン クラス= "カレット"> </ span>の
</ボタン>
<UL クラス = "ドロップダウンメニュー」 役割 = "メニュー" アリア-labelledbyの = "dropdownMenu1">
<李 役割 = "プレゼンテーション">
<A 役割 = "メニューアイテム" タブインデックス = "-1" href = "#">のJava < / A>
</李>
<李 役割 = "プレゼンテーション">
<A 役割 = "メニューアイテム" タブインデックス = "-1" href = "#"> データマイニング </ A>
</李>
<李 役割 = "プレゼンテーション">
<A 役割 = "メニューアイテム" タブインデックス = "-1" href = "#"> データ通信/ネットワーク </ A>
</李>
<李 役割 = "プレゼンテーション" クラス= "分周器"> </ LI>
<李 役割 = "プレゼンテーション">
<A 役割 = "メニューアイテム" タブインデックス = "-1" href = "#"> 絶縁リンク </ A>
</李>
</ UL>
</ DIV>
»をお試しください
結果は以下の通りであります:
オプション
整列します
.dropdownメニューを右にドロップダウンメニューを揃えるために、クラス.pull右を追加します。 次の例では、この点を示しています。
例
<DIV クラス = "]プルダウン">
<ボタン = "ボタン"を入力 クラス = "BTNドロップダウントグル」 ID = "dropdownMenu1" データトグル = "]プルダウン"> テーマ <スパン クラス= "カレット"> </ span>の
</ボタン>
<UL クラス= "ドロップダウンメニュープル権利」 役割 = "メニュー" アリア-labelledbyの = "dropdownMenu1">
<李 役割 = "プレゼンテーション">
<A 役割 = "メニューアイテム" タブインデックス = "-1" href = "#">のJava < / A>
</李>
<李 役割 = "プレゼンテーション">
<A 役割 = "メニューアイテム" タブインデックス = "-1" href = "#"> データマイニング </ A>
</李>
<李 役割 = "プレゼンテーション">
<A 役割 = "メニューアイテム" タブインデックス = "-1" href = "#"> データ通信/ネットワーク </ A>
</李>
<李 役割 = "プレゼンテーション" クラス= "分周器"> </ LI>
<李 役割 = "プレゼンテーション">
<A 役割 = "メニューアイテム" タブインデックス = "-1" href = "#"> 絶縁リンク </ A>
</李>
</ UL>
</ DIV>
»をお試しください
結果は以下の通りであります:
見出し
あなたは、ラベル領域のドロップダウンメニューにタイトルを追加するには、クラスのドロップダウン・ヘッダを使用することができます。 次の例では、この点を示しています。
例
<DIV クラス = "]プルダウン">
<ボタン = "ボタン"を入力 クラス = "BTNドロップダウントグル」 ID = "dropdownMenu1" データトグル = "]プルダウン"> テーマ <スパン クラス= "カレット"> </ span>の
</ボタン>
<UL クラス = "ドロップダウンメニュー」 役割 = "メニュー" アリア-labelledbyの = "dropdownMenu1">
<李 役割 = "プレゼンテーション" クラス = "ドロップダウン・ヘッダー"> ドロップダウンメニューのタイトル ます。</ li>
<李 役割 = "プレゼンテーション">
<A 役割 = "メニューアイテム" タブインデックス = "-1" href = "#">のJava < / A>
</李>
<李 役割 = "プレゼンテーション">
<A 役割 = "メニューアイテム" タブインデックス = "-1" href = "#"> データマイニング </ A>
</李>
<李 役割 = "プレゼンテーション">
<A 役割 = "メニューアイテム" タブインデックス = "-1" href = "#"> データ通信/ネットワーク </ A>
</李>
<李 役割 = "プレゼンテーション" クラス= "分周器"> </ LI>
<李 役割 = "プレゼンテーション" クラス = "ドロップダウン・ヘッダー"> ドロップダウンメニューのタイトル ます。</ li>
<李 役割 = "プレゼンテーション">
<A 役割 = "メニューアイテム" タブインデックス = "-1" href = "#"> 絶縁リンク </ A>
</李>
</ UL>
</ DIV>
»をお試しください
結果は以下の通りであります:
より多くの例
カテゴリ | 説明 | 例 |
---|---|---|
.dropdown | プルダウンメニューを指定し、ドロップダウンメニューは.dropdownレーンに包まれています | 試します |
.dropdownメニュー | ドロップダウンメニューを作成します。 | 試します |
.dropdownメニュー右 | ドロップダウンメニューには、右の正当化 | 試します |
.dropdownヘッダ | タイトルを追加するには、ドロップダウンメニュー | 試します |
.dropup | ポップアップドロップダウンメニューを指定します | 試します |
.disabled | ドロップダウンメニュー項目が無効になっています | 試します |
.divider | ドロップダウンメニューで、分割線 | 試します |