Przyciski w Bootstrap (Buttons)

przyciski z Bootstrap

Kategoria wpisu Bootstrap 3, Kurs Bootstrap Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

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

Rozmiary przycisków

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





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

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.

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.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *