Bootstrap3
日本語リファレンス

広告

ボタン・グループ  Button groups


同じボタングループのボタンを一行、もしくは、一列に並べることができる。

サンプル

ポイントは1つだけ。

  1. ボタン群を覆う要素(div要素など)のclass属性に、btn-groupを指定する。
<div class="btn-group" role="group">
	<button type="button" class="btn btn-default">左</button>
	<button type="button" class="btn btn-default">中央</button>
	<button type="button" class="btn btn-default">右</button>
</div>

button要素をボタンに使うスタイル。

表示サンプル

ソースコード

<div class="btn-group" role="group">
	<button type="button" class="btn btn-default">左</button>
	<button type="button" class="btn btn-default">中央</button>
	<button type="button" class="btn btn-default">右</button>
</div>

a要素をボタンに使うスタイル。

表示サンプル

ソースコード

<div class="btn-group" role="group">
	<a href="#" class="btn btn-default" role="button">左</a>
	<a href="#" class="btn btn-default" role="button">中央</a>
	<a href="#" class="btn btn-default" role="button">右</a>
</div>

ツールバーの中で、ボタングループを使うこともできる。

表示サンプル

ソースコード

<div class="btn-toolbar" role="toolbar">
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-default">A</button>
		<button type="button" class="btn btn-default">B</button>
		<button type="button" class="btn btn-default">C</button>
	</div>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-default">D</button>
		<button type="button" class="btn btn-default">E</button>
	</div>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-default">F</button>
		<button type="button" class="btn btn-default">G</button>
		<button type="button" class="btn btn-default">H</button>
	</div>
</div>

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

表示サンプル

ソースコード

<div class="btn-group btn-group-lg" role="group">
	<button type="button" class="btn btn-default">大A</button>
	<button type="button" class="btn btn-default">大B</button>
	<button type="button" class="btn btn-default">大C</button>
</div>

<div class="btn-group" role="group">
	<button type="button" class="btn btn-default">通常A</button>
	<button type="button" class="btn btn-default">通常B</button>
	<button type="button" class="btn btn-default">通常C</button>
</div>

<div class="btn-group btn-group-sm" role="group">
	<button type="button" class="btn btn-default">小A</button>
	<button type="button" class="btn btn-default">小B</button>
	<button type="button" class="btn btn-default">小C</button>
</div>

<div class="btn-group btn-group-xs" role="group">
	<button type="button" class="btn btn-default">極小A</button>
	<button type="button" class="btn btn-default">極小B</button>
	<button type="button" class="btn btn-default">極小C</button>
</div>

ボタングループを表す要素(class属性にbtn-groupを指定したdiv要素)を入れ子(ネスト)にすることで、ボタングループ内にドロップダウン・ボタンを実装できる。

表示サンプル

ソースコード

<div class="btn-group" role="group">
	<button type="button" class="btn btn-default">A</button>
	<button type="button" class="btn btn-default">B</button>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
			C
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">C-1</a></li>
			<li><a href="#">C-2</a></li>
		</ul>
	</div>
	<button type="button" class="btn btn-default">D</button>
</div>

ボタン群を覆った要素(div要素)のclass属性にbtn-group-verticalを指定することで、垂直方向にボタンを並べる縦型のボタングループとなる。

表示サンプル

ソースコード

<div class="btn-group-vertical" role="group">
	<button type="button" class="btn btn-default">A</button>
	<button type="button" class="btn btn-default">B</button>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
			C
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">C-1</a></li>
			<li><a href="#">C-2</a></li>
		</ul>
	</div>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
			D
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">D-1</a></li>
			<li><a href="#">D-2</a></li>
		</ul>
	</div>
	<button type="button" class="btn btn-default">E</button>
</div>

ボタンにa要素を使う場合、ボタン群を覆った要素(div要素)のclass属性にbtn-group-justifiedを追加することで、両端揃えボタングループとなる。

表示サンプル

ソースコード

<div class="btn-group btn-group-justified" role="group">
	<a href="#" class="btn btn-default" role="button">A</a>
	<a href="#" class="btn btn-default" role="button">B</a>
	<div class="btn-group" role="group">
		<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
			C <span class="caret"></span>
		</a>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">C-1</a></li>
			<li><a href="#">C-2</a></li>
			<li><a href="#">C-3</a></li>
		</ul>
	</div>
	<div class="btn-group" role="group">
		<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
			D <span class="caret"></span>
		</a>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">D-1</a></li>
			<li><a href="#">D-2</a></li>
			<li><a href="#">D-3</a></li>
		</ul>
	</div>
	<a href="#" class="btn btn-default" role="button">E</a>
</div>

ボタンにbutton要素を使う場合、各ボタン(button要素)をボタングループで覆い、更にそのボタン群をボタングループで覆い、入れ子にする。ボタン群を覆った要素(div要素)のclass属性にbtn-group-justifiedを追加することで、両端揃えボタングループとなる。

表示サンプル

ソースコード

<div class="btn-group btn-group-justified" role="group">
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-default">A</button>
	</div>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-default">B</button>
	</div>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
			C
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">C-1</a></li>
			<li><a href="#">C-2</a></li>
			<li><a href="#">C-3</a></li>
		</ul>
	</div>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
			D
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">D-1</a></li>
			<li><a href="#">D-2</a></li>
			<li><a href="#">D-3</a></li>
		</ul>
	</div>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-default">E</button>
	</div>
</div>

広告