Style guzików w Bootstrap 5 | Wyjaśnione

Wstawienie zwykłych przycisków na stronach internetowych może być nudne. Podanie im określonego stylu sumuje się upiększania Twojej witryny. Jeśli opracowujesz swoją witrynę za pomocą Bootstrap 5, przyciski stylizacji to nic wielkiego. W tej wersji bootstrap są dostępne różne klasy, która może wykonywać zadanie stylizacji przycisków w zaledwie jednym wierszu kodu. Aby nauczyć się różnych sposobów stylizacji przycisków w Bootstrap 5 Przeczytaj artykuł do końca.

Dodawanie kolorów do przycisków

Możesz dodać kolor tła do przycisków, który nie tylko dodaje do nich piękno, ale także przekazuje cel za przyciskiem. Aby to zrobić, możesz użyć dowolnej z tych danych klas, .Btn, .BTN-Primary, .BTN-Success, .BTN-info, .BTN-Secondary, .BTN Warning, .Niebezpieczeństwo BTN, .Btn-Dark, .BTN Light.

Jak dodać kolory do przycisku za pomocą Bootstrap 5

W poniższym przykładzie zademonstrujemy niektóre z wyżej wymienionych klas.

Html

Przycisk
Przycisk
Przycisk

Powyższy kod generuje trzy przyciski, najpierw z podstawową stylistyką, drugi o zielonym kolorze tła i wskazując pozytywne działanie, a ostatni o niebieskim kolorze tła i reprezentującym ważną akcję. Zauważ, że użyliśmy .Klasa BTN podczas stylizacji każdego przycisku, ponieważ daje to pewne wyściółki do przycisku wraz z podstawowym stylem.

Wyjście

Możesz wypróbować inne zajęcia, aby zobaczyć, jak stylizują przyciski.

Przyciski jako linki

Możesz także połączyć inne strony internetowe lub źródła z przyciskami w Bootstrap 5.

Jak przekierować użytkownika do innego źródła za pomocą przycisku

Załóżmy, że chcesz przekierować użytkowników do innego źródła za pomocą przycisku.

Html

Połączyć

Tutaj możesz po prostu podać link drugiego źródła do atrybutu HREF znacznika kotwicy. Ponadto przycisk utworzony w powyższym fragmencie kodu będzie miał jasnoniebieski kolor i podstawowy styl.

Wyjście

Oto jak możesz tworzyć przyciski jako linki.

Przycisk wejściowy

Oprócz znaczników kotwicznych możesz również użyć wyżej wymienionych klas przycisków również na wejściach. Jak wiesz, tag może renderować niektóre typy, takie jak przesyłanie lub zresetowanie, dlatego możesz zastosować styl do dowolnego z tych typów wejściowych.

Jak nakładać klasy przycisków na wejściach

Oto jak możesz zastosować klasy przycisków na wejściach.

Powyższe wygeneruje trzy typy przycisków wejściowych z każdym przyciskiem o innym kolorze tła.

Wyjście

W ten sposób możesz zastosować klasy powiązane z przyciskami na różne typy wejściowe.

Rozmiar przycisku

W niektórych scenariuszach chcemy zrobić powiększone przyciski, w międzyczasie w innych przypadkach chcemy odwrotnie. Korzystając z klas powiązanych z rozmiarami przycisków, możemy osiągnąć to zadanie.

Jak zmienić rozmiary przycisków w Bootstrap 5

Rozważ poniższy przykład, aby zrozumieć, jak tworzyć przyciski o różnych rozmiarach.

Html

Mały
Średni
Duży

W powyższym kodzie generujemy trzy przyciski odpowiednio małych, średnich i dużych rozmiarów. Wszystkie przyciski również otrzymały określony styl.

Wyjście

To są przyciski o różnych rozmiarach.

Nakładanie przycisków

Możesz także nakreślić przyciski za pomocą .BTN-Outline klasa w połączeniu z klasami kolorów, aby stylizować przyciski.

Jak podać kontur przycisków w Bootstrap 5

Załóżmy, że chcesz nakreślić przycisk za pomocą Bootstrap 5, a następnie podążaj za fragmentem kodu poniżej.

Składać

Powyższe wygeneruje przycisk z zielonym konturem, a ponadto, gdy przyniesiesz mysz na przycisk, zostanie zastosowany efekt zawisowy.

Wyjście

Przycisk otrzymał zarys wraz z efektem zawisu.

Aktywne i niepełnosprawne przyciski

Aby dodać piękno do przycisku, możesz dodać stany, takie jak aktywne lub niepełnosprawne na przyciskach lub stylizacja stanów przycisku.

Jak zrobić guzik położony w bootstrap 5

Wygenerujmy dwa przyciski, jeden ze stanem aktywnym, a drugi ze stanem niepełnosprawnym.

Html

Aktywny
Wyłączony

W powyższym kodzie pierwszy przycisk ma podstawową styl wraz z jasnoniebieskim tłem i stanem aktywnym, tymczasem drugi został wyłączony i ma taki sam styl jak pierwszy. Ponadto oba przyciski mają kolor białego tekstu.

Wyjście

To są przyciski z stanami aktywnymi i niepełnosprawnymi.

Przyciski na poziomie bloku

W celu tworzenia przycisków, które zajmują całą poziome przestrzeń, musisz przypisać .D-grid Tymczasem klasa do div zawierająca element przycisku .BTN-BLOCK klasa do elementu przycisku.

Jak utworzyć przycisk na poziomie bloków za pomocą Bootstrap 5

Utwórzmy przycisk na poziomie bloku.

Html

Przycisk na poziomie bloku

Tutaj generujemy przycisk pełnej szerokości za pomocą .Klasa D-Grid na elemencie nadrzędnym, która sprawia, że ​​obejmuje całą szerokość elementu nadrzędnego.

Wyjście

Powyższe wyjście pokazuje przycisk na poziomie bloku.

Wniosek

Przyciski można stylizować na wiele sposobów za pomocą różnych klas Bootstrap 5 powiązanych z przyciskami. Na przykład możesz dodawać kolory do przycisków za pomocą klas takich jak .BTN-Primary, .BTN-Success, .BTN-info itp. Ponadto możesz użyć innych klas dostępnych do tworzenia przycisków jako linków, podać im określony rozmiar, kontur lub uczynić je na poziomie blokowym. Ten blog omawia różne style, które możesz podać przyciskom za pomocą Bootstrap 5.