Bootstrap 4 grupy przycisków
Grupy przycisków
Bootstrap 4 umożliwia grupowanie serii przycisków razem (w jednej linii) w grupę przycisków:
Użyj <div>elementu z klasą, .btn-groupaby utworzyć grupę przycisków:
Przykład
<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>
Wskazówka: Zamiast stosować rozmiary przycisków do każdego przycisku w grupie, użyj class .btn-group-lgdla dużej grupy przycisków lub .btn-group-smdla małej grupy przycisków:
Duże przyciski:
Domyślne przyciski:
Małe przyciski:
Przykład
<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>
Pionowe grupy przycisków
Bootstrap 4 obsługuje również pionowe grupy przycisków:
Użyj klasy, .btn-group-verticalaby utworzyć pionową grupę przycisków:
Przykład
<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>
Zagnieżdżanie grup przycisków i menu rozwijanych
Zagnieżdżaj grupy przycisków do tworzenia menu rozwijanych (więcej o menu rozwijanych dowiesz się w następnym rozdziale):
Przykład
<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
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Podział przycisków rozwijanych
Przykład
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
Pionowa grupa przycisków z rozwijanym menu
Przykład
<div class="btn-group-vertical">
<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
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
Grupy przycisków obok siebie
Grupy przycisków są domyślnie „wbudowane”, co sprawia, że pojawiają się obok siebie, gdy masz wiele grup:
Przykład
<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>
<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>