Учебники

Bootstrap — группы кнопок

Октябрь 25, 2018

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

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

Учебный класс Описание Пример кода
.btn-группа, Этот класс используется для основной группы кнопок. Оберните ряд кнопок с классом .btn в .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-панель Это помогает объединить наборы <div class = «btn-group»> в <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-группы по вертикали Этот класс заставляет набор кнопок казаться сложенными вертикально, а не горизонтально. 
<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 в другую группу .btn . Это делается, когда вы хотите, чтобы выпадающие меню смешивались с рядом кнопок. 

<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, рассмотренного в приведенной выше таблице.

53
Share: