Bootstrap | Pasek nawigacyjny
Pasek nawigacyjny witryny składa się z kilku menu powiązanych z różnymi sekcjami stron internetowych. Mówiąc dokładniej, pasek nawigacyjny to nagłówek strony zwykle ustawiony na szczycie strony internetowej. Korzystając z frameworka Bootstrap, możemy z łatwością stworzyć pasek nawigacyjny. Bootstrap oferuje również kilka klas z predefiniowanymi stylami do dostosowania paska nawigacyjnego.
W tym artykule poprowadzi Cię na pasku nawigacji bootstrap, ilustrując poniższe tematy:
- Jak utworzyć prosty pasek nawigacji bootstrap?
- Jak dodać menu rozwijane do paska nawigacji?
- Jak dodać ikony do paska nawigacyjnego?
- Jak wyrównać menu nawigacyjne?
- Jak stworzyć ciemny pasek nawigacyjny?
- Jak naprawić pozycję paska nawigacyjnego?
- Jak upadać pasek nawigacyjny?
Jak utworzyć prosty pasek nawigacji bootstrap?
Aby utworzyć prosty pasek nawigacyjny za pomocą frameworka Bootstrap, wykonaj poniższe kroki:
- Najpierw dodaj „”Tag za pomocą„.Navbar" I ".navbar-default„Zajęcia.
- Dodać "„Tag z klasą”Pojemnik-płyn„Aby dodać zawartość do paska nawigacyjnego.
- Aby dołączyć logo, utwórz „” i przypisać mu klasę „Navbar-Header".
- W tym elemencie DIV dodaj „„Tag, aby logo można było kliknąć i ustaw klasę”Brand Navbar„Do tego.
- Następnie utwórz listę menu, wykorzystując
- tag za pomocą „Nav" I "Navbar-Nav„Zajęcia.
- W środku
- tag, dołącz
- tagi do określania elementów. Umieść nazwy stron za pomocą znacznika, aby je kliknąć:
Opis ważnych klas bootstrap wykorzystywanych w powyższym fragmencie kodu podano poniżej:
- "Navbar”Klasa ma predefiniowane style do utworzenia standardowego paska nawigacyjnego.
- "navbar-default”Służy do utworzenia domyślnego paska nawigacyjnego.
- "Navbar-Expand-lg”Klasa jest dostosowywana, aby zapewnić klasy schematy kolorów i stworzyć responsywne upadki.
- "Pojemnik-płyn”Zapewnia pojemnik na pełną szerokość.
- "Navbar-Header”, Klasa architektoniczna, przeznaczyła obszar w pikselach po lewej stronie Navbar, co pozwala logo wypełnić całą przestrzeń. Zapewnia również reakcję na klasę marki BARBAR o logo i unika nakładania się menu z logo.
- "Brand Navbar”Umieszcza obraz lub tekst logo na górze paska nawigacji.
Wyjście
Jak dodać rozwijane menu do paska nawigacji?
Możesz dodać menu rozwijane do paska nawigacyjnego, korzystając z „upuścić" klasa.
Wykonaj kroki, aby zobaczyć, jak dostosować rozwijane menu na pasku nawigacji:
- Dodać
- element do listy, w której chcesz dodać menu rozwijane i przypisać ją do klasy „upuścić".
- Aby menu można było kliknąć, przyznaje nazwę menu w tagu. Przypisz to klasę „Dyspdown-Toggle”I atrybuty„Data-toggle" I "Href„Aby dodać do niego link. Następnie, aby dołączyć symbol Careta, wspomnij o „wstawka korektorska" klasa.
- Aby wymienić elementy menu, określ
- tag za pomocą „Menu rozwijane" klasa.
- W tym
- element, wspomnij o elementach listy za pomocą
- elementy. Każdy z nich trzyma znacznik, aby ustawić do niego linki:
Menu rozwijane
class = "caret">W powyższym kodzie:
- "upuścić”Klasa wskazuje menu rozwijane.
- "Dyspdown-Toggle”Pomaga utworzyć interaktywne rozwijanie kliknięcia przełączników menu.
- "wstawka korektorska„Tworzy ikonę strzałki.
- "Data-toggle„Atrybut służy do wyświetlania sekcji ukryj po kliknięciu.
Wyjście
Jak dodać ikony do paska nawigacyjnego?
Istnieją różne ikony glifu w bootstrapie, które można użyć bezpłatnie. Mówiąc dokładniej, potrzebujemy elementu wbudowanego, takiego jak „,„Aby osadzić ikony na pasku nawigacji.
Aby to zrobić, ustaw atrybut klasy elementu jako „Glyphicon”, Dodaj miejsce, a następnie wspomnij o„Glyphicon-Nazwa„Jak nazwa klasy:
Wyjście
Jak wyrównać menu nawigacyjne?
Bootstrap oferuje kilka klas do ustalenia wyrównania menu nawigacyjnego. Na przykład „„.navbar-right„Klasa dostosowuje wyrównanie menu po prawej stronie.
Przykład
Sprawdź poniższy przykład, który pokazuje, jak dostosować dwa elementy listy, które mają być wyrównane w prawo:
Wyjście
Jak stworzyć ciemny pasek nawigacyjny?
„„Navbar odwrotny„Klasa jest wykorzystywana do konwersji koloru paska nawigacyjnego na ciemność w następujący sposób:
Wyjście
Jak naprawić pozycję paska nawigacyjnego?
Wiele narzędzi pozycji bootstrap można przydzielić do ustawienia pozycji paska nawigacyjnego. Na przykład „„.navbar-fixed-top”Naprawia pasek nawigacyjny na górze strony:
Wyjście
Jak upadać pasek nawigacyjny?
Jak wiemy, głównym celem ram bootstrap jest reakcja. Aby ustawić pasek nawigacyjny na małych rozmiarach, dodajmy przycisk, aby rozwinąć pasek nawigacyjny po kliknięciu.
Aby zaprojektować przycisk hamburgera, dodaj trzy ikony paska w elemencie. „„ikon-bar”Klasa wyświetla ikonę paska. Następnie ustaw atrybut „Data-toggle”Z„zawalić się" wartość. „„cel„Atrybut ma przypisany„#Mynavbar„Wskazując na identyfikator Div:
Tutaj:
- "navbar-toggle”Rozszerza elementy.
- "Data-toggle”Z wartością„zawalić się”Określa ukryty lub widoczny element przy kliknięciu.
- "cel”Atrybut wybiera selektor CSS, do którego stosuje się operację zapadnięcia. „„#Mynavbar”Jest identyfikatorem elementu DIV.
Następnie owinąć elementy menu nawigacyjnego w elemencie DIV o identyfikatorze „Mynavbar”:
W powyższym fragmencie kodu:
- "zawalić się”Wskazuje treść, która pokazuje lub ukrywa.
- "NOVBAR-COCLASSE”Oznacza elementy menu nawigacji w widoku telefonu komórkowego.
Poniższe dane wyjściowe oznacza, że pasek nawigacyjny jest zwinięty w przycisku:
Na małych ekranach, takich jak na Mobile, pasek nawigacyjny jest wyświetlany i widoczny po kliknięciu przycisku:
Otóż to! Nauczyłeś się o tworzeniu paska nawigacji bootstrap za pomocą różnych klas.
Wniosek
Aby utworzyć pasek nawigacji bootstrap, najpierw skorzystaj z HTML
- I
- tagi, aby stworzyć listę menu wraz z klasami bootstrap. Ponadto do stworzenia responsywnego paska nawigacyjnego dla naszej strony internetowej wykorzystywanych jest kilka klas bootstrap, takich jak „.Navbar”,„.navbar-expand-xl | lg | md | Sm”,„.Brand Nav", i wiele więcej. W tym artykule wyjaśniono, jak utworzyć pasek nawigacji bootstrap o różnych funkcjach.