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

Bootstrap - Группы загрузки - кнопки

Категория: Bootstrap 3
Просмотров: 1401

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

Содержание:

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

Класс Описание Образец кода
.btn-groupЭтот класс используется для базовой группы кнопок. Оберните серию кнопок с классом .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-toolbarЭто помогает объединить наборы 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-group-verticalЭтот класс создает набор кнопок, расположенных вертикально, а не горизонтально.
<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>



Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok