autor: Robert
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.
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:
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:
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:
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:
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:
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">
Kod:
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