Grupowanie przycisków / Button groups | Kurs / Tutorial Bootstrap

Grupowanie przycisków / Button groups
autor: Robert

21 sierpnia 2013

Przyciski o których pisałem tutaj nie muszą być pojedyncze, możemy tworzyć z nich grupy, grupy grup, ustawiać je w pionie i zmieniać ich rozmiary. I właśnie o tym będzie ten wpis.

Grupowanie przycisków

Grupę przycisków tworzymy poprzez zamknięcie ich w divie z klasą .btn-group. Bootstrap sam zadba by pierwszy i ostatni z nich miały zaokrąglone rogi a środkowe były prostokątami.

Kod:

Grupowanie grup przycisków

Aby stworzyć „pasek” z grupami przycisków należy wszystkie grupy umieścić w divie z klasą .btn-toolbar a następnie umieszczać wewnątrz divy z klasą .btn-group czyli wymienione wyżej grupy przycisków.

Kod:

Zmiana rozmiaru grupy przycisków

Tak jak mogliśmy zmieniać rozmiary pojedynczych przycisków, możemy zmieniać także rozmiary całej grupy. Zabieg ten polega na dodaniu do diva z naszymi przyciskami dwóch klas, standardowo .btn-group, oraz klasy definiującej rozmiar btn-group-* gdzie do wyboru mamy -lg, -sm, -xs.

Kod:

Zagnieżdżanie listy w grupie buttonów

Możliwe jest stworzenie pojedynczego przycisku z którego po kliknięciu rozwija się lista. Tak samo możemy postąpić w przypadku grupy przycisków. W tym celu należy wewnątrz diva z klasą .btn-group umieścić kolejny div z klasą .btn-group a w nim standardowy kod przycisku z rozwijaną listą.

Kod:

Pionowa grupa przycisków

Przyciski nie zawsze muszą sąsiadować ze sobą w poziomie, możliwe także jest ustawienie ich w pionie. W tym przypadku również mamy możliwość zamieszczenia rozwijanej listy. Ustawienie przycisków w pionie wymaga jedynie zmiany klasy .btn-group na .btn-group-vertical

Kod:

Wypełnianie elementu nadrzędnego przyciskami

Podobnie jak w przypadku klasy .btn-block która „rozciąga” pojedynczy przycisk na całą szerokość kolumny czy elementu w jakim się znajduje, możliwe jest także rozciągnięcie całej grupy przycisków. Tworzymy wtedy diva z dwoma klasami: .btn-group oraz .btn-group-justified

WAŻNE:
Zabieg ten działa tylko dla znacznika <a type="button"> a nie będzie działał w przypadku znacznika <button type="button">

Lewy Środkowy Środkowy Prawy

Kod:

Kolory przycisków

I tutaj również jak w przypadku pojedynczych przycisków, można dodawać do nich klasy które definiują ich kolory. Są one do przypomnienia TUTAJ. Dodatkowo każdy przycisk z grupy może mieć inny kolor.

Kod:

Przykład jest dostępny tu:

Strona z przykładami