Informationen zur Verwendung der Bootstrap-Navigationsleiste der JS-Komponente

In diesem Artikel wird hauptsächlich die Verwendung der Bootstrap-Navigationsleiste der JS-Komponente beschrieben.

Die Navigationsleiste wird als Navigationskopf in Ihrer Anwendung oder Website verwendet .

1. Die Standard-Navigationsleiste

Die Navigationsleiste kann auf Mobilgeräten eingeklappt (und geöffnet oder geschlossen) werden und ist innerhalb des verfügbaren Bereichs Beim Vergrößern wechselt es in den horizontalen Erweiterungsmodus
Passen Sie den Schwellenwert für den reduzierten Modus und den horizontalen Modus an
Abhängig von der Länge des Inhalts, den Sie auf dem platzieren In der Navigationsleiste müssen Sie möglicherweise den Schwellenwert anpassen, ab dem die Navigationsleiste in den minimierten und horizontalen Modus wechselt. 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:
Fügen Sie die Nav-Bar-Stilklasse zum äußersten Navigations-Tag des Containers hinzu, um anzuzeigen, dass sie zur Navigationsleiste gehört

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

Effekt:

Schritt 2: Kopfzeile hinzufügen

<nav class="navbar navbar-default" role="navigation"> 
  <p 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> 
  </p> 
 </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 bis zu einem gewissen Grad 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"> 
  <p 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> 
  </p> 
  <p 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"> 
   <p class="form-group"> 
   <input type="text" class="form-control" /> 
   </p> 
   <button type="button" class="btn btn-default">Submit</button> 
   
  </form> 
  <!----> 
  </p> 
 </nav>

Vorschau:

Verbesserung der 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 von .navbar-form kann zu einer guten vertikalen Ausrichtung und einem reduzierten Zustand in einem engeren Ansichtsfenster führen. 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"> 
   <p class="form-group"> 
   <input type="text" class="form-control" /> 
   </p> 
   <button type="button" class="btn btn-default">Submit</button> 
   
  </form>

Fügen Sie eine Beschriftung für das Eingabefeld hinzu
Falls nicht über ein Eingabefeld verfügen. Bildschirmleser werden Probleme beim Hinzufügen von Beschriftungs-Tags haben. Bei Formularen in der Navigationsleiste können Sie die Beschriftung über die .sr-only-Klasse ausblenden.

3. Schaltfläche
Code:

<button type="button" class="btn btn-default navbar-btn">登陆</button>

Vorschau:

4. Text
Um den richtigen Zeilenabstand und die richtige Farbe zu gewährleisten, wird normalerweise das Tag e388a4556c0f65e1904146cc1a846bee verwendet.
Code-Snippet:

<p class="navbar-text">文本</p>

5. Nicht-Navigationslinks
Vielleicht möchten Sie zusätzlich zu Standardnavigationskomponenten Standardlinks hinzufügen und dann .navbar verwenden - Die Link-Klasse ermöglicht es Links, die korrekte Standardfarbe und die invertierte Farbe zu haben.
Codeausschnitt:

<p class="navbar-text navbar-right">这个是<a href="#" class="navbar-link">链接</a></p>

6. Komponentenausrichtung
Verwenden Sie die Werkzeugklasse .navbar-left oder .navbar-right, um Navigationslinks, Formulare, Schaltflächen oder Text auszurichten. Beide Klassen verwenden CSS-Float-Stile in bestimmten Richtungen. Um beispielsweise Navigationslinks auszurichten, platzieren Sie sie in einem separaten ff6d136ddc5fdfeffaf53ff6ee95f185, 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.
Sie müssen den Abstand für das Body-Tag festlegen.
Diese feste Navigationsleiste deckt andere Inhalte auf der Seite ab, es sei denn, Sie legen den Abstand über dem 6c04bd5ca3fcae76e30b72ad730ca86d 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; }

muss nach der Kerndatei von Bootstrap CSS platziert werden. (Abdeckungsproblem)
8. Unten behoben
Ersetzen Sie durch .navbar-fixed-bottom.
Sie müssen den Abstand für das Body-Tag festlegen.
Diese feste Navigationsleiste deckt andere Inhalte auf der Seite ab, es sei denn, Sie legen den Abstand am unteren Rand von 6c04bd5ca3fcae76e30b72ad730ca86d 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; }

一定要在加载Bootstrap CSS的核心后使用它。
9、静止在顶部
通过添加.navbar-static-top即可创建一个与页面的导航条。它会随着页面向下滚动而消失。和.navbar-fixed-*类不同的是，你不用给body添加padding。
10、反色的导航条
通过添加.navbar-inverse类可以改变导航条的外观。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

关于jQuery插件Validate实现自定义校验结果样式的代码

手机端实现Bootstrap图片轮播的效果

bootstrap时间控件daterangepicker的使用方法

Das obige ist der detaillierte Inhalt vonInformationen zur Verwendung der Bootstrap-Navigationsleiste der JS-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!