Przyciski / Button

5 159 0

Przyciski pojawiają się na każdej stronie internetowej. Korzystamy z nich przede wszystkim jako element służący do wysłania formularza ale także jako alternatywa dla linków tekstowych, jako nawigacje czy w elementach CTA (Call to action).

Jak wiecie z poprzednich wpisów, Bootstrap ma zdefiniowanie kilka kolorów, które służą do pokazywania odpowiednich kontekstów elementów lub po prostu ich „kolorowania”. Tak samo wygląda w przypadku buttonów.

Podstawowy przykład

Podstawowym przykładem będzie ostylowanie elementu <button>. Oczywiście wygląd przycisku możemy również nadać linkowi, elementowi <input> a nawet checkboxowi – ale o tym później.
By element zaczął wyglądać jak Bootstrapowy przycisk musimy nadać mu dwie klasy. Pierwsza z nich to klasa .btn a druga .btn-* gdzie pod gwiazdkę możemy podstawić primary, secondary, success, danger, warning, info, light, dark, link. Klasa .btn-link powoduje, że button jest wyświetlany jak zwykły link ale zachowuje się jak przycisk, czyli np. ma właściwość display: inline-block

Przykład

Kod

Elementy mogące mieć klasę btn

Jak pisałem wyżej, nie tylko element <button> można ostylować za pomocą Bootstrapowych klas wyświetlających przycisk. Zwykle gdy tworzycie formularze to element służący do wysłania jest elementem <input>, bez problemu możecie mu nadać klasy .btn .btn-*. Tak samo ma się sytuacja z elementem linku. Pamiętajmy tylko, że gdy element jest używany np. do przewijania karuzeli albo czegokolwiek innego nie związanego z jego pierwotnym przeznaczeniem (czyli linkowaniem do innej strony bądź sekcji obecnej strony) dodać do niego zapis role="button" aby czytniki ekranowe je prawidłowo sklasyfikowały.

Przykład

Link

Kod

Przyciski z ramką / obrysem

Nowością w Bootstrap 4 są przyciski, które nie są wypełnione w środku czyli nie mają tła a jedynie ramkę. Ja osobiście lubię stosować je jako link na stronie a irytuje mnie jak ktoś używa ich jako przyciski do wysłania formularza, potwierdzenia akcji czy usunięcia elementu. Moim zdaniem przyciski akcji muszą być wyraźne.
Przyciski tego typu tworzymy poprzez dodanie obowiązkowej dla wszystkich buttonów klasy .btn a następnie klasy .btn-outline-* gdzie pod * podstawiamy znane Wam już wcześniej nazwy „kolorów”.

Przykład

Kod

Rozmiary przycisków

Jeśli zaproponowany przez twórców Bootstrapa rozmiar przycisków nie pasuje do koncepcji naszej strony to z pomocą kilku linijek CSSa możemy je dopasować do swoich potrzeb. Pamiętajmy, że nie modyfikujemy plików Bootstrapa a nadpisujemy właściwości jego klas w swoim pliku CSS. Ale wracając do naszych buttonów. Bez własnych modyfikacji mamy do dyspozycji dwa dodatkowe rozmiary. Klasa .btn-lg zwiększa rozmiar przycisku a klasa .btn-sm zmniejsza. Oczywiście jest to klasa dodatkowa, więc podczas jej użycia pamiętamy o klasach .btn oraz .btn-*.

Przykład

Kod

Dodatkowo, prócz rozmiarów przycisków możemy zdefiniować by zajmował on całą szerokość elementu w którym jest on zawarty. Taki efekt uzyskamy za pomocą klasy .btn-block. Klasa ta jest znów klasą dodatkową więc aby przykładowo uzyskać duży blokowy button musimy użyć klas .btn, .btn-primary, .btn-lg oraz .btn-block.

Przykład

Kod

Aktywny przycisk

Jeśli z jakiegoś powodu potrzebujecie aby wasz przycisk wyglądał jak „wciśnięty”, na przykład jeśli jest już odwiedzonym linkiem, to wystarczy, że dodacie do niego klasę .active (oraz atrybut aria-pressed="true" dla czytników ekranowych).

Kod

Nieaktywny przycisk

Gdy chcemy wyłączyć możliwość klikania w jakiś przycisk, przykładowo w formularzu, który nie przeszedł walidacji danych, możemy dodać do niego atrybut disabled. W przypadku skorzystania z linka a nie elementu button zamiast atrybutu disabled, musimy dodać klasę .disabled

Przykład

Primary link disabled Secondary Link disabled

Kod

Przydało się? Oceń proszę jak bardzo: SłaboJako takoNie ma źleDobrzeRewelacja! (17 głosów, średnia: 4,59 na 5)
Loading...

Chcesz coś napisać?

Podziel się swoją opinią bądź dodaj coś od siebie.

*

*