Bootstrap 下拉菜单（Dropdowns）
本章では、Bootstrap のドロップダウンメニューに焦点を当てます。ドロップダウンメニューは切り替え可能で、リンクをリスト形式で表示するコンテキストメニューです。これは、下拉菜单（Dropdown） JavaScript 插件のインタラクションによって実現します。
ドロップダウンメニューを使用するには、class に.dropdown内部にドロップダウンメニューを追加するだけで済みます。以下の例は、基本的なドロップダウンメニューを示しています：
实例
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分離されたリンク</a>
</li>
</ul>
</div>
尝试一下 »
結果は以下の通りです：
选项
整列
通过向.dropdown-menu添加 class.pull-rightドロップダウンメニューを右揃えにするには、次の例がこれを示しています：
实例
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分離されたリンク</a>
</li>
</ul>
</div>
尝试一下 »
結果は以下の通りです：
标题
classを使用できますdropdown-headerドロップダウンメニューのラベル領域にタイトルを追加します。以下の例はこれを示しています：
实例
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation" class="dropdown-header">下拉菜单标题</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">下拉菜单标题</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">分離されたリンク</a>
</li>
</ul>
</div>
尝试一下 »
結果は以下の通りです：
更多实例
| 类 | 描述 | 实例 |
|---|---|---|
| .dropdown | ドロップダウンメニューを指定します。ドロップダウンメニューはすべて .dropdown 内に配置されます | 尝试一下 |
| .dropdown-menu | ドロップダウンメニューの作成 | 尝试一下 |
| .dropdown-menu-right | ドロップダウンメニューの右揃え | 尝试一下 |
| .dropdown-header | ドロップダウンメニューへの見出しの追加 | 尝试一下 |
| .dropup | 上向きにポップアップするドロップダウンメニューを指定します。 | 尝试一下 |
| .disabled | ドロップダウンメニューの無効項目 | 尝试一下 |
| .divider | ドロップダウンメニューの区切り線 | 尝试一下 |