Skupiny tlačítek Bootstrap
Skupiny tlačítek
Bootstrap 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: Namísto použití velikostí tlačítek na každé tlačítko ve skupině použijte .btn-group-lg|sm|xsk určení velikosti všech tlačítek ve skupině třídu:
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 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>
Zarovnané skupiny tlačítek
Chcete-li pokrýt celou šířku obrazovky, použijte .btn-group-justified
třídu:
Příklad s <a>prvky:
Příklad
<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>
Poznámka: U <button>prvků musíte každé tlačítko zabalit do .btn-grouptřídy:
Příklad
<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>
Vnoření skupin tlačítek a rozbalovací nabídky
Vnořte skupiny tlačítek k vytvoření rozbalovacích nabídek:
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 <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>
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" 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>