Grupy przycisków / Button group

3 307 0

We wpisie o przyciskach poznaliście ich rodzaje, kolory i rozmiary. Kolejnym elementem dotyczącym przycisków jaki opiszę jest ich grupowanie. Polega ono na „złączenie” kilku przycisków w jeden element ale zachowując możliwość kliknięcia w każdy z nich oddzielnie. Ten element znajduje zastosowanie między innymi w sytuacji gdy mamy kilka sekcji i każda z nich posiada jakieś przyciski. Wtedy można je fajnie pogrupować co od razu sugeruje użytkownikowi, że przyciśnięcie każdego z nich będzie modyfikowało tą a nie inną sekcję.

Podstawowy przykład

Podobnie jak w przypadku tworzenia grup checkboxów/radio jako buttonów najpierw musimy stworzyć „wrapper” czyli div, który będzie otaczał przyciski. Temu divowi musimy nadać klasę .btn-group oraz atrybut role=group. W jego wnętrzu tworzymy sobie klasyczne buttony. Mogą one, ale nie muszą, mieć ten sam kolor.

Przykład

 

Kod


Pasek narzędzi

Kolejnym przykładem zastosowania grup przycisków jest zbudowanie „paska narzędzi”. Możemy w ten sposób stworzyć grupę grup przycisków i podpiąć do nich różne akcje. W przyciskach możemy umieszczać tekst ale możemy skorzystać również z gotowych ikon jak na przykład „Font Awesome”.
Taki pasek narzędzi tworzymy poprzez stworzenie „wrappera” z klasą .btn-toolbar i atrybutem role=toolbar. W jego wnętrzu umieszczamy natomiast opisane wyżej grupy buttonów. Aby nasze grupy były od siebie oddalone, każdej z nich dodamy klasę .mr-2 (mr – od margin-right ).

Przykład

Kod

Rozmiary przycisków

Podobnie jak ze zwykłymi buttonami, możemy zmienić również rozmiar całej ich grupy. Różnica polega na tym, że zamiast nadawać rozmiar przyciskowi to dodajemy odpowiednią klasę całej grupie czyli naszemu wrapperowi z klasą .btn-group. Aby uzyskać większy rozmiar korzystamy z klasy .btn-group-lg, dla mniejszych przycisków zastosujemy klasę .btn-group-sm.

Przykład

Kod

Buttony z rozwijaną listą

Twórcy Bootstrapa przygotowali element, który jest czymś w rodzaju rozwijanej listy opcji, która pojawia się po kliknięciu w przycisk. Element ten możemy użyć również w przypadku grupy przycisków. W tym celu najpierw tworzymy standardową grupę przycisków czyli div z klasą .btn-group i umieszczamy wewnątrz buttony. Aby stworzyć button z rozwijaną listą, muskmy wewnątrz naszego wrappera zagnieździć kolejną grupę przycisków czyli kolejnego diva z klasą .btn-group. W jego wnętrzu najpierw umieszczamy zwykły button z dodatkową klasą .dropdown-toggle oraz atrybutem data-toggle="dropdown" a następnie naszą rozwijaną listę. Listę tą tworzymy poprzez stworzenie wrappera otaczającego elementy listy czyli diva z klasą .dropdown-menu a w jego wnętrzu linki z klasą .dropdown-item.

Przykład

Kod

Pionowa grupa przycisków

Grupa przycisków nie musi być tylko pozioma. Jeśli nasz layout wymaga tego by buttony układały się pod sobą, to nie ma z tym problemu:) Aby uzyskać pionowy układ nasz wrapper musi mieć klasę .btn-group-vertical. W pionowej liście również możecie umieszczać rozwijane listy.

Przykład

Kod

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (9 głosów, średnia: 5,00 na 5)
Loading...

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*