przyciski z Bootstrap
by: Aurelia SypniewskaPosted on:

Przyciski w Bootstrap (Buttons)

Czas czytania: 2 minut

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

Rodzaje przycisków

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).

<!-- standardowy przycisk -->
<button class="btn btn-default" type="button">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button class="btn btn-primary" type="button">Primary</button>

<!-- Indicates a successful or positive action -->
<button class="btn btn-success" type="button">Success</button>

<!-- Contextual button for informational alert messages -->
<button class="btn btn-info" type="button">Info</button>

<!-- Indicates caution should be taken with this action -->
<button class="btn btn-warning" type="button">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button class="btn btn-danger" type="button">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button class="btn btn-link" type="button">Link</button>
Primary link Link
<a class="btn btn-primary btn-lg active" href="#">Primary link</a>
<a class="btn btn-default btn-lg active" href="#">Link</a>

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.