przyciski z Bootstrap
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
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…