Компьютерапия

Группы кнопок позволяют сгруппировать несколько кнопок на одной строке. Это полезно, если вы хотите разместить элементы, такие как кнопки выравнивания. Вы можете добавить опцию JavaScript-radio и стиль флажка с помощью Bootstrap Button Plugin.

В следующей таблице приведены важные классы, которые Bootstrap предоставляет для использования групп кнопок -

<div class = "btn-group">
<button type = "button" class = "btn btn-default"> Button1 </ button>
<button type = "button" class = "btn btn-default"> Button2 </ button>
</div>

<div class = "btn-toolbar" role = "toolbar">
<div class = "btn-group"> ... </div>
<div class = "btn-group"> ... </div>
</div>

<div class = "btn-group btn-group-lg"> ... </ div>
<div class = "btn-group btn-group-sm"> ... </ div>
<div class = "btn-group btn-group-xs"> ... </ div>

<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>

Вертикальная группа кнопок - Buttongroup

Следующий пример демонстрирует использование класса .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>