Buttony / Przyciski
autor: Robert
15 lipca 2013
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" |
Wymiary przycisków
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" |
Przycisk na całą szerokość bloku w którym się zawiera
Gdy chcemy by przycisk był szerokości całego bloku w jakim się znajduje, korzystamy z klasy .btn-block
Wyłączanie przycisków
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"
Button z klasą .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
Post się przydał? Oceń go proszę.
(15 głosów, średnia: 5,00 na 5)
Loading...Komentarze: 7 komentarzy
Robert 3 grudnia 2014 o 19:18
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.
Robert 4 grudnia 2014 o 15:38
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