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">
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ładamiPost się przydał? Oceń go proszę.
(2 głosów, średnia: 5,00 na 5)
Loading...