Jak stworzyć/zaprojektować pasek navootstrap 5
W Bootstrap 5 pasek NAV służy do łączenia i łączenia wszystkich stron internetowych związanych z witryną, a użytkownik może łatwo przemieszczać się między stronami. Pasek nawigacyjny jest bardzo ważnym elementem witryny, która zawiera logo marki, nazwy stron i ich linki oraz pole wyszukiwania zgodnie z wymaganiami użytkownika.
Ten artykuł zawiera szczegółową wiedzę o
- Tworzenie paska navbar
- NAVBAR z menu rozwijanym
- NAVBAR z formą wbudowaną
- Clupsible Navbar
- Zmiana kolorów navbar
Jak utworzyć pasek nawigacyjny
Aby utworzyć użycie navbar, .Navbar klasa i wyrównać menu w wierszu .navbar-expand-xxl/lg/md/sm. Aby wybrać między lekkim lub ciemnym nastrojem .Navbar-Light/Dark i nadać kolor tła użycie paska żerowania .BG Light.
Kod:
Bootstrap 5 Navbar
W ten sposób tworzysz pasek Nav w Bootstrap 5.
NAVBAR z menu rozwijanym
Aby utworzyć pasek NAV za pomocą menu rozwijanego .Klasa rozwijana z .Klasa Nav-Item w
Kod
W ten sposób tworzony jest pasek nawigacyjny z menu rozwijanym.
NAVBAR z formą wbudowaną
Aby utworzyć pasek NAV z formą wbudowaną, użyj tag z klasą .wbudowana forma i owinąć to wokół tag z klasą .Kontrola formy i dodaj przycisk za pomocą tag z klasą .BTN, BTN-Success, Zaraz po Zamknięcie.
W ten sposób tworzysz pasek NAV z formą wbudowaną.
Clupsible Navbar
Aby utworzyć składany pasek nawigacyjny, użyj z .zawalić się I .NOVBAR-COCLASSE zajęcia. Dać unikalny id = ”” do div, a następnie owinąć div wokół twojego I
tagi. Aby umożliwić składany navbar, utwórz tag powyżej .zawalić się Div z .Navbar-Toggler klasa, a także Daj data-BS-cel = „Zakochanie się” I data-BS-cel = „#id”. Wewnątrz tego tag Utwórz tag z klasą .Navbar-Toggler-Icon Aby utworzyć przycisk ikony trzech linii.
W ten sposób tworzysz składany pasek navabar.
Zmień kolor Navbar
Aby zmienić kolor paska Nav, użyj następujących klas
- BG Light
- BG-Primary
- BG-SUCCCESS
- Warning BG
- BG-info
- BG Danger
lub użyj inline etykietka z kolor tła; atrybut.
Wniosek
Aby utworzyć użycie navbar, .Navbar, .navbar-expand-xxl/lg/md/sm, .Navbar-Light/Dark, BG-Light/Primary/Success/Ostrzeżenie/Informacje/Klasa niebezpieczeństwa z etykietka. Dodaj logo marki lub nazwy tag z klasą .Brand Navbar w środku tag, do dodania menu tag z klasą .Navbar-Nav w środku Dodaj także dla elementów menu tag z klasą .Wewnętrzny element Nav
etykietka
oraz do dodania linków strony do elementów Nav Użyj, tag z klasą .Nav-Link w środku