Bootstrap基本チュートリアル

Bootstrapプラグイン

Bootstrap ボタングループ Bootstrap ギフティコン（Glyphicons）

Bootstrap ドロップダウンメニュー

この章では、Bootstrapの下拉メニューに焦点を当てます。下拉メニューは切り替え可能で、リンクをリスト形式で表示するコンテキストメニューです。これは下拉メニュー（Dropdown）JavaScriptプラグインのインタラクションを実現するだけです。

下拉メニューを使用するには、class .dropdown 内に下拉メニューを追加するとできます。以下の例では基本的な下拉メニューを示しています：

オンラインサンプル

例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　下拉メニュー（Dropdowns）</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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>
</body>
</html>

テストを見てみる ‹/›

結果如下所示：

オプション

寄せ

通じて .dropdown-menu classを追加して .pull-right 右寄せ下拉メニューです。以下の例がそのポイントを示しています：

オンラインサンプル

例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　右寄せ下拉メニュー</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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>
</body>
</html>

テストを見てみる ‹/›

結果如下所示：

タイトル

クラスを使用して、 dropdown-header ドロップダウンメニューのラベルエリアにタイトルを追加します。以下の例がこれを示しています：

オンラインサンプル

例

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　サンプル　-　ドロップダウンメニューのタイトル</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<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>
</body>
</html>

テストを見てみる ‹/›

結果如下所示：

さらに多くの例

クラス	説明	例
.dropdown	ドロップダウンメニューを指定し、ドロップダウンメニューはすべて .dropdown 内に括られています	試してみてください
.dropdown-menu	ドロップダウンメニューの作成	試してみてください
.dropdown-menu-right	ドロップダウンメニュー右詰め	試してみてください
.dropdown-header	ドロップダウンメニューにタイトルを追加	試してみてください
.dropup	上に弹出するドロップダウンメニューを指定	試してみてください
.disabled	ドロップダウンメニュー内の無効項目	試してみてください
.divider	ドロップダウンメニュー内の分割線	試してみてください

Bootstrap ボタングループ Bootstrap ギフティコン（Glyphicons）