przycisk Groups
Bootstrap pozwala grupować szereg przycisków jednocześnie (w jednej linii) w grupie przycisków:
Za pomocą <div> element z klasy .btn-group do utworzenia grupy 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> Spróbuj sam " Wskazówka: Zamiast stosowania rozmiary przycisku do każdego przycisku w grupie, należy użyć klasy .btn-group-* wielkości 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> Spróbuj sam " Pionowe przycisk Grupy
Bootstrap obsługuje również pionowe grupy przycisków:
Użyj klasy .btn-group-vertical , aby utworzyć pionową grupy 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> Spróbuj sam " Uzasadnione przycisk Grupy
Aby objąć całą szerokość ekranu, użyj .btn-group-justified klasę:
Przykład z <a> elementów:
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> Spróbuj sam " Uwaga: <button> elementów, należy owinąć każdy przycisk w .btn-group klasy:
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> Spróbuj sam " Zagnieżdżanie Przycisk Grupy i rozwijane menu
grupy przycisków Nest stworzyć rozwijane menu:
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> Spróbuj sam " Przycisk dzielona Dropdowns
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> Spróbuj sam " Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 »