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> </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> </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> </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
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.