ブートストラップドロップダウンメニュー（ドロップダウン）ウィジェットとは?

Bootstrap コース
Bootstrap CSS
Bootstrap レイアウトコンポーネント
Bootstrap ウィジェット
Bootstrap 他の

ブートストラップドロップダウンメニュー（ドロップダウン）ウィジェット2024 年の最新の入門チュートリアル。このコースでは使用法,例,例,オプション,ウェイ,例, について学習できます。

ブートストラップドロップダウンメニュー（ドロップダウン）ウィジェット

ドロップダウンメニューブートストラップこの章では、ドロップダウンメニューを説明しますが、相互作用の一部に関連していない、この章では、詳細にドロップダウンメニューの相互作用を説明します。プルダウンメニュー（ドロップダウン）プラグイン、あなたは（そのようなナビゲーションバー、タブ、カプセル、ナビゲーションメニュー、ボタンなど）のコンポーネントのいずれかにあるドロップダウンメニューを追加することができますを使用してください。

あなたは、個々のプラグイン機能を参照したい場合は、dropdown.jsを参照する必要があります。 または、ブートストラッププラグインの概要章で述べたように、あなたはbootstrap.jsまたはbootstrap.min.jsの圧縮バージョンを参照することができます。

使用法

あなたは非表示のドロップダウンメニュー（ドロップダウン）プラグインを切り替えることができます。

データを介して属性：次のように、切り替えるためにデータトグル= "ドロップダウン"ドロップダウンメニューを追加するためのリンクやボタンを：

<DIVクラス= "]プルダウン">
  <a data-toggle="dropdown" href="#">ドロップダウンメニュー（ドロップダウン）トリガします</a>
  <ULクラス= "ドロップダウン・メニューから「役割="メニュー "アリア-labelledbyの=" dLabel ">
    ja.
  </ UL>
</ DIV>

あなたは（ブラウザではJavaScriptが有効になっていないときに便利です）、無傷のリンクを維持する必要がある場合は、代わりのhref = "＃"のデータ・ターゲット属性を使用してください：

<DIVクラス= "]プルダウン">
  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page">
    プルダウンメニュー（ドロップダウン）<スパンクラス= "カレット"> </ span>の
  こちら</a>


  <ULクラス= "ドロップダウン・メニューから「役割="メニュー "アリア-labelledbyの=" dLabel ">
    ja.
  </ UL>
</ DIV>

JavaScriptので：切り替えるには、ドロップダウンメニューを呼び出すことによって、JavaScriptは、以下の方法を使用してください：
```
$（ '。ドロップダウン・トグル'）。ドロップダウン（）
```

例

ナビゲーションバーで

次の例では、ナビゲーションバーのドロップダウンメニューの使用方法を示しています。

例

<ナビゲーションクラス = "ナビゲーションバーナビゲーションバー-デフォルト」役割 = "ナビゲーション"> <DIV クラス = "コンテナ流体"> <DIV クラス = "ナビゲーションバーヘッダー"> <A クラス = "ナビゲーションバーブランド" href = "＃"> チュートリアル </ A> </ DIV> <DIV> <UL クラス= "NAVナビゲーションバー-NAV" > <李クラス = "アクティブ"> <A href = "＃">のiOS < / A> </ LI> <李> <A href = "＃"> SVN < / A> </ LI> <李クラス = "]プルダウン"> <A href = "＃" クラス = "ドロップダウン、トグル」データトグル=> "]プルダウン" Javaの<B クラス= "カレット"> </ B> </ A> <UL クラス = "ドロップダウンメニュー"> <李> <A href = "＃"> JMeterの< / A> </ LI> <李> <A href = "＃"> EJB < / A> </ LI> <李> <A href = "＃">ジャスパーレポート </ A> </ LI> <李クラス= "分周器"> </ LI> <李> <A href = "＃"> 絶縁リンク </ A> </ LI> <李クラス= "分周器"> </ LI> <李> <A href = "＃"> 別の絶縁リンク </ A> </ LI> </ UL> </李> </ UL> </ DIV> </ DIV> </ナビゲーション>

»をお試しください

結果は以下の通りであります：

タブ内で

次の例では、ドロップダウンメニューのタブの使用方法を示しています。

例

<P> ページのプルダウンメニューでタグ </ P> <UL クラス= "NAVのNAV-タブ" > <李クラス = "アクティブ"> <A href = "＃">ホーム< / A> </ LI> <李> <A href = "＃"> SVN < / A> </ LI> <李> <A href = "＃">のiOS < / A> </ LI> <李> <A href = "＃"> VB.Net < / A> </ LI> <李クラス = "]プルダウン"> <A クラス = "ドロップダウン、トグル」データトグル = "ドロップダウン" href = "＃"> Javaの<スパンクラス= "カレット"> </ span>を</ A> <UL クラス = "ドロップダウンメニュー"> <李> <A href = "＃">スウィング< / A> </ LI> <李> <A href = "＃"> JMeterの< / A> </ LI> <李> <A href = "＃"> EJB < / A> </ LI> <李クラス= "分周器"> </ LI> <李> <A href = "＃"> 絶縁リンク </ A> </ LI> </ UL> </李> <李> <A href = "＃"> PHP < / A> </ LI> </ UL>

»をお試しください

結果は以下の通りであります：

オプション

オプションはありません。

ウェイ

切り替えるためのドロップダウンメニュー、ドロップダウンメニューを表示または非表示にする簡単な方法があります。

$（）。ドロップダウン（ 'トグル'）

例

次の例では、プルダウンメニュー（ドロップダウン）プラグインの方法を示しています。

例

<ナビゲーションクラス = "ナビゲーションバーナビゲーションバー-デフォルト」役割 = "ナビゲーション"> <DIV クラス = "コンテナ流体"> <DIV クラス = "ナビゲーションバーヘッダー"> <A クラス = "ナビゲーションバーブランド" href = "＃"> W3Cschool < / A> </ DIV> <DIV ID = "myexample"> <UL クラス= "NAVナビゲーションバー-NAV" > <李クラス = "アクティブ"> <A href = "＃">のiOS < / A> </李> <李> <A href = "＃"> SVN < / A> </李> <李クラス = "]プルダウン"> <A href = "＃" クラス = "ドロップダウン、トグル」データトグル=> "]プルダウン" Javaの<B クラス= "カレット"> </ B> </ A> <UL クラス = "ドロップダウンメニュー"> <李> <A ID = "アクション-1」 href = "＃"> JMeterの< / A> </李> <李> <A href = "＃"> EJB < / A> </李> <李> <A href = "＃">ジャスパーレポート </ A> </李> <李クラス= "分周器"> </ LI> <李> <A href = "＃"> 絶縁リンク </ A> </李> <李クラス= "分周器"> </ LI> <李> <A href = "＃"> 別の絶縁リンク </ A> </李> </ UL> </李> </ UL> </ DIV> </ DIV> </ナビゲーション> </ DIV> <スクリプト> $（関数（） {$（ "ドロップダウン・トグル。」）ドロップダウン（ 'トグル'）;.}）; </スクリプト>

»をお試しください

結果は以下の通りであります：