Latest web development tutorials
×

Bootstrap コース

Bootstrap コース Bootstrap 簡単な紹介 Bootstrap 設置環境

Bootstrap CSS

Bootstrap CSS 概要 Bootstrap グリッド方式 Bootstrap 組版 Bootstrap コード Bootstrap テーブル Bootstrap フォーム Bootstrap プッシュボタン Bootstrap 絵 Bootstrap 補助クラス Bootstrap レスポンシブユーティリティ

Bootstrap レイアウトコンポーネント

Bootstrap フォントのアイコン Bootstrap ドロップダウンメニュー Bootstrap ボタングループ Bootstrap ボタンのドロップダウンメニュー Bootstrap 入力ボックスグループ Bootstrap ナビゲーション要素 Bootstrap ナビゲーションバー Bootstrap パン粉 Bootstrap ページング Bootstrap ラベル Bootstrap バッジ Bootstrap 大画面 Bootstrap ページタイトル Bootstrap サムネイル Bootstrap 警告 Bootstrap プログレスバー Bootstrap マルチメディアオブジェクト Bootstrap 一覧グループ Bootstrap パネル Bootstrap Wells

Bootstrap ウィジェット

Bootstrap プラグインの概要 Bootstrap 転移効果 Bootstrap モーダルボックス Bootstrap ドロップダウンメニュー Bootstrap スクロールモニター Bootstrap タブ Bootstrap ツールヒント Bootstrap ポップアップボックス Bootstrap 警告ボックス Bootstrap プッシュボタン Bootstrap 折り畳みます Bootstrap 回転木馬 Bootstrap 追加のナビゲーション

Bootstrap 他の

Bootstrap UI エディタ Bootstrap V2 コース Bootstrap HTML コーディング規約 Bootstrap CSS コーディング規約

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

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