autor: Robert
Gdy omówiliśmy już formularze to dobrze było by jakoś dane które do nich wprowadzamy wysłać do serwera.
Bootstrap pozwala nam skorzystać z kilku gotowych i estetycznych przycisków, których listę znajdziecie poniżej.
Aby wyświetlić button używamy znaczników <a class="btn" href="...">...</a>
lub <button class="btn">...</button>
Button | Klasa (class=” „) |
---|---|
class="btn btn-default" |
|
class="btn btn-primary" |
|
class="btn btn-info" |
|
class="btn btn-success" |
|
class="btn btn-warning" |
|
class="btn btn-danger" |
|
class="btn btn-inverse" |
|
class="btn btn-link" |
Oczywiście rozmiary przycisków można zmieniać by pasowały do naszego formularza. Zmiany dokonujemy poprzez dodanie klasy do naszego buttona.
Przykłady poniżej.
Button | Klasa (class=” „) |
---|---|
class="btn btn-default btn-lg" |
|
class="btn btn-primary btn-lg" |
|
class="btn btn-info" |
|
class="btn btn-success btn-sm" |
|
class="btn btn-warning btn-sm" |
|
class="btn btn-danger btn-xs" |
|
class="btn btn-inverse btn-xs" |
Gdy chcemy by przycisk był szerokości całego bloku w jakim się znajduje, korzystamy z klasy .btn-block
Gdy chcemy by któryś link z klasą .btn
był wyłączony, korzystamy z klasy .disabled
. Aby button był wyłączony korzystamy z parametru disabled="disabled"
.active
Gdy nie chcemy aby nasz przycisk zmieniał swój kolor po najechaniu na niego kursorem możemy nadać mu klasę .active
.
Poniżej znajduje się strona z wymienionym przykładami
Przykładowa strona
Skorzystaj z blokowego przycisku czyli <button type="button" class="btn btn-primary btn-lg btn-block">Przycisk na całą szerokość</button>
. Zamknij sobie ten przycisk np w divie z klasą .col-sm-2
i będzie on się zmniejszał wraz z ekranem. Wejdź sobie na http://kursbootstrap.pl/buttony-przyciski/ masz tam blokowe przyciski i zmniejsz sobie okno przeglądarki.
Bo taka jest idea buttonów, żeby były duże na małych ekranach i wygodnie się je klikało:) Możesz pokombinować ze zmianą klasy za pomocą jQuery w zależności od rozdzielczości. Albo nadać buttonowi klasę .hidden-md
a mniejszemu przyciskowi .visible-sm .visible-xs