Bootstrap3
日本語リファレンス

(追記) (追記ここまで)

ドロップダウン・ボタン Button Dropdowns

リンクのリストの表示/非表示を切り替えることができるドロップダウン・ボタンのバリーション。

サンプル

使い方下に開く上に開くセパレート式(下に開く) セパレート式(上に開く) セパレート式(下に開く) 〜a要素のボタン〜セパレート式(下に開く) 〜a要素のボタンとドロップダウン・ボタン〜サイズ・バリエーションカラー・バリエーション

使い方

ポイントは3つ。

ボタン群を覆う要素(div要素など)のclass属性に、btn-groupを指定する。
上に開く場合、ボタン群を覆う要素(div要素など)のclass属性に、btn-groupとdropupを指定する。
セパレート式の場合、ボタン・グループ内にボタンを2つ用意する。

<div class="btn-group">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
		ドロップダウン
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト1</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト2</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト3</a></li>
	</ul>
</div>

下に開く

リンク・リストを下に開く基本的スタイル。

表示サンプル

ソースコード

<div class="btn-group">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
		ドロップダウン
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト1</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト2</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト3</a></li>
	</ul>
</div>

上に開く

リンク・リストを上に開くスタイル。

表示サンプル

ソースコード

<div class="btn-group dropup">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
		ドロップダウン
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト1</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト2</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト3</a></li>
	</ul>
</div>

セパレート式(下に開く)

ボタンとドロップダウン・ボタンを別々に分けるスタイル。

表示サンプル

ソースコード

<div class="btn-group">
	<button type="button" class="btn btn-default">
		ドロップダウン
	</button>
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト1</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト2</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト3</a></li>
	</ul>
</div>

セパレート式(上に開く)

ボタンとドロップダウン・ボタンを別々に分けるスタイル。リンク・リストを上に開くスタイル。

表示サンプル

ソースコード

<div class="btn-group dropup">
	<button type="button" class="btn btn-default">
		ドロップダウン
	</button>
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト1</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト2</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト3</a></li>
	</ul>
</div>

セパレート式(下に開く) 〜a要素のボタン〜

a要素のボタンとbutton要素のドロップダウン・ボタンに分けるスタイル。

表示サンプル

ドロップダウン

ソースコード

<div class="btn-group">
	<a href="#" class="btn btn-default">
		ドロップダウン
	</a>
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト1</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト2</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト3</a></li>
	</ul>
</div>

セパレート式(下に開く) 〜a要素のボタンとドロップダウン・ボタン〜

a要素のボタンとドロップダウン・ボタンに分けるスタイル。

表示サンプル

ドロップダウン

ソースコード

<div class="btn-group">
	<a href="#" class="btn btn-default">
		ドロップダウン
	</a>
	<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
		<span class="caret"></span>
	</a>
	<ul class="dropdown-menu" role="menu">
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト1</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト2</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト3</a></li>
	</ul>
</div>

サイズ・バリエーション

ボタン群を覆う要素(class属性にbtn-groupを指定したdiv要素)のclass属性に、btn-group-lg(大)やbtn-group-sm(小)を追加するだけで、グループ内のボタンの大きさを変更できる。

表示サンプル

ソースコード

<div class="btn-group btn-group-lg">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
		大
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト1</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト2</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト3</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
		通常
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト1</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト2</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト3</a></li>
	</ul>
</div>
<div class="btn-group btn-group-sm">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
		小
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト1</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト2</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト3</a></li>
	</ul>
</div>
<div class="btn-group btn-group-xs">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
		極小
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト1</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト2</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト3</a></li>
	</ul>
</div>

カラー・バリエーション

各ボタン要素(class属性にbtnを指定したbutton要素など)のclass属性に、btn-primary(青色)、btn-success(緑色)btn-info(水色)btn-warning(オレンジ色)btn-danger(赤色)などを追加するだけで、色を指定できる。

表示サンプル

ソースコード

<div class="btn-group">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
		Default
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト1</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト2</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト3</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
		Primary
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト1</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト2</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト3</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
		Success
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト1</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト2</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト3</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
		Info
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト1</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト2</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト3</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
		Warning
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト1</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト2</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト3</a></li>
	</ul>
</div>
<div class="btn-group">
	<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
		Danger
		<span class="caret"></span>
	</button>
	<ul class="dropdown-menu" role="menu">
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト1</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト2</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト3</a></li>
	</ul>
</div>

(追記) (追記ここまで)