twitter-bootstrap
guziki
Szukaj…
Składnia
- Klasy: .btn-default | .btn-primary | .btn-sukces | .btn-info | .btn-warning | .btn-dangerous | .btn-link;
- Rozmiary: .btn-lg | .btn-md | .btn-sm | .btn-xs;
- Stan: aktywny | wyłączone.
Klasy przycisków
Bootstrap zapewnia wiele klas stylizacji przycisków i wyróżnienia ich.
Przyciski ładowania .btn można utworzyć, dodając klasę .btn do elementu.
| Klasa Bootstrap | Rola (kolor) |
|---|---|
.btn-default | Przycisk standardowy (biały) |
.btn-primary | Zapewnia dodatkową wizualną wagę i identyfikuje akcję podstawową (niebieski) |
.btn-success | Służy do wskazania udanego działania (zielony) |
.btn-info | Przycisk kontekstowy do dostarczania informacji (jasnoniebieski) |
.btn-warning | Wskazuje, że użytkownik powinien zachować ostrożność (żółty) |
.btn-danger | Wskazuje niebezpieczne lub negatywne działanie (czerwony) |
.btn-link | Sprawia, że przycisk wygląda jak tag kotwicy. |
Rozmiary przycisków
Możesz również tworzyć różne rozmiary przycisków za pomocą klas .btn-size
| Klasa Bootstrap | Wynik |
|---|---|
.btn-lg | Tworzy przycisk większego rozmiaru |
.btn-sm | Tworzy przycisk mniejszego rozmiaru |
.btn-xs | Tworzy bardzo mały przycisk |
.btn-block | Przyciski stają się elementami na poziomie bloku i obejmują całą szerokość ich elementu nadrzędnego |
Uaktywnij przycisk
active klasa sprawi, że przycisk będzie wyglądał na wciśnięty.
<button type="button" class="btn btn-primary active">Active Primary</button>
Wyłącz przycisk
Dodanie disabled klasy do przycisku spowoduje, że przycisk nie będzie klikalny i wyświetli zabroniony kursor po najechaniu na niego wskaźnikiem.
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Renderuj przyciski poziomo razem
Wiele przycisków można renderować poziomo za pomocą klasy .btn-group . Wystarczy owinąć przyciski wewnątrz elementu kontenera i nadać temu elementowi klasę btn-group.
<div class="btn-group">
<button type="button" class="btn btn-primary">Apples</button>
<button type="button" class="btn btn-primary">Oranges</button>
<button type="button" class="btn btn-primary">Pineapples</button>
</div>
Renderuj przyciski w pionie
Zastosuj .btn-group-vertical do elementu kontenera
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apples</button>
<button type="button" class="btn btn-primary">Oranges</button>
<button type="button" class="btn btn-primary">Pineapples</button>
</div>
Niech grupa przycisków zajmie pełną szerokość
Przyciski owinięte w .btn-group zajmują tylko tyle szerokości, ile potrzeba. Aby grupa obejmowała całą szerokość ekranu, użyj zamiast tego polecenia .btn-group-justified .
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apples</a>
<a href="#" class="btn btn-primary">Oranges</a>
<a href="#" class="btn btn-primary">Pineapples</a>
</div>