Przycisk Fundacja
przycisk Styl
Fundacja oferuje sześć stylów przycisków. .button klasy tworzy niebieski przycisk wraz z otuliną. Różne kolory dla klasy przycisków: .secondary , .success , .info , .warning lub .alert :
Przykłady
<Button type = class "przycisk" = "button"> Domyślnie przycisk </>
<Button type = class "przycisk" = "button wtórne"> Secondary </ button>
<Button type = "button" class = "sukces przycisk"> Sukces </ button>
<Button type = "button" class = "info button"> Informacje </ button>
<Button type = "button" class = "Ostrzeżenie przycisk"> Uwaga </ button>
<Button type = "button" class = "alert przycisk"> Uwaga </ button>
<Button type = class "przycisk" = "button wtórne"> Secondary </ button>
<Button type = "button" class = "sukces przycisk"> Sukces </ button>
<Button type = "button" class = "info button"> Informacje </ button>
<Button type = "button" class = "Ostrzeżenie przycisk"> Uwaga </ button>
<Button type = "button" class = "alert przycisk"> Uwaga </ button>
Spróbuj »
Klasa przycisk może być używany w <a> , <button> lub <input> elementów:
Przykłady
<A Href = "#" class = "button info" role = "button"> Link przyciskowy </ a>
<Button type = "button" class = "info button"> Przycisk </ button>
<Input type = "button" class = "info button" value = "Przycisk Input">
<Input type = "submit" class = "info button" value = "Zatwierdź przyciskiem">
<Button type = "button" class = "info button"> Przycisk </ button>
<Input type = "button" class = "info button" value = "Przycisk Input">
<Input type = "submit" class = "info button" value = "Zatwierdź przyciskiem">
Spróbuj »
 | Dlaczego href tag # będzie? Jeżeli nie chcemy, aby przejść i kliknij na link, aby uzyskać stronę "404", możemy ustawić href znacznika #. |
|---|
przycisk Rozmiar
Możemy użyć .large , .small lub .tiny klasę, aby ustawić rozmiar przycisku:
Przykłady
<Button type = class "przycisk" = "button duże"> duży </ button>
<Button type = class "przycisk" = "button"> Domyślnie przycisk </>
<Button type = class "przycisk" = "button małe"> mały </ button>
<Button type = class "przycisk" = "button malutki"> Tiny </ button>
<Button type = class "przycisk" = "button"> Domyślnie przycisk </>
<Button type = class "przycisk" = "button małe"> mały </ button>
<Button type = class "przycisk" = "button malutki"> Tiny </ button>
Spróbuj »
przycisk zaokrąglone
Można użyć .radius i .round klasę ustawić okrągły przycisk:
Przykłady
<Button type = class "przycisk" = "button"> Przycisk Domyślne </ button>
<Button type = "button" class = "Promień przycisk"> Promień Przycisk </ button>
<Button type = "button" class = "okrągły przycisk"> Okrągły Przycisk </ button>
<Button type = "button" class = "Promień przycisk"> Promień Przycisk </ button>
<Button type = "button" class = "okrągły przycisk"> Okrągły Przycisk </ button>
Spróbuj »
rozszerzenie przycisk
Można użyć .expand klasę ustawić przycisk do 100% szerokopasmowych:
Przykłady
<Button type = class "przycisk" = "button"> Przycisk Domyślne </ button>
<Button type = class "przycisk" = "button rozwinąć"> Expanded Przycisk </ button>
<Button type = class "przycisk" = "button rozwinąć"> Expanded Przycisk </ button>
Spróbuj »
przycisk Wyłącz
Można użyć .disabled klasę kliknij przycisk Ustawienia nie jest dostępny:
Przykłady
<Button type = class "przycisk" = "button"> Przycisk Domyślne </ button>
<Button type = class "przycisk" = "button wyłączony"> Przycisk niepełnosprawnych </ button>
<Button type = class "przycisk" = "button wyłączony"> Przycisk niepełnosprawnych </ button>
Spróbuj »