Bootstrap tutorial logo

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>

Klasy przycisków
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.

Klasy przycisków
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 ze znacznikiem <a href="">

Link a href
Link a href

Button ze znacznikiem <button>


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.




Link z klasą primary
Link z klasą default

Poniżej znajduje się strona z wymienionym przykładami
Przykładowa strona
 


Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (14 głosów, średnia: 5,00 na 5)
Loading...

cVz 19 października 2014 o 11:38

Jak dodać akcje do buttona? tzn: hrefa

Odpowiedz
    Robert 20 października 2014 o 09:54

    Tworzymy zwykły anchor text ale z klasami przycisku:
    <a class="btn btn-default" href="#" role="button">Link</a>

    Odpowiedz
Natalia 3 grudnia 2014 o 15:33

Czy dałoby się, żeby te przyciski też były responsywne? tzn zmniejszały się razem z całą zawartością? Bo jak zmniejszam ekran przeglądarki, to te przyciski nie reagują.

Odpowiedz
    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.

    Odpowiedz
      Natalia 4 grudnia 2014 o 14:00

      Nic mi to nie daje, bo zmienia się szerokość, a nie wysokość i trochę dziwnie to wygląda na małym ekranie. Ale dziękuję za wszystkie odpowiedzi :)

      Odpowiedz
        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

        Odpowiedz