Bootstrap 按钮组
ボタングループは、複数のボタンを同じ行にまとめて配置できます。ボタンを一緒に整列させたい場合に非常に便利です。次の方法で可能です：Bootstrap 按钮（Button） 插件オプションのJavaScriptラジオボタンとチェックボックスのスタイリング動作を追加します。
以下の表は、Bootstrapが提供するボタングループを使用する際の重要なクラスの一部をまとめたものです。
| Class | 描述 | 代码示例 |
|---|---|---|
| .btn-group | このクラスは、基本的なボタングループを形成するために使用されます。.btn-group中に一連のclassを配置する.btnのボタン。 |
<div class="btn-group"> <button type="button" class="btn btn-default">Button1</button> <button type="button" class="btn btn-default">Button2</button> </div> |
| .btn-toolbar | このclassは、いくつかの <div class="btn-group"> を1つの <div class="btn-toolbar"> に結合するのに役立ち、一般的により複雑なコンポーネントを得ることができます。 |
<div class="btn-toolbar" role="toolbar"> <div class="btn-group">...</div> <div class="btn-group">...</div> </div> |
| .btn-group-lg, .btn-group-sm, .btn-group-xs | これらのクラスは、個々のボタンのサイズを調整することなく、ボタングループ全体のサイズ調整に適用できます。 |
<div class="btn-group btn-group-lg">...</div> <div class="btn-group btn-group-sm">...</div> <div class="btn-group btn-group-xs">...</div> |
| .btn-group-vertical | このクラスは、ボタンのグループを水平方向ではなく垂直方向に積み重ねて表示します。 | <div class="btn-group-vertical"> ... </div> |
基本的なボタングループ
以下の例は、上記の表で説明したクラスを示しています。.btn-groupの使用：
实例
<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>
尝试一下 »
結果は次のようになります：
按钮工具栏
以下の例は、上記の表で説明したクラスを示しています。.btn-toolbarの使用：
实例
<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>
尝试一下 »
結果は次のようになります：
ボタンのサイズ
以下の例は、上記の表で説明したクラスを示しています。.btn-group-*の使用：
实例
<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>
尝试一下 »
結果は次のようになります：
嵌套
ボタングループ内に別のボタングループを入れ子にできます。つまり、.btn-group内側に別のものをネストする.btn-group 。ドロップダウンメニューを一連のボタンと組み合わせて使用したい場合に、これを使用します。
实例
<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>
尝试一下 »
結果は次のようになります：
垂直のボタングループ
以下の例は、上記の表で説明したクラスを示しています。.btn-group-verticalの使用：
实例
<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>
尝试一下 »
結果は次のようになります：
