Bootstrap - grupy przycisków

Grupy przycisków umożliwiają zestawianie wielu przycisków w jednej linii. Jest to przydatne, gdy chcesz umieścić razem elementy, takie jak przyciski wyrównania. Możesz dodać opcjonalne radio JavaScript i zachowanie stylu pola wyboru za pomocą wtyczki przycisku Bootstrap .

Poniższa tabela podsumowuje ważne klasy, które Bootstrap zapewnia do używania grup przycisków -

Klasa	Opis	Przykład kodu
.btn-group	Ta klasa jest używana dla podstawowej grupy przycisków. Owiń serię przycisków klasą.btn w .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	Pomaga to łączyć zestawy <div class = "btn-group"> w <div class = "btn-toolbar"> dla bardziej złożonych komponentów.	`<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	Te klasy można zastosować do grupy przycisków zamiast zmiany rozmiaru każdego przycisku.	`<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	Ta klasa sprawia, że zestaw przycisków pojawia się raczej pionowo, a nie poziomo.	`<div class = "btn-group-vertical"> ... </div>`

Podstawowa grupa przycisków

Poniższy przykład demonstruje użycie class .btn-group omówione w powyższej tabeli -

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

Przycisk Pasek narzędzi

Poniższy przykład demonstruje użycie class .btn-toolbar omówione w powyższej tabeli -

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

Rozmiar guzika

Poniższy przykład demonstruje użycie class .btn-group-* omówione w powyższej tabeli -

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

Zagnieżdżanie

Możesz zagnieździć grupy przycisków w innej grupie przycisków, tj. Umieścić .btn-group w innym .btn-group . Odbywa się to, gdy chcesz, aby menu rozwijane były mieszane z serią przycisków.

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

Pionowa grupa przycisków

Poniższy przykład demonstruje użycie class .btn-group-vertical omówione w powyższej tabeli -

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