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

ボタングループを使用すると、複数のボタンを1行に積み重ねることができます。これは、整列ボタンなどのアイテムを一緒に配置する場合に便利です。オプションのJavaScriptラジオとチェックボックススタイルの動作をlink：/bootstrap/bootstrap_button_plugin [Bootstrap Button Plugin]で追加できます。

次の表は、Bootstrapがボタングループを使用するために提供する重要なクラスをまとめたものです-

Class	Description	Code Sample
.btn-group	This class is used for a basic button group. Wrap a series of buttons with class *.btn in** .btn-group*.	`<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	This helps to combine sets of <div class = "btn-group"> into a <div class = "btn-toolbar"> for more complex components.	`<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	These classes can be applied to button group instead of resizing each button.	`<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	This class make a set of buttons appear vertically stacked rather than horizontally.	`<div class = "btn-group-vertical"> ... </div>`

基本的なボタングループ

次の例は、上の表で説明したクラス .btn-group の使用を示しています-

<div class = "btn-group">

   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>

</div>

ボタンツールバー

次の例は、上記の表で説明したクラス .btn-toolbar の使用を示しています-

<div class = "btn-toolbar" role = "toolbar">

   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 1</button>
      <button type = "button" class = "btn btn-default">Button 2</button>
      <button type = "button" class = "btn btn-default">Button 3</button>
   </div>

   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 4</button>
      <button type = "button" class = "btn btn-default">Button 5</button>
      <button type = "button" class = "btn btn-default">Button 6</button>
   </div>

   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 7</button>
      <button type = "button" class = "btn btn-default">Button 8</button>
      <button type = "button" class = "btn btn-default">Button 9</button>
   </div>

</div>

ボタンのサイズ

次の例は、上の表で説明したクラス* .btn-group-**の使用を示しています-

<div class = "btn-group btn-group-lg">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
</div>

<div class = "btn-group btn-group-sm">
   <button type = "button" class = "btn btn-default">Button 4</button>
   <button type = "button" class = "btn btn-default">Button 5</button>
   <button type = "button" class = "btn btn-default">Button 6</button>
</div>

<div class = "btn-group btn-group-xs">
   <button type = "button" class = "btn btn-default">Button 7</button>
   <button type = "button" class = "btn btn-default">Button 8</button>
   <button type = "button" class = "btn btn-default">Button 9</button>
</div>

ネスティング

ボタングループを別のボタングループ内にネストできます。つまり、 .btn-group を別の .btn-group 内に配置できます。これは、一連のボタンと混合したドロップダウンメニューが必要な場合に行われます。

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>

   <div class = "btn-group">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>

      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>

</div>

垂直ボタングループ

次の例は、上の表で説明したクラス .btn-group-vertical の使用を示しています-

<div class = "btn-group-vertical">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>

   <div class = "btn-group-vertical">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>

      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>

</div>

Bootstrap-button-groups

目次