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ę.
(16 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
- Bootstrap 3 (47)
- Bootstrap 4 (3)
- Breadcrumbs (1)
- Buttony (5)
- CSS (15)
- Etykiety (2)
- Formularze (4)
- Ikony (1)
- JavaScript (5)
- Karuzela / Slider (1)
- Klasy pomocnicze (1)
- Komponenty (20)
- Lista rozwijana / dropdown (2)
- Listy (1)
- Media (1)
- Menu (2)
- Modal (1)
- Obrazy (2)
- Panele (2)
- Paski postępu (1)
- Powiadomienia (1)
- Rusztowanie szablonu (3)
- Studnia (1)
- Tabele (1)
- Tworzenie strony www (2)
- Typografia (2)
- Uncategorized (1)
- Wprowadzenie (9)
- Zakładki (1)
