Bootstrap-Einführungsbuch (5) Navigationsleiste, Paging-Navigation

Navigationsleiste

Navigationsleiste (Navigationsleiste) und das Bootstrap-Einführungsbuch – (4) Menü, Schaltfläche und Navigation im vorherigen Abschnitt vorgestellt. Navigation (nav) unterscheidet sich nur um ein Wort, mit dem zusätzlichen Wort „bar“. Tatsächlich unterscheiden sie sich im Bootstrap-Framework immer noch offensichtlich. In der Navigationsleiste (Navigationsleiste) gibt es eine Hintergrundfarbe und die Navigationsleiste kann ein reiner Link (ähnlich der Navigation), ein Formular oder eine Kombination aus Formular und Navigation sein. Sie werden auf mobilen Geräten zusammengeklappt (und können geöffnet und geschlossen werden) und sich mit zunehmender Breite des Ansichtsfensters allmählich horizontal ausdehnen.

Grundlegende Navigationsleiste

Eigentlich ist der Unterschied im Erscheinungsbild zwischen Navigationsleiste und Navigation nicht so groß, aber in der tatsächlichen Verwendung ist die Navigationsleiste viel komplizierter als die Navigation. Lassen Sie uns eine einfache Navigationsleiste implementieren.

<div class="navbar navbar-default" role="navigation"><!--role是为了方便屏幕阅读器理解此处内容-->
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">PHP</a></li>
 </ul>
</div>

Nach dem Login kopieren

Der erzielbare Effekt ist wie folgt:

Breitbild:

Schmaler Bildschirm:

Achten Sie beim Erstellen einer einfachen Navigationsleiste auf die folgenden Punkte:

1. Fügen Sie zunächst den Klassennamen .navbar-nav
basierend auf der Navigationsliste hinzu (

2. Fügen Sie einen Container (div) außerhalb der Liste hinzu. Es wird empfohlen,

zu verwenden

3. Die Hauptfunktion der Navbar-Klasse besteht darin, Effekte wie den linken und rechten Abstand und abgerundete Ecken festzulegen. Verwenden Sie .navbar-default, um die Farbe der Navigationsleiste zu steuern, z. B. .navbar-inverse.

Mit Titel, sekundäres Menü

Bei der Erstellung von Webseiten können Sie normalerweise einen Titel vor dem Menü sehen (die Textgröße ist etwas größer als bei anderen Texten). Tatsächlich hat das Bootstrap-Framework dies auch für alle berücksichtigt. navbar-header Und .navbar-brand zu erreichen, wie zum Beispiel:

<div class="navbar-header">
 <a href="##" class="navbar-brand">WEB开发</a>
</div>

Nach dem Login kopieren

Natürlich kann damit auch ein Logo erstellt werden, wie auf der offiziellen chinesischen Website beschrieben, auf das hier nicht näher eingegangen wird.

Es ist unnötig, mehr über das sekundäre Menü zu sagen. Wenn Sie es immer noch nicht verstehen, schauen wir uns den folgenden Absatz an und erreichbare Effekte: (Beachten Sie, dass hier die Navbar-inverse Navigationsleiste verwendet wird)

<div class="navbar navbar-inverse" role="navigation">
 <div class="navbar-header">
 <a href="##" class="navbar-brand">WEB开发</a>
 </div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li class="dropdown" >
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">JavaScript
 <span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="#">jQuery</a></li>
 <li><a href="#">Vue</a></li>
 <li><a href="#">NodeJS</a></li>
 </ul>
 </li>
 <li ><a href="#">PHP</a></li>
 </ul>
</div>

Nach dem Login kopieren

Der Effekt ist wie folgt:

Mit Formular

In der Navigationsleiste sehen wir häufig Suchformulare wie Zhihu, Sina Weibo usw. Natürlich darf im Bootstrap-Framework so etwas nicht fehlen. Auch die Art der Anwendung ist ganz einfach:

Ein .navbar-form wird im Bootstrap-Framework bereitgestellt. Platzieren Sie ein Formular mit dem Klassennamen .navbar-form im .navbar-Container und fügen Sie dann .navbar-left hinzu, um das Formular zur besseren Ausrichtung nach links zu verschieben.

In Bootstrap wird auch der Stil .navbar-right bereitgestellt, um Elemente rechts von der Navigationsleiste auszurichten.

Kopieren Sie diesen Code in den Code und sehen Sie den Effekt:

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

Nach dem Login kopieren

Schaltflächen, Texte und Links

Zusätzlich zu einigen der oben genannten Stile bietet das Bootstrap-Framework drei weitere Stile:

1. Die Schaltfläche navbar-btn in der Navigationsleiste sorgt dafür, dass die Schaltflächen nicht vertikal in der Navigationsleiste zentriert werden

2. Der Text in der Navigationsleiste verwendet im Allgemeinen das

-Element, um einen optimalen Zeilenabstand zu erreichen

3. Normale Links im Navigationsleisten-Link, Nicht-Navigationslinks, fügen Sie diese Klasse hinzu, um die korrekten Standardfarben und inversen Farbeinstellungen zu erhalten

Allerdings unterliegen diese drei Stile bei der Verwendung im Framework bestimmten Einschränkungen und müssen in Verbindung mit navbar-brand und navbar-nav verwendet werden. Es gibt auch eine gewisse Mengenbegrenzung, wenn Sie ein oder zwei verwenden, wird es im Allgemeinen kein Problem geben, aber es wird Probleme geben, wenn Sie mehr als zwei verwenden.

Navigationsleiste korrigiert

Manchmal möchten wir, dass die Navigationsleiste oben oder unten im Browser fixiert wird. Bootstrap stellt uns praktischerweise zwei Klassen zur Verfügung, um einen solchen Stil zu erreichen:

.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 den äußersten Container (Navigationsleiste) anhängen.

<nav class="navbar navbar-default navbar-static-top">
 ...
</nav>

Nach dem Login kopieren

这个固定的导航条会遮住页面上的其它内容，除非你给元素底部设置了 padding 。提示：导航条的默认高度是 50px。如： body { padding-bottom: 70px; } ，当然你也可以使用你自己的值。

响应式导航条

在上面的例子中，导航条就仅仅能大屏幕下有一个不错的效果，在屏幕变小的情况下，还直接把所有的导航项直接展现出来就不适合了。为了有一个更好的显示效果，响应式的导航条设计也就随之而来。我们先来看看效果，再一步一步分析它！

窄屏时，点击右边的按钮图标可展开，效果与上面的展开效果除了 active 状态不再溢出容器外，其他基本相同。实现代码如下：

<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
 <!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
 <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">WEB开发</a>
 </div>
 <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
 <div class="collapse navbar-collapse navbar-responsive-collapse">
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">PHP</a></li>
 </ul>
 </div>
</div>

Nach dem Login kopieren

分析：

和普通导航条一样，最外层使用

Verwandte Etiketten：

bootstrap导航条 bootstrap分页导航 bootstrap入门书籍

Quelle：php.cn

Vorheriger Artikel：Trennen Sie alle drei Ziffern des Betrags durch Kommas unter js_javascript skills Nächster Artikel：js-Implementierung einfacher dreistufiger Verknüpfungseffekte für Provinzen, Städte und Kreise. Beispiele_Javascript-Kenntnisse

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors