przycisk Style
Bootstrap zapewnia siedem stylów przycisków:
Aby osiągnąć style przycisk powyżej, Bootstrap ma następujące klasy:
-
.btn-default -
.btn-primary -
.btn-success -
.btn-info -
.btn-warning -
.btn-danger -
.btn-link
Poniższy przykład pokazuje kod dla różnych stylów przycisków:
Przykład
<button type="button" class="btn btn-default">Default</button>
<button
type="button" class="btn btn-primary">Primary</button>
<button
type="button" class="btn btn-success">Success</button>
<button
type="button" class="btn btn-info">Info</button>
<button type="button"
class="btn btn-warning">Warning</button>
<button type="button" class="btn
btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button> Spróbuj sam " Klasy przycisk może być używany na <a> , <button> lub <input> element:
Przykład
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input
type="submit" class="btn btn-info" value="Submit Button"> Spróbuj sam " Dlaczego stawiamy # w href atrybutu łącza?
Ponieważ nie mamy dowolną stronę, aby połączyć je, a nie chcemy, aby uzyskać "404" wiadomość, kładziemy # jako link. W prawdziwym życiu powinien on oczywiście był prawdziwy adres URL do strony "Szukaj".
Rozmiary przycisków
Bootstrap zawiera cztery rozmiary przycisków:
Klasy, które definiują różne rozmiary to:
-
.btn-lg -
.btn-md -
.btn-sm -
.btn-xs
Poniższy przykład pokazuje kod dla różnych rozmiarach przycisku:
Przykład
<button
type="button" class="btn btn-primary btn-lg">Large</button>
<button
type="button" class="btn btn-primary btn-md">Medium</button>
<button
type="button" class="btn btn-primary btn-sm">Small</button>
<button
type="button" class="btn btn-primary btn-xs">XSmall</button>
Spróbuj sam " Blok Poziom Przyciski
Przycisk poziomu bloku rozciąga się na całą szerokość elementu nadrzędnego.
Dodaj klasy .btn-block , aby utworzyć przycisk blokowych:
Aktywny / Przyciski niepełnosprawnych
Przycisk można ustawić aktywny (pojawiają wciśnięty) lub niepełnosprawnej (unclickable) Państwo:
Klasa .active sprawia, że pojawiają się wciśnięty przycisk, a klasa .disabled sprawia przycisk unclickable:
Przykład
<button
type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled
Primary</button> Spróbuj sam " Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4»
Kompletna Bootstrap Przycisk referencyjny
Pełną odniesienia wszystkich klas przycisku, przejdź do naszej pełnej Bootstrap Przycisk Reference .