ブートストラップボタングループ

ボタングループ

Bootstrapを使用すると、一連のボタンをボタングループに（1行で）グループ化できます。

<div>クラスを持つ要素を使用.btn-groupして、ボタングループを作成します。

例

<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>

ヒント：グループ内のすべてのボタンにボタンサイズを適用する代わりに、クラス.btn-group-lg|sm|xsを使用してグループ内のすべてのボタンのサイズを設定します。

例

<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>

垂直ボタングループ

Bootstrapは、垂直ボタングループもサポートしています。

クラス.btn-group-verticalを使用して、垂直ボタングループを作成します。

例

<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>

正当化されたボタングループ

画面の幅全体にまたがるには、次の.btn-group-justified クラスを使用します。

<a>要素の例：

例

<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>

注：要素の場合<button>、各ボタンを.btn-groupクラスでラップする必要があります。

例

<div class="btn-group btn-group-justified">
<div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
</div>
</div>

ネストボタングループとドロップダウンメニュー

ドロップダウンメニューを作成するためのネストボタングループ：

例

<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Sony <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
</div>
</div>

分割ボタンのドロップダウン

例

<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
    <li><a href="#">Tablet</a></li>
    <li><a href="#">Smartphone</a></li>
</ul>
</div>

❮ 前次 ❯

ブートストラップ3チュートリアル

ブートストラップグリッド

ブートストラップテーマ

ブートストラップの例

ブートストラップCSS参照

ブートストラップJSRef