Ausführliche Erklärung zur Verwendung der JS-Komponente Bootstrap Navigation bar_javascript Fähigkeiten

Navigationsleiste ist eine responsive Metakomponente, die als Navigationskopfzeile in Ihrer App oder Website dient.

1. Standard-Navigationsleiste

Die Navigationsleiste ist auf Mobilgeräten einklappbar (und kann geöffnet und geschlossen werden) und wird horizontal erweitert, wenn die verfügbare Breite des Ansichtsfensters zunimmt
Passen Sie die Schwellenwerte für den Faltmodus und den horizontalen Modus an
Abhängig von der Länge des Inhalts, den Sie auf der Navigationsleiste platzieren, müssen Sie möglicherweise den Schwellenwert anpassen, ab dem die Navigationsleiste in den minimierten Modus wechselt, im Vergleich zum horizontalen Modus. Sie können Ihre Anforderungen erfüllen, indem Sie den Wert der Variablen @grid-float-breakpoint ändern oder Ihren eigenen CSS-Code für Medienabfragen hinzufügen.
Schritt eins:
Das Navigations-Tag des äußersten Containers und die Stilklasse „nav-bar“ hinzufügen, um anzugeben, dass es zur Navigationsleiste gehört

<nav class="navbar navbar-default" role="navigation"> 
</nav>

Wirkung:

Schritt 2: Kopfzeile hinzufügen

<nav class="navbar navbar-default" role="navigation"> 
   <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
   <a href="#" class="navbar-brand">品牌</a> 
   </div> 
  </nav>

In der Schaltflächenbeschriftung sind drei Span-Symbole verschachtelt. Geben Sie dann die Stilklasse „navbar-toggle“ und das Attribut „collapse“ ein, und das Ziel ist „data-target“, wenn darauf geklickt wird.
Wenn das Fenster auf ein bestimmtes Maß verkleinert wird, tritt der Effekt auf der rechten Seite ein.

Schritt 3: Verschachteltes Dropdown-Menü, Formularformular, Dropdown-Menü.
Code:

<h1 class="page-header">导航条</h1> 
  <nav class="navbar navbar-default" role="navigation"> 
   <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
   <a href="#" class="navbar-brand">品牌</a> 
   </div> 
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
    <!--嵌套下拉菜单--> 
    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
      下拉<b class="caret"></b> 
      </a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Action</a></li> 
      </ul> 
     </li> 
    </ul> 
     
    <!--嵌套表单--> 
    <form action="" class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
     <input type="text" class="form-control" /> 
     </div> 
     <button type="button" class="btn btn-default">Submit</button> 
     
    </form> 
    <!----> 
   </div> 
  </nav> 

Vorschau:

Verbessern Sie die Zugänglichkeit der Navigationsleiste
Um die Barrierefreiheit zu verbessern, fügen Sie jeder Navigationsleiste unbedingt „role="navigation"“ hinzu.

2. Formular
Das Platzieren des Formulars innerhalb eines .navbar-Formulars kann eine gute vertikale Ausrichtung und einen reduzierten Zustand in einem schmaleren Ansichtsfenster ermöglichen. Verwenden Sie die Ausrichtungsoptionen, um zu bestimmen, wo es in der Navigationsleiste angezeigt wird.

Viel Code wird durch die Verwendung von Mixins, .navbar-form und .form-inline geteilt.

Code

<form action="" class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
     <input type="text" class="form-control" /> 
     </div> 
     <button type="button" class="btn btn-default">Submit</button> 
     
    </form> 

Fügen Sie eine Beschriftung zum Eingabefeld hinzu
Wenn Sie dem Eingabefeld keine Beschriftung hinzufügen, treten bei Bildschirmleseprogrammen Probleme auf. Bei Formularen innerhalb der Navigationsleiste können Sie die Beschriftung über die .sr-only-Klasse ausblenden.

3. Schaltfläche
Code:
Anmelden
Vorschau:

4. Text
Um den richtigen Zeilenabstand und die richtige Farbe zu gewährleisten, wird beim Umbrechen von Text in .navbar-text normalerweise das Tag

verwendet.
Codeausschnitt:

text

, auf das eine Dienstprogrammklasse angewendet wird.

Diese Klassen sind Mischversionen von .pull-left und .pull-right, aber sie sind auf Medienabfragen beschränkt, was die Handhabung der Navigationsleistenkomponente auf verschiedenen Bildschirmgrößen erleichtert.

7. Oben fixiert
Fügen Sie .navbar-fixed-top hinzu, um die Navigationsleiste oben zu fixieren. Der Effekt ist weg.
Der Abstand für das Body-Tag
muss festgelegt werden Diese feste Navigationsleiste deckt andere Inhalte auf der Seite ab, es sei denn, Sie legen einen Abstand über dem fest. Verwenden Sie Ihre eigenen Werte oder verwenden Sie den unten angegebenen Code. Tipp: Die Standardhöhe der Navigationsleiste beträgt 50 Pixel.

body { padding-top: 70px;🎜> Es muss nach der Kerndatei von Bootstrap CSS platziert werden. (Abdeckungsproblem)

8. Unten fixiert Verwenden Sie stattdessen .navbar-fixed-bottom.
Es muss die Innenseite (Polsterung) für das Body-Tag
festgelegt werden Diese feste Navigationsleiste deckt andere Inhalte auf der Seite ab, es sei denn, Sie legen unten im einen Abstand fest. Verwenden Sie Ihre eigenen Werte oder verwenden Sie den unten angegebenen Code. Tipp: Die Standardhöhe der Navigationsleiste beträgt 50 Pixel.


body { padding-bottom: 70px;🎜> Stellen Sie sicher, dass Sie es verwenden, nachdem Sie den Kern von Bootstrap CSS geladen haben.


9. Immer noch an der Spitze
Erstellen Sie eine Navigationsleiste mit der Seite, indem Sie .navbar-static-top hinzufügen. Es verschwindet, wenn Sie auf der Seite nach unten scrollen. Im Gegensatz zu den .navbar-fixed-*-Klassen müssen Sie dem Textkörper keine Polsterung hinzufügen.
10. Invertierte Navigationsleiste
Das Erscheinungsbild der Navigationsleiste kann durch Hinzufügen der Klasse .navbar-inverse geändert werden.
Das Obige ist eine detaillierte Einführung in die Verwendung der Bootstrap-Navigationsleiste. Ich hoffe, dass es für das Lernen aller hilfreich sein wird.