Navigationsleiste, die Bootstrap jeden Tag erlernen muss (2)_Javascript-Kenntnisse

1. Grundlegende Navigationsleiste

Beim Erstellen einer einfachen Navigationsleiste gibt es hauptsächlich die folgenden Schritte:

Schritt 1: Fügen Sie zunächst den Klassennamen „navbar-nav“ basierend auf der Navigationsliste (

) hinzu

Schritt 2: Fügen Sie einen Container (div) außerhalb der Liste hinzu und verwenden Sie die Klassennamen „navbar“ und „navbar-default“


<div class="navbar navbar-default">
 <!-- 导航条标题-->
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">LOGO</a>
 　</div>
 <!-- 基础导航条-->
 <ul class="nav navbar-nav">
 <li><a href="##">网站首页</a></li>
 <!-- 二级菜单-->
 <li class="dropdown">
 <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="##">CSS3</a></li>
 <li><a href="##">JavaScript</a></li>
 <li class="disabled"><a href="##">PHP</a></li>
 </ul>
 </li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
 <!-- 搜索表单-->
 <form action="##" class="navbar-form navbar-left">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="请输入关键词" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
 </form>
</div>

1. Bei der Webseitenproduktion steht vor dem Menü häufig ein Titel (die Textgröße ist etwas größer als bei anderen Texten), der über „navbar-header“ und „navbar-brand“ implementiert wird.

 <!-- 导航条标题-->
 　<div class="navbar-header">
 　 <a href="##" class="navbar-brand">LOGO</a>
 　</div>

2. Das sekundäre Menü wird durch

implementiert.

 <!-- 二级菜单-->
 <li class="dropdown">
 <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="##">CSS3</a></li>
 <li><a href="##">JavaScript</a></li>
 <li class="disabled"><a href="##">PHP</a></li>
 </ul>
 </li>

3. Im Bootstrap-Framework wird ein Formular mit dem Klassennamen „navbar-form“ bereitgestellt.

„navbar-left“ lässt das Formular nach links schweben und der Stil „navbar-right“ richtet die Elemente rechts in der Navigationsleiste aus.


 <!-- 搜索表单-->
 <form action="##" class="navbar-form navbar-left">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="请输入关键词" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
 </form>

2. Invertierte Navigationsleiste

Die inverse Navigationsleiste ist eigentlich der zweite Navigationsleistenstil, der vom Bootstrap-Framework bereitgestellt wird. Sie ersetzt lediglich den Klassennamen „navbar-deafult“ durch „navbar-inverse“.

<div class="navbar navbar-inverse" role="navigation">
 <div class="navbar-header">
 <a href="##" class="navbar-brand">LOGO</a>
 </div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="">首页</a></li>
 <li><a href="">教程</a></li>
 <li><a href="">关于我们</a></li>
 </ul>
</div>




3. Feste Navigationsleiste

Eine der vielen Situationen, in denen Designer möchten, dass die Navigationsleiste oben oder unten im Browser fixiert wird.

Das Bootstrap-Framework bietet zwei Möglichkeiten, die Navigationsleiste zu reparieren:

　☑ .navbar-fixed-top: Die Navigationsleiste ist oben im Browserfenster fixiert

　☑ .navbar-fixed-bottom: Die Navigationsleiste ist am unteren Rand des Browserfensters fixiert

Die Verwendungsmethode ist sehr einfach. Sie müssen lediglich den entsprechenden Klassennamen an die Navigationsleiste anhängen, den äußersten Container der Navigationsleiste.


<!--导航条固定在浏览器窗口顶部-->
<div class="navbar navbar-default navbar-fixed-top">
 　…
</div>
<!--导航条固定在浏览器窗口底部-->
<div class="navbar navbar-default navbar-fixed-bottom">
 　…
</div>

4. Responsive Navigationsleiste


<div class="navbar navbar-default">
 <div class="navbar-header">
 　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#demo">
 <span class="sr-only">Toggle Navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
 <a href="##" class="navbar-brand">LOGO</a>
 </div>
 <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
 <div class="collapse navbar-collapse navbar-responsive-collapse" id="demo">
 <ul class="nav navbar-nav">
 <li><a href="##">网站首页</a></li>
 <li><a href="##">系列教程</a></li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
 </div>
</div>

Im Breitbildmodus:



Im schmalen Bildschirmmodus:



Verwendung:

1. Stellen Sie sicher, dass der Inhalt, der in einem schmalen Bildschirm gefaltet werden muss, in ein Div eingeschlossen werden muss, und fügen Sie diesem Div zwei Klassennamen hinzu: „collapse“ und „navbar-collapse“. Fügen Sie diesem Div abschließend einen Klassennamen oder einen ID-Namen hinzu.

2. Stellen Sie sicher, dass der Symbolstil im schmalen Bildschirm angezeigt wird (feste Schreibmethode):

<button class="navbar-toggle" type="button" data-toggle="collapse">
 <span class="sr-only">Toggle Navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
</button>

3. Fügen Sie data-target=".class name/#id name" zur Schaltfläche hinzu

Freunde, die mehr über Bootstrap erfahren möchten, können auf "Bootstrap Learning Tutorial" klicken, um sich eingehend damit zu befassen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Sie können auch „Bootstrap-Navigationsleiste, die Sie jeden Tag lernen müssen“ kombinieren, um zu lernen.