Grupy przycisków Bootstrap – Button groups

Czas czytania: < 1 minut

Do tej pory zdążyłam już we wcześniejszym wpisie omówić przyciski Bootstrap. Teraz pokażę jak połączyć je w grupy.

Najprostszym przykładem takiej grupy są poniższe 3 przyciski

<div class="btn-group" role="group" aria-label="...">
<button class="btn btn-success" type="button">Left</button>
<button class="btn btn-success" type="button">Middle</button>
<button class="btn btn-success" type="button">Right</button>
</div>

Jak pisałam już wcześniej takie same właściwości jak nadano tym przyciską mogą zostać nadane innym elementom takim jak „DIV”.

Innym przykładem zastosowania grup przycisków jest toolbar (pasek narzędzi):

<div class="btn-group" role="group" aria-label="First group">
<button class="btn btn-default" type="button">1</button> 
<button class="btn btn-default" type="button">2</button> 
<button class="btn btn-default" type="button">3</button> 
<button class="btn btn-default" type="button">4</button>
</div>

Jak widać przypomina on numerację stron bloga lub aktualności na stronie internetowej.

Autorzy bootstrap przwidzieli również możliwość manipulacji wielkośćią przycisków

 

 

 

<div>
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
<button class="btn btn-default" type="button">Left</button> 
<button class="btn btn-default" type="button">Middle</button> 
<button class="btn btn-default" type="button">Right</button>
</div>
<p>&nbsp;</p>
<div class="btn-group" role="group" aria-label="Default button group">
<button class="btn btn-default" type="button">Left</button> 
<button class="btn btn-default" type="button">Middle</button> 
<button class="btn btn-default" type="button">Right</button>
</div>
<p>&nbsp;</p>
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
<button class="btn btn-default" type="button">Left</button> 
<button class="btn btn-default" type="button">Middle</button> 
<button class="btn btn-default" type="button">Right</button>
</div>
<p>&nbsp;</p>
<div class="btn-group btn-group-xs" role="group" aria-label="Extra-small button group">
<button class="btn btn-default" type="button">Left</button> 
<button class="btn btn-default" type="button">Middle</button> 
<button class="btn btn-default" type="button">Right</button>
</div>
</div>

Więcej przykładów: http://getbootstrap.com/components/#btn-groups