Последние учебники веб-разработки
 

Bootstrap Button Groups


Группы кнопок

Bootstrap позволяет группе ряд кнопок вместе (на одной линии) в группе кнопок:

,

Используйте <div> элемент с классом .btn-group , чтобы создать группу кнопок:

пример

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>
Попробуй сам "

Совет: Вместо применения размеров кнопок для каждой кнопки в группе, используйте класс .btn-group-* по размеру все кнопки в группе:

пример

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>
Попробуй сам "

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

Bootstrap также поддерживает вертикальные группы кнопок:

,

Используйте класс .btn-group-vertical создать вертикальную группу кнопок:

пример

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>
Попробуй сам "

Обоснованные Группы кнопок

Для того, чтобы охватить всю ширину экрана, используйте .btn-group-justified класс:

Пример с <a> элементами:

пример

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Apple</a>
  <a href="#" class="btn btn-primary">Samsung</a>
  <a href="#" class="btn btn-primary">Sony</a>
</div>
Попробуй сам "

Примечание: Для <button> элементов, вы должны обернуть каждую кнопку в .btn-group класса:

пример

<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Samsung</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>
Попробуй сам "

Вложенные группы кнопок и раскрывающихся меню

,

Кнопка Гнездо группы для создания выпадающих меню:

пример

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Sony <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
  </div>
</div>
Попробуй сам "

Split Dropdowns Button

пример

<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Tablet</a></li>
    <li><a href="#">Smartphone</a></li>
  </ul>
</div>
Попробуй сам "

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »