Przyciski bootstrap | Wyjaśnione
Ten artykuł będzie Cię poinformować:
- Jak zrobić przyciski w ładowaniu?
- Jak tworzyć przyciski konturu w bootstrapie?
- Jak dostosować rozmiary przycisków bootstrap?
- Jak zrobić przycisk na poziomie bloków w ładowaniu?
- Jak tworzyć aktywne przyciski stanu w ładowaniu?
- Jak utworzyć przyciski stanu wyłączone w bootstrapie?
Jak zrobić przyciski w ładowaniu?
Bootstrap „Btn„Klasa jest wykorzystywana do tworzenia przycisków. Aby dodać stylowe przyciski, możesz użyć „Btn„Klasa z klasą kolorów, na przykład„BTN-Success„Aby utworzyć zielony przycisk.
W HTML „The””,„", I "”Tagi z typem„przycisk”Są wykorzystywane do tworzenia przycisków. „„Btn”Klasa ma predefiniowaną styl, które dodają podstawową styl do elementów przycisków.
Aby uzyskać jasną koncepcję, sprawdź poniższy przykład.
Przykład
W pliku HTML wykonaj kroki, aby utworzyć przyciski za pomocą różnych znaczników:
- Dodać "" I "„Elementy i przypisuj je”Btn" I "BTN-Primary„Zajęcia.
- Następnie dodaj „”Tag z typem„przycisk". Przypisz to „Btn" I "BTN-Success”Dla stylizacji jako pierwsze dwa przyciski jako niebieskie, a trzeci jako zielony:
otwarty
Wyjście
Jak tworzyć przyciski konturu w bootstrapie?
Aby dodać kontury przyciskowe, bootstrap „BTN-Outline-*„Klasa jest używana. W swojej składni „*”Tutaj reprezentuje kolor zarys. Na przykład, "Niebezpieczeństwo BTN-Outline„Umieszcza czerwony zarys”BTN-Outline-Primary”Ustawia niebieski zarys i więcej.
Przeanalizuj kod podany poniżej:
Można zauważyć, że „Następny”Button ma niebieski zarys,„Anulować”Przycisk z czerwonym konturem i„Powodzenie„Button został zaprojektowany z zielonym zarysem:
Jak dostosować rozmiary przycisków bootstrap?
Niektóre klasy bootstrap są stosowane w celu dostosowania rozmiarów przycisków, takich jak:
- "Btn-lg”Klasa jest stosowana do utworzenia dużego przycisku. Ta klasa może zwiększyć rozmiar czcionki i wyściółki.
- "BTN-MD”Tworzy średniej wielkości przycisk.
- "BTN-SM„Tworzy mały przycisk.
Przykład
Teraz utworzymy trzy przyciski o różnych rozmiarach i nazwach siebie:
Wyjście
Jak zrobić przycisk na poziomie bloków w ładowaniu?
Przyciski na poziomie bloków to te, które mają rozmiar pełnej szerokości. Aby utworzyć przyciski na poziomie bloku, „BTN-BLOCK„Klasa jest wykorzystywana w następujący sposób
Wyjście
Jak tworzyć aktywne przyciski stanu w ładowaniu?
Przyciski stanu aktywnego odnoszą się do aktualnie aktywnych przycisków. Te przyciski są nieco ciemniejsze niż zwykle. Aby utworzyć takie przyciski, bootstrap „aktywny„Klasa jest wykorzystywana.
Przykład
Poniższy kod tworzy dwa przyciski. Pierwszy jest w stanie normalnym, podczas gdy drugi jest stosowany z „aktywny" klasa:
Wyjście
Jak utworzyć przyciski stanu wyłączone w bootstrapie?
Wyłączone przyciski stanu odnoszą się do przycisków, które są nieoczekiwane i bezużyteczne. W bootstrapie „wyłączony„Klasa jest wykorzystywana do utworzenia przycisku stanu wyłączonego. „„wyłączony„Atrybut może być również używany do tego celu.
Przykład
Sprawdź poniższy przykład:
- Pierwszy przycisk nie jest w stanie niepełnosprawnym.
- Drugi wykorzystuje „wyłączony„Klasa, aby utworzyć przycisk stanu niepełnosprawnego.
- Trzeci używa „wyłączony" atrybut:
Wyjście
Omówiliśmy różne aspekty związane z przyciskami bootstrap i ich stylem w CSS.
Wniosek
„„Btn”Klasa jest wykorzystywana do tworzenia przycisków bootstrap z prostym projektem. Aby tworzyć kolorowe i zarysowe przyciski, „btn-*" I "BTN-Outline-*„Zajęcia są wykorzystywane tam, gdzie„*”Symbolizuje każdą klasę kolorów. Na przykład, "BTN Warning„Tworzy żółty przycisk”BTN-OSTLINE LARNING„Tworzy żółty zarysowy przycisk i wiele innych. Aby przyciski były aktywne lub wyłączone, stosowane są klasy „aktywne” i „niepełnosprawne”. Ten post dostarczył kompleksowego przewodnika na przyciskach bootstrap.