Style guzików w Bootstrap 5 | Wyjaśnione
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
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
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.
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
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
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.