Sprawdź najnowszą wersję komponentu buttons zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.
Twórz własny design komponentu za pomocą generatora przycisków.
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
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>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 role="button" aby czytniki ekranowe je prawidłowo sklasyfikowały.
Przykład
Kod
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">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
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>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
<button class="btn btn-primary btn-sm" type="submit">Button primary sm</button>
<button class="btn btn-primary" type="submit">Button primary</button>
<button class="btn btn-primary btn-lg" type="submit">Button primary lg</button>
<button class="btn btn-secondary btn-sm" type="submit">Button secondary sm</button>
<button class="btn btn-secondary" type="submit">Button secondary</button>
<button class="btn btn-secondary btn-lg" type="submit">Button secondary lg</button>
<button class="btn btn-success btn-sm" type="submit">Button success sm</button>
<button class="btn btn-success" type="submit">Button success</button>
<button class="btn btn-success btn-lg" type="submit">Button success lg</button>
<button class="btn btn-info btn-sm" type="submit">Button info sm</button>
<button class="btn btn-info" type="submit">Button info</button>
<button class="btn btn-info btn-lg" type="submit">Button info lg</button>
<button class="btn btn-warning btn-sm" type="submit">Button warning sm</button>
<button class="btn btn-warning" type="submit">Button warning</button>
<button class="btn btn-warning btn-lg" type="submit">Button warning lg</button>
<button class="btn btn-danger btn-sm" type="submit">Button danger sm</button>
<button class="btn btn-danger" type="submit">Button danger</button>
<button class="btn btn-danger btn-lg" type="submit">Button danger lg</button>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
<button type="button" class="btn btn-primary btn-sm btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-sm btn-block">Block level button</button>
<button type="button" class="btn btn-primary btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-block">Block level button</button>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>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).
Przykład
Kod
<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>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
Kod
<button type="button" class="btn btn-lg btn-primary" disabled>Primary button disabled</button>
<button type="button" class="btn btn-secondary btn-lg" disabled>Secondary button disabled</button>
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link disabled</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Secondary Link disabled</a>
(25 głosów, średnia: 4,72 na 5)
Loading...