Bootstrap | Navigationsleiste

Die Navigationsleiste einer Website besteht aus mehreren Menüs, die mit verschiedenen Website -Abschnitten verknüpft sind. Genauer. Mit dem Bootstrap -Framework können wir mit großer Leichtigkeit eine Navigationsleiste erstellen. Bootstrap bietet auch mehrere Klassen mit vordefinierten Stilen an, um die Navigationsleiste anzupassen.

In diesem Artikel wird Sie in der Bootstrap -Navigationsleiste führen, indem Sie die folgenden Themen veranschaulichen:

• So erstellen Sie eine einfache Bootstrap -Navigationsleiste?
• So fügen Sie der Navigationsleiste ein Dropdown-Menü hinzu?
• So fügen Sie der Navigationsleiste Symbole hinzu?
• Wie man Navigationsmenüs ausrichtet?
• So erstellen Sie eine dunkle Navigationsleiste?
• So reparieren Sie die Position der Navigationsleiste?
• Wie man eine Navigationsleiste zusammenbricht?

So erstellen Sie eine einfache Bootstrap -Navigationsleiste?

Befolgen Sie die folgenden Schritte, um eine einfache Navigationsleiste mit dem Bootstrap -Framework zu erstellen:

• Zunächst fügen Sie die "hinzu"
• Füge hinzu ein ""Tag mit der Klasse"Containerfluid”Um der Navigationsleiste Inhalte hinzuzufügen.
• Um ein Logo aufzunehmen, erstellen Sie ein "" und weisen Sie ihm eine Klasse zu ““Navigations-Header”.
• Fügen Sie innerhalb dieses Div -Elements eine hinzu “"Tag, um das Logo klickbar zu machen und eine Klasse festzulegen"Navigationsbrand”Dazu.
• Erstellen Sie danach eine Liste von Menüs, indem Sie die verwenden
  Tag mit dem “Navigation" Und "Navi-nav" Klassen.
  • In der
    Tag, schließen Sie die ein
    • Tags, um die Elemente anzugeben. Platzieren Sie die Seitennamen mit dem Tag, um sie anklicken zu lassen:
    
    
    
    
    • Startseite
    
    
    • Erste Seite
    
    
    • Zweite Seite
    
    
    • Dritte Seite
    
    
    • Vierte Seite
    
    
    
    
    

    Die Beschreibung der wichtigen Bootstrap -Klassen, die im obigen Code -Snippet verwendet werden, finden Sie unten:

    • “NavillatDie Klasse hat vordefinierte Stile, um eine Standardnavigationsleiste zu erstellen.
    • “Navi-DefaultWird verwendet, um eine Standardnavigationsleiste zu erstellen.
    • “navbar-expand-lgDie Klasse wird angepasst, um Farbschemata -Klassen bereitzustellen und ein reaktionsschnelles Zusammenbruch zu erstellen.
    • “Containerfluid”Bietet einen Breitenbehälter.
    • “Navigations-Header”, Eine Architekturklasse, die den Bereich links von der Marine in Pixeln zugewiesen hat, wodurch das Logo es ermöglicht, den gesamten Raum zu füllen. Es bietet auch die Reaktion auf die Navi-Markenklasse mit einem Logo und vermeidet das Überlappern des Menüs mit dem Logo.
    • “Navigationsbrand”Stellen Sie das Logo -Bild oder -Text oben in der Navigationsleiste.

    Ausgang

    So fügen Sie der Navigationsleiste ein Dropdown -Menü hinzu?

    Sie können der Navigationsleiste ein Dropdown-Menü mit der „Navigationsleiste hinzufügen“ hinzufügenDropdown-Liste" Klasse.

    Befolgen Sie die Schritte, um zu sehen, wie ein Dropdown-Menü in der Navigationsleiste angepasst wird:

    • Hinzufügen
    • Element zur Liste, in der Sie ein Dropdown-Menü hinzufügen möchten, und es eine Klasse zuweisen “Dropdown-Liste”.
    • Um das Menü klickbar zu machen, weisen Sie den Menünamen in das Tag zu. Weisen Sie ihm eine Klasse zu “Dropdown-Toggle”Und Attribute“Data-Toggle" Und "href”Um einen Link dazu hinzuzufügen. Dann ein Pflegesymbol anhängen, erwähnen Sie eine ““Pflege" Klasse.
    • Um die Menüelemente aufzulisten, geben Sie die an
      Tag mit dem “Dropdown-Menü" Klasse.
      • Mit diesem
        Element erwähnen Sie die Listenelemente mit der Verwendung der
        • Elemente. Jeder von ihnen hält das Tag, um Links darauf zu setzen:

        
        Dropdown-Menü
        class = "Caret">
        

        
        
        • Seite 3-1
        
        
        • Seite 3-2
        
        
        • Seite 3-3
        
        

        
        

        Im obigen Code:

        • “Dropdown-ListeDie Klasse gibt das Dropdown -Menü an.
        • “Dropdown-Toggle”Hilft bei der Erstellung einer interaktiv.
        • “Pflege”Erstellt das Pfeilsymbol.
        • “Data-ToggleDas Attribut wird verwendet, um einen Ausblendungsabschnitt auf Klick anzuzeigen.

        Ausgang

        So fügen Sie der Navigationsleiste Symbole hinzu?

        Es gibt verschiedene Glyph -Symbole in Bootstrap, die kostenlos verwendet werden können. Insbesondere brauchen wir ein Inline -Element, wie z. ",Ikonen in die Navigationsleiste einbetten.

        Setzen Sie dazu das Klassenattribut des Elements als “Glyphicon”, Fügen Sie einen Raum hinzu und erwähnen Sie dann das"Glyphicon-Name”Als Klassenname:

        
        
        • class = "Glyphicon Glyphicon-Suche"> Suchen
        
        
        • class = "Glyphicon Glyphicon-Log-In"> Anmeldung
        
        

        Ausgang

        Wie man Navigationsmenüs ausrichtet?

        Bootstrap bietet mehrere Klassen an, um die Ausrichtung der Navigationsmenüs festzulegen. Zum Beispiel die “.NavigationsrechteDie Klasse passt die Ausrichtung des Menüs nach rechts an.

        Beispiel

        Schauen Sie sich das folgende Beispiel an, in dem angezeigt wird, wie die beiden Listenelemente angepasst werden sollen, die richtig ausgerichtet werden sollen:

        
        
        • class = "Glyphicon Glyphicon-Suche"> Suchen
        
        
        • class = "Glyphicon Glyphicon-Log-In"> Anmeldung
        
        

        Ausgang

        So erstellen Sie eine dunkle Navigationsleiste?

        Der "Navigations-InverseDie Klasse wird verwendet, um die Farbe der Navigationsleiste wie folgt in Dunkelheit umzuwandeln:

        Ausgang

        So reparieren Sie die Position der Navigationsleiste?

        Viele Bootstrap -Positionsdienstprogramme können zugewiesen werden, um die Position der Navigationsleiste festzulegen. Zum Beispiel die “.Navi-Fixed-Top”Behebt die Navigationsleiste oben auf der Seite:

        Ausgang

        Wie man eine Navigationsleiste zusammenbricht?

        Wie wir wissen, ist das Hauptziel des Bootstrap -Frameworks die Reaktionsfähigkeit. Um die Navigationsleiste auf kleinen Bildschirmgrößen festzulegen.

        Um eine Hamburger -Taste zu entwerfen, fügen Sie drei Balkensymbole im Element hinzu. Der "Icon-BarDie Klasse zeigt das Balkensymbol an. Setzen Sie dann das Attribut “Data-Toggle" mit dem "Zusammenbruch" Wert. Der "DatenzielDas Attribut wird zugewiesen#mynavbarZeigen Sie auf die ID der Div:

        
        class = "iconbar">
        class = "iconbar">
        class = "iconbar">
        

        Hier:

        • “Navigations-Toggle”Erweitert die Elemente.
        • “Data-Toggle"Mit dem Wert"ZusammenbruchErmittelt das zusammenklappbare Element, das auf Klick versteckt oder sichtbar ist.
        • “Datenziel”Attribut wählt den CSS -Selektor aus, auf den der Zusammenbruchbetrieb angewendet wird. Der "#mynavbarIst die ID des DIV -Elements.

        Wickeln Sie dann die Menüelemente der Navigation in ein DIV -Element mit ID ein “Mynavbar”:

        Im obigen Code -Snippet:

        • “Zusammenbruch”Zeigt den Inhalt an, der zeigt oder versteckt.
        • “Navilla-Kollapse”Bedeutet die Menüelemente der Navigation in der mobilen Ansicht.

        Die untergegebene Ausgabe bedeutet, dass die Navigationsleiste in einer Taste zusammengebrochen ist:

        Auf kleinen Bildschirmen, z. B. auf Mobilgeräten, wird die Navigationsleiste angezeigt und sichtbar, wenn die Schaltfläche klickt:

        Das ist es! Sie haben gelernt, die Bootstrap -Navigationsleiste mit verschiedenen Klassen zu erstellen.

        Abschluss

        Um eine Bootstrap -Navigationsleiste zu erstellen, verwenden Sie zunächst die HTML

        Und
        • Tags, um zusammen mit den Bootstrap -Klassen eine Liste von Menüs zu erstellen. Darüber hinaus werden mehrere Bootstrap -Kurse verwendet, um eine reaktionsschnelle Navigationsleiste für unsere Website zu erstellen, wie z.Navillat",".navbar-expand-xl | lg | md | sm",".Nav-Brand", und viele mehr. In diesem Artikel wurde erläutert, wie eine Bootstrap -Navigationsleiste mit unterschiedlichen Funktionen erstellt werden kann.