Какая разница между машиной тьюринга и современной эвм? Такая же, как между восхождением хиллари на эверест и открытием отеля "Хилтон" на его вершине. (Алан.Дж.Перлис)

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

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...
20 мая 2017
Bootstrap - группы кнопок
Группы кнопок позволяют нескольким кнопкам взаимодействовать вместе на одной строке. Это полезно, если вы хотите разместить элементы, как кнопки выравнивания вместе. Вы можете добавить опциональный JavaScript стили радио и флажков с помощью плагина кнопок в Bootstrap.

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

 

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

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

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Просмотров: 140

Если статья понравилась, то поделитесь ей в социальных сетях:

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам:

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close