Bootstrap3
日本語リファレンス
広告
  1. Bootstrap3日本語リファレンス
  2. コンポーネント
  3. ドロップダウン・ボタン

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

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

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

使い方

ポイントは３つ。

  1. ボタン群を覆う要素（div要素など）のclass属性に、btn-groupを指定する。
  2. 上に開く場合、ボタン群を覆う要素（div要素など）のclass属性に、btn-groupとdropupを指定する。
  3. セパレート式の場合、ボタン・グループ内にボタンを２つ用意する。
<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="#">リンクのリスト１</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト２</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト３</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="#">リンクのリスト１</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト２</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト３</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="#">リンクのリスト１</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト２</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト３</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="#">リンクのリスト１</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト２</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト３</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="#">リンクのリスト１</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト２</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト３</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="#">リンクのリスト１</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト２</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト３</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="#">リンクのリスト１</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト２</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト３</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="#">リンクのリスト１</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト２</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト３</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="#">リンクのリスト１</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト２</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト３</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="#">リンクのリスト１</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト２</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト３</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="#">リンクのリスト１</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト２</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト３</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="#">リンクのリスト１</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト２</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト３</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="#">リンクのリスト１</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト２</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト３</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="#">リンクのリスト１</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト２</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト３</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="#">リンクのリスト１</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト２</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト３</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="#">リンクのリスト１</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト２</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト３</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="#">リンクのリスト１</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト２</a></li>
		<li role="presentation"><a role="menuitem" tabindex="-1" href="#">リンクのリスト３</a></li>
	</ul>
</div>
広告
関連ページ
アイコンドロップダウンボタン・グループドロップダウン・ボタンインプット・グループナビゲーションナビゲーション・バーパンくずリストページネーションラベルバッジジャンボトロンページ・ヘッダーサムネイルアラートプログレス・バーメディア・オブジェクトリスト・グループパネルレスポンシブな埋め込み埋め込み効果
広告