Tak więc ten artykuł zawiera szczegółową wiedzę o
Tak więc dzisiaj omówimy różne menu NaV (menu nawigacyjne), z których użytkownik może skorzystać zgodnie z jego wymogiem, aby dokonać responsywnego projektu.
Jak utworzyć podstawową NAV?
Podstawowa NAV poniżej jest tworzona za pomocą .Nav klasa z
Ale w Bootstrap 5 możemy użyć NAV jako znacznika HTML
Możemy również zmienić poziome lub pionowe wyrównanie zawartości NAV zgodnie z wymaganiami projektowymi.
Wyrównanie poziome
Początek
Aby wyrównać treść NAV w poziomie na początku, użyj klasy „Justify-Content-Start”:
Centrum
Aby wyrównać treść NAV w poziomie w centrum, użyj klasy „Justify-Content-Center”:
Koniec
Aby w końcu wyrównać treść NAV w poziomie, użyj klasy „Justify-Content-end”:
Wyrównanie pionowe
Aby wyrównać treść NAV w pionie, użyj klasy „Flex-Column”:
W ten sposób menu Nav jest wyrównane w pionie.
Style menu bootstrap
Menu bootstrap są klasyfikowane w dwóch kategoriach stylów:
Tabs
Aby przekonwertować menu Nav na zakładki, po prostu dodaj .Nav Nav-Tabs klasa do twojego
Za pomocą zakładek
W ten sposób zakładki używa
Za pomocą zakładek etykietka
W ten sposób zakładki używa tag są tworzone.
Pigułki
Aby przekonwertować menu Nav w tabletki, po prostu dodaj .Pills Nav Nav klasa do twojego
Pigułki za pomocą
W ten sposób pigułki używają
Pigułki za pomocą etykietka
W ten sposób pigułki używają
Zakładki z menu rozwijanym za pomocą
Aby utworzyć zakładki za pomocą menu rozwijanego za pomocą tag, użyj .upuścić klasa z .Nav-Item Zajęć i owinąć wokół znacznika kotwicy, który zawiera .Nav-Link, .Dyspdown-Toggle Zajęcia wraz z data-bs-toggle = "rozwijanie" atrybut. Następnie owinąć tę kotwicę
znacznik zawierający .Menu rozwijane klasa, owinięta tag, który zawiera znacznik zakotwiczenia z .Downiste post klasa prowadząca do pozycji menu rozwijanego.
W ten sposób zakładki z menu rozwijanym za pomocą
Zakładki z menu rozwijanym za pomocą etykietka
Aby utworzyć zakładki za pomocą menu rozwijanego za pomocą
tag, użyj .upuścić klasa z .Nav-Item Zajęć i owinąć wokół znacznika kotwicy, który zawiera .Nav-Link, .Dyspdown-Toggle Zajęcia wraz z data-bs-toggle = "rozwijanie" atrybut. Następnie owinąć tę kotwicę
znacznik zawierający .Menu rozwijane klasa, owinięta tag, który zawiera znacznik zakotwiczenia z .Downiste post klasa prowadząca do pozycji menu rozwijanego.
W ten sposób zakładki z menu rozwijanym
Tabletki z menu rozwijanym za pomocą
Aby utworzyć tabletki za pomocą menu rozwijanego za pomocą tag, użyj .upuścić klasa z .Nav-Item Zajęć i owinąć wokół znacznika kotwicy, który zawiera .Nav-Link, .Dyspdown-Toggle Zajęcia wraz z data-bs-toggle = "rozwijanie" atrybut. Następnie owinąć tę kotwicę
znacznik zawierający .Menu rozwijane klasa, owinięta tag, który zawiera znacznik zakotwiczenia z .Downiste post klasa prowadząca do pozycji menu rozwijanego.
W ten sposób pigułki z menu rozwijanym za pomocą
Tabletki z menu rozwijanym za pomocą etykietka
Aby utworzyć tabletki za pomocą menu rozwijanego za pomocą tag, użyj .upuścić klasa z .Nav-Item Zajęć i owinąć wokół znacznika kotwicy, który zawiera .Nav-Link, .Dyspdown-Toggle Zajęcia wraz z data-bs-toggle = "rozwijanie" atrybut. Następnie owinąć tę kotwicę
znacznik zawierający .Menu rozwijane klasa, owinięta tag, który zawiera znacznik zakotwiczenia z .Downiste post klasa prowadząca do pozycji menu rozwijanego.
W ten sposób pigułki z menu rozwijanym za pomocą
Pigułki pionowe
Aby stworzyć pigułki pionowe, po prostu dodaj klasę .Flex-kolumna z .Pills Nav klasa.
Wypełnij i uzasadnij menu zakładek i tabletek
.Nav-Fill klasa służy do wypełnienia przestrzeni w nieuzasadniony sposób .Nav-uprawiane Klasa służy do wypełnienia przestrzeni w uzasadniony sposób.
Zakładki z .Nav-Fill
Aby wypełnić odkryte przestrzenie pojemnika, po prostu dodaj .Nav-Fill klasa z .Nav Nav-Tabs. Ale .Nav-Fill klasa wypełniła tylko przestrzenie, ale ich nie usprawiedliwiła.
W ten sposób zakładki z .Nav-Fill są stworzone.
Zakładki z .Nav-uprawiane
.Nav-uprawiane klasa nie tylko wypełnia idealne przestrzenie, ale także rozkłada ją jednakowo między wszystkimi elementami NAV.
W ten sposób zakładki z .Nav-uprawiane są stworzone.
Pigułki z .Nav-Fill
Aby wypełnić odkryte przestrzenie pojemnika, po prostu dodaj .Nav-Fill klasa z .Pills Nav Nav. Ale .Nav-Fill klasa wypełniła tylko przestrzenie, ale ich nie usprawiedliwiła.
Tak pigułki z .Nav-Fill są stworzone.
Pigułki z .Nav-uprawiane
.Nav-uprawiane klasa nie tylko wypełnia idealne przestrzenie, ale także rozkłada ją jednakowo między wszystkimi elementami NAV.
Tak pigułki z .Nav-uprawiane są stworzone.
Wniosek
Menu Nav są tworzone za pomocą