ブートストラップドロップダウンメニュー

この章では、ブートストラップのドロップダウンメニューに焦点を当てます。 ドロップダウンメニューが切り替えられ、リンクがリスト形式のコンテキストメニューに表示されます。 これは次のようにして行うことができますプラグインは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 ドロップダウンメニューで、分割線 試します