Przyciski w Bootstrap (Buttons)

Jak zdążyliście zapewne zauważyć bootstrap posiada wiele ciekawych funkcji i rozwiązań.

Kolejnym z nich, które chce omówić są przyciski / guziki. W bootsrap istieje specjalna grupa klas dzięki, którym można nadać przyciskom określone walory (właściwości):

Domyślnie występują następujące klasy:

• .btn-default
• .btn-primary
• .btn-success
• .btn-info
• .btn-warning
• .btn-danger
• .btn-link

Oczywiście włąsność class nie koniecznie musi zostać przypisana tyklo dla „button” może dotyczyć także innego typu obiektu jak link (a) czy paragraf (p).
Primary linkLink

Default


Primary


Success


Info


Warning


Danger


Link

Primary link
Link

Rozmiary przycisków

Buttons – czyli przyciski mogą mieć różne wielkości np:

Large button
Large button

Default button
Default button

Small button
Small button

Extra small button
Extra small button

Powyższe przyciski od strony kodowej wyglądają następująco.

Large button Large button

Default button Default button

Small button Small button

Extra small button Extra small button

Przyciski na całą szerokość pola

Zabrzmiało to nieco dziwnie, ale nie byłam pewna jak najlepiej określić tą właściwość. Chodzi bowiem o nadanie im szerokości takiej samej jak ma kontener, w którym zostały umieszczone np:

Poniżej zamieściłam kod odpowiadający tym przyciską. Jak widać mają one szerokość bliską pola, w którym zostały umieszczone.

Block level button 
Block level button

Z dodatkowych ciekawych opcji warto wymienić możliwość dodania klasy „active” – czyli aktywny oraz disabled – nieaktywny. Ta druga zablokuje obiekt tak by nie można w niego kliknąć (wyłączy go). Pierwsza zaś sprawi, że będzie wyglądał on jak normalny tylko po kliknięciu.

Trzeba pamiętać, że nie koniecznie musimy stosować się do reguł narzucanych przez bootstrap. Ich zadaniem jest ułatwienie pracy. Warto jednak zwrócić uwagę by nie nadpisywać właściwości istniejącej funkcji a stworzyć nową formułę. Dzięki temu w razie potrzeby będzie można wrócić do wbudowanej opcji w przyszłości jeśli zajdzie taka potrzeba.