English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap基本チュートリアル

Bootstrapプラグイン

Bootstrap ボタングループ

ボタンチームは、複数のボタンを同じ行に並べることができます。ボタンを並べたい場合に非常に便利です。以下で Bootstrapボタン（Button）プラグイン オプションのJavaScriptラジオボックスとチェックボックスのスタイル行動を追加します。

以下のテーブルは、Bootstrapが提供するボタンチームの重要なclassをまとめています：

Class説明コード例
.btn-groupこの class は、基本的なボタングループを形成するために使用されます。以下の .btn-group に一連の class .btn のボタン。
<div>
　　<button　type="button">Button1</button>
　　　<button　type="button">Button2</button>
</div>
.btn-toolbarこの class は、複数の <div> を一つの <div> にまとめるのに役立ち、一般的により複雑なコンポーネントを取得します。
<div　role="toolbar">
　　<div>.../div>
　　<div>.../div>
</div>
.btn-group-lg, .btn-group-sm, .btn-group-xsこれらの class は、ボタンごとにサイズを調整する必要なく、ボタングループ全体のサイズ調整に適用できます。
<div>.../div>
<div>.../div>
<div>.../div>
.btn-group-verticalこの class は、ボタンを水平に並べる代わりに垂直に並べて表示するようにします。
<div>
　　...
</div>

基本的なボタングループ

以下の例では、上記のテーブルで説明されている class .btn-group の使用：

オンラインサンプル

!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="btn-group">
	<button　type="button"　class="btn　btn-default">ボタン　1</button>
	<button　type="button"　class="btn　btn-default">ボタン　2</button>
	<button　type="button"　class="btn　btn-default">ボタン　3</button>
</div>
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

ボタンツールバー

以下の例では、上記のテーブルで説明されている class .btn-toolbar の使用：

オンラインサンプル

!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="btn-toolbar"　role="toolbar">
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default">ボタン　1</button>
		<button　type="button"　class="btn　btn-default">ボタン　2</button>
		<button　type="button"　class="btn　btn-default">ボタン　3</button>
	</div>
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default">ボタン　4</button>
		<button　type="button"　class="btn　btn-default">ボタン　5</button>
		<button　type="button"　class="btn　btn-default">ボタン　6</button>
	</div>
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default">ボタン　7</button>
		<button　type="button"　class="btn　btn-default">ボタン　8</button>
		<button　type="button"　class="btn　btn-default">ボタン　9</button>
	</div>
</div>
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

ボタンのサイズ

以下の例では、上記のテーブルで説明されている class .btn-group-* の使用：

オンラインサンプル

!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="btn-group　btn-group-lg">
	<button　type="button"　class="btn　btn-default">ボタン　1</button>
	<button　type="button"　class="btn　btn-default">ボタン　2</button>
	<button　type="button"　class="btn　btn-default">ボタン　3</button>
</div>
<div　class="btn-group　btn-group-sm">
	<button　type="button"　class="btn　btn-default">ボタン　4</button>
	<button　type="button"　class="btn　btn-default">ボタン　5</button>
	<button　type="button"　class="btn　btn-default">ボタン　6</button>
</div>
<div　class="btn-group　btn-group-xs">
	<button　type="button"　class="btn　btn-default">ボタン　7</button>
	<button　type="button"　class="btn　btn-default">ボタン　8</button>
	<button　type="button"　class="btn　btn-default">ボタン　9</button>
</div>
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

ネスト

ボタングループ内に別のボタングループをネストすることができます、つまり、一つの .btn-group 内にネスト .btn-group 。下拉メニューと一連のボタンを組み合わせる場合に使用されます。

オンラインサンプル

!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="btn-group">
	<button　type="button"　class="btn　btn-default">ボタン　1</button>
	<button　type="button"　class="btn　btn-default">ボタン　2</button>
	<div　class="btn-group">
		<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown">
			ドロップダウン
			<span　class="caret"></span>
		</button>
		<ul　class="dropdown-menu">
			<li><a　href="#">ドロップダウンリンク　1</a></li>
			<li><a　href="#">ドロップダウンリンク　2</a></li>
		</ul>
　　</div>
</div>
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

垂直のボタングループ

以下の例では、上記のテーブルで説明されている class .btn-group-vertical の使用：

オンラインサンプル

!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="btn-group-vertical">
	<button　type="button"　class="btn　btn-default">ボタン　1</button>
	<button　type="button"　class="btn　btn-default">ボタン　2</button>
	<div　class="btn-group-vertical">
		<button　type="button"　class="btn　btn-default　dropdown-toggle"　data-toggle="dropdown">
			ドロップダウン
			<span　class="caret"></span>
		</button>
		<ul　class="dropdown-menu">
			<li><a　href="#">ドロップダウンリンク　1</a></li>
			<li><a　href="#">ドロップダウンリンク　2</a></li>
		</ul>
	</div>
</div>
</body>
</html>
テストを見てみる ‹/›

以下の結果が表示されます：

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