最新のWeb開発のチュートリアル
 

Bootstrap Button Groups


ボタングループ

Bootstrapあなたがボタングループに(一行に)一緒のグループに一連のボタンを可能にします:

使用し<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-*サイズグループ内のすべてのボタンに:

<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>
»それを自分で試してみてください

練習で自分自身をテスト!

演習1» 演習2» 演習3» 演習4» 演習5»