Bootstrap 4 skupiny tlačítek
Skupiny tlačítek
Bootstrap 4 vám umožňuje seskupit řadu tlačítek (na jeden řádek) do skupiny tlačítek:
Použijte <div>prvek s třídou .btn-groupk vytvoření skupiny tlačítek:
Příklad
<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>
Tip: Místo použití velikostí tlačítek na každé tlačítko ve skupině použijte třídu .btn-group-lgpro velkou skupinu tlačítek nebo třídu pro .btn-group-smmalou skupinu tlačítek:
Velká tlačítka:
Výchozí tlačítka:
Malá tlačítka:
Příklad
<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>
Svislé skupiny tlačítek
Bootstrap 4 také podporuje vertikální skupiny tlačítek:
Použijte třídu .btn-group-verticalk vytvoření vertikální skupiny tlačítek:
Příklad
<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>
Vnoření skupin tlačítek a rozbalovací nabídky
Vnořte skupiny tlačítek k vytvoření rozevíracích nabídek (více o rozevíracích seznamech se dozvíte v další kapitole):
Příklad
<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>
Rozbalovací seznamy tlačítek rozdělení
Příklad
<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>
Vertikální skupina tlačítek s rozevíracím seznamem
Příklad
<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>
Skupiny tlačítek vedle sebe
Skupiny tlačítek jsou ve výchozím nastavení „vložené“, takže když máte více skupin, zobrazí se vedle sebe:
Příklad
<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>