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

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

В следующей таблице приведены важные классы 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>

Вертикальные группы кнопок

Следующий пример демонстрирует использование класса .btn-группы по вертикали из приведенной выше таблице:

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

Читайте также

Быть веб-разработчиком в 2020 — Часть 1: CSS или Bootstrap?

5 лет назад

Быть веб-разработчиком в 2020 – Часть 2. Выбор правильной структуры CSS

5 лет назад

Показать пост в модальном окне в WordPress

8 лет назад

0 0 голоса

Рейтинг статьи

Подписаться

авторизуйтесь

Уведомить о

новых последующих комментарияхновых ответах на мои комментарии

Я разрешаю использовать свой email и отправлять уведомления о новых комментариях и ответах (вы cможете отказаться от подписки в любое время).

Label

{} [+]

Имя*

Email*

Веб-сайт

**ссылки nofollow

Δ

Label

{} [+]

Имя*

Email*

Веб-сайт

**ссылки nofollow

Δ

2 комментариев

Старые

Новые Популярные

Межтекстовые Отзывы

Посмотреть все комментарии

Виталий Бриль

5 лет назад

Какой-то бред… У меня не работает и всё запутанно рассказано.
Интересней было бы привести пример в стиле ООП

0

Ответить

Сергей Брин

4 месяцев назад

Нормально всё расписано.
В моей компании многие используют эту статью.

0

Ответить