Przyciski Bootstrap
Style przycisków
Bootstrap zapewnia różne style przycisków:
Aby osiągnąć powyższe style przycisków, Bootstrap ma następujące klasy:
.btn.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link
Poniższy przykład przedstawia kod dla różnych stylów przycisków:
Przykład
<button type="button" class="btn">Basic</button>
<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>
Klasy przycisków mogą być używane na elemencie <a>, <button>lub
:<input>
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">
Dlaczego umieszczamy # w atrybucie href linku?
Ponieważ nie mamy żadnej strony, do której można by to połączyć, i nie chcemy otrzymywać komunikatu „404”, w naszych przykładach umieściliśmy # jako link. Powinien to być prawdziwy adres URL do określonej strony.
Rozmiary przycisków
Bootstrap zapewnia cztery rozmiary przycisków:
Klasy definiujące różne rozmiary to:
.btn-lg.btn-sm.btn-xs
Poniższy przykład przedstawia kod dla różnych rozmiarów przycisków:
Przykład
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
Przyciski poziomu bloku
Przycisk poziomu bloku obejmuje całą szerokość elementu nadrzędnego.
Dodaj klasę .btn-block, aby utworzyć przycisk poziomu bloku:
Przykład
<button type="button" class="btn btn-primary btn-block">Button 1</button>
Przyciski aktywne/wyłączone
Przycisk może być ustawiony w stan aktywny (pozorny wciśnięty) lub wyłączony (niemożliwy do kliknięcia):
Klasa .activesprawia, że przycisk wydaje się być wciśnięty, a klasa
.disabled
sprawia, że nie można go kliknąć:
Przykład
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
Kompletny opis przycisku Bootstrapa
Aby uzyskać pełne informacje o wszystkich klasach przycisków, przejdź do naszej pełnej informacji o przyciskach Bootstrap .