Grupy przycisków Bootstrap
Grupy przycisków
Bootstrap umożliwia zgrupowanie 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>
Porada: Zamiast stosować rozmiary przycisków do każdego przycisku w grupie, użyj class .btn-group-lg|sm|xsdo zmiany rozmiaru wszystkich przycisków w grupie:
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 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>
Uzasadnione grupy przycisków
Aby objąć całą szerokość ekranu, użyj .btn-group-justified
klasy:
Przykład z <a>elementami:
Przykład
<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>
Uwaga: W przypadku <button>elementów musisz owinąć każdy przycisk w .btn-groupklasę:
Przykład
<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>
Zagnieżdżanie grup przycisków i menu rozwijanych
Zagnieżdżaj grupy przycisków do tworzenia menu rozwijanych:
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 <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>
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" 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>