Bootstrap3
日本語リファレンス
広告
  1. Bootstrap3日本語リファレンス
  2. コンポーネント
  3. ボタン・グループ

ボタン・グループ　　Button groups

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

サンプル
使い方 　 基本的使い方 〜button要素のボタン〜 　 基本的使い方２ 〜a要素のボタン〜 　 ツールバー 　 サイズ・バリエーション 　 入れ子（ネスト） 　 縦型ボタングループ 　 両端揃えボタングループ 〜a要素のボタン〜 　 両端揃えボタングループ２ 〜button要素のボタン〜

使い方

ポイントは１つだけ。

  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要素のボタン〜

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要素のボタン〜

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">Ａ</button>
		<button type="button" class="btn btn-default">Ｂ</button>
		<button type="button" class="btn btn-default">Ｃ</button>
	</div>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-default">Ｄ</button>
		<button type="button" class="btn btn-default">Ｅ</button>
	</div>
	<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>
</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">大Ａ</button>
	<button type="button" class="btn btn-default">大Ｂ</button>
	<button type="button" class="btn btn-default">大Ｃ</button>
</div>

<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>

<div class="btn-group btn-group-sm" 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>

<div class="btn-group btn-group-xs" 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>

入れ子（ネスト）

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

表示サンプル

ソースコード

<div class="btn-group" role="group">
	<button type="button" class="btn btn-default">Ａ</button>
	<button type="button" class="btn btn-default">Ｂ</button>
	<div class="btn-group" role="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><a href="#">Ｃ−１</a></li>
			<li><a href="#">Ｃ−２</a></li>
		</ul>
	</div>
	<button type="button" class="btn btn-default">Ｄ</button>
</div>

縦型ボタングループ

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

表示サンプル

ソースコード

<div class="btn-group-vertical" role="group">
	<button type="button" class="btn btn-default">Ａ</button>
	<button type="button" class="btn btn-default">Ｂ</button>
	<div class="btn-group" role="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><a href="#">Ｃ−１</a></li>
			<li><a href="#">Ｃ−２</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">
			Ｄ
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">Ｄ−１</a></li>
			<li><a href="#">Ｄ−２</a></li>
		</ul>
	</div>
	<button type="button" class="btn btn-default">Ｅ</button>
</div>

両端揃えボタングループ　〜a要素のボタン〜

ボタンに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 href="#" class="btn btn-default" role="button">Ｂ</a>
	<div class="btn-group" role="group">
		<a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
			Ｃ <span class="caret"></span>
		</a>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">Ｃ−１</a></li>
			<li><a href="#">Ｃ−２</a></li>
			<li><a href="#">Ｃ−３</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">
			Ｄ <span class="caret"></span>
		</a>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">Ｄ−１</a></li>
			<li><a href="#">Ｄ−２</a></li>
			<li><a href="#">Ｄ−３</a></li>
		</ul>
	</div>
	<a href="#" class="btn btn-default" role="button">Ｅ</a>
</div>

両端揃えボタングループ２　〜button要素のボタン〜

ボタンに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">Ａ</button>
	</div>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-default">Ｂ</button>
	</div>
	<div class="btn-group" role="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><a href="#">Ｃ−１</a></li>
			<li><a href="#">Ｃ−２</a></li>
			<li><a href="#">Ｃ−３</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">
			Ｄ
			<span class="caret"></span>
		</button>
		<ul class="dropdown-menu" role="menu">
			<li><a href="#">Ｄ−１</a></li>
			<li><a href="#">Ｄ−２</a></li>
			<li><a href="#">Ｄ−３</a></li>
		</ul>
	</div>
	<div class="btn-group" role="group">
		<button type="button" class="btn btn-default">Ｅ</button>
	</div>
</div>
広告
関連ページ
アイコンドロップダウンボタン・グループドロップダウン・ボタンインプット・グループナビゲーションナビゲーション・バーパンくずリストページネーションラベルバッジジャンボトロンページ・ヘッダーサムネイルアラートプログレス・バーメディア・オブジェクトリスト・グループパネルレスポンシブな埋め込み埋め込み効果
広告