Dieser Artikel hilft Ihnen, die Navigationsleiste und die Seitennavigation in Bootstrap zu erlernen

Dieser Artikel führt Sie durch die Navigationsleiste und die Seitennavigation in Bootstrap und stellt auch Etiketten und Abzeichen vor. Ich hoffe, dass er für alle hilfreich ist!

1. Grundlagen der Navigationsleiste

Die Navigationsleiste (Navbar) und die im vorherigen Abschnitt eingeführte Navigation (Nav) unterscheiden sich durch ein Wort, wobei das Wort „Bar“ hinzugefügt wurde. 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. [Verwandte Empfehlungen: „Bootstrap-Tutorial“]

2. Grundlegende Navigationsleiste

In der Bootstrap-Box unterscheiden sich die Navigationsleiste und die Navigation nicht wesentlich, aber in der tatsächlichen Verwendung ist die Navigationsleiste komplizierter als die Navigation Viel mehr.

Anwendung:

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 (<ul class="nav">) Schritt 2: Fügen Sie einen Container (div) außerhalb der Liste hinzu und verwenden Sie die Klassennamen „navbar“ und „navbar-default“. „zu kontrollieren.

3. Fügen Sie der Navigationsleiste einen Titel, ein sekundäres Menü und einen Status hinzu.

Bei der Webseitenerstellung befindet sich häufig ein Titel vor dem Menü (die Textgröße ist tatsächlich etwas größer als bei anderen Texten). Im Bootstrap-Framework haben wir diesen Aspekt ebenfalls berücksichtigt und durch „navbar-header“ und „navbar-brand“ implementiert. Diese Funktion dient natürlich hauptsächlich als Erinnerungsfunktion Logo (wird hier nicht näher erläutert). Der Hauptstil besteht darin, die Schriftart zu erhöhen und die maximale Breite festzulegen. Unter der Standardnavigationsleiste (navbar-default) wird auch die Farbe der Navigationsleiste angezeigt , deaktivierter Zustand, suspendierter Zustand und andere Effekte und kann auch eine Navigationsleiste mit einem sekundären Menü haben.

4. Navigationsleiste mit Formular

stellt ein „Navbar-Formular“ im Bootstrap-Framework bereit. Die Verwendungsmethode ist sehr einfach Framework bietet außerdem den Stil „navbar-right“, um Elemente in der Navigationsleiste rechts auszurichten. Hier gibt es eine Bedingung, die nur wirksam wird, wenn die Breite des Browserfensters größer als 768 Pixel ist. 5. Schaltflächen, Texte und Links in der Navigationsleiste des Bootstrap-Frameworks. Das Framework bietet drei weitere Stile:

1) Button navbar-btn in navbar 2) Text navbar-text in navbar

3) normaler Link navbar-link in navbar

Diese drei Stile unterliegen jedoch bestimmten Einschränkungen wenn es im Framework verwendet wird und in Verbindung mit navbar-brand und navbar-nav verwendet werden muss. 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.

6. Feste Navigationsleiste

Eine der vielen Situationen ist, dass Designer die Navigationsleiste oben oder unten im Browser fixieren möchten. Die Anwendung dieser festen Navigationsleiste ist in der mobilen Entwicklung üblicher. 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 fixiert am unteren Rand des Browserfensters

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" role="navigation">
　…
</div>
<div class="content">我是内容</div>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>

7. Responsive Navigationsleiste

Heutzutage ist das Terminal zum Durchsuchen von Webseiten nicht mehr dasselbe. Die im vorherigen Beispiel implementierte Navigationsleiste kann nur an Großbildbrowser angepasst werden, wenn sich der Browserbildschirm ändert Als ich klein war, war es nicht geeignet. Es folgt also responsives Design. Bei einer responsiven Webseite ist die responsive Navigationsleiste daher sehr wichtig.

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 auf einem 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 und prüfen Sie, ob es sich um ein handelt Klassenname oder ein ID-Name Wollstoff? Wird durch das Div bestimmt, das gefaltet werden muss.

Das Div-Codesegment, das gefaltet werden muss:

<div class="collapse navbar-collapse" id="example">
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏时显示的图标代码段：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
  ...
</button>也可以这么写，需要折叠的div代码段：<div class="collapse navbar-collapse example" >
      <ul class="nav navbar-nav">
      …
      </ul>
</div>

窄屏时要显示的图标：

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example">
  ...
</button>

8、反色导航条

反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条，与默认的导航条相比，使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改。

9、分页导航（带页码的分页导航）

分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户体验。在Bootstrap框架中提供了两种分页导航：

☑ 带页码的分页导航

☑ 带翻页的分页导航

带页码的分页导航

带页码的分页导航，可能是最常见的一种分页导航，特别是在列表页内容超多的时候，会给用户提供分页的导航方式。

使用方法：

平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法：

<ul class="pagination">
   <li><a href="#">&laquo;</a></li>
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">3</a></li>
   <li><a href="#">4</a></li>
   <li><a href="#">5</a></li>
   <li><a href="#">&raquo;</a></li>
</ul>

10、分页导航（翻页分页导航）

Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。

使用方法：

在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类：

<ul class="pager">
   <li><a href="#">&laquo;上一页</a></li>
   <li><a href="#">下一页&raquo;</a></li>
</ul>

11、标签

在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。那么在Bootstrap框架中特意将这样的效果提取出来成为一个标签组件，并且以“.label”样式来实现高亮显示。如果使用的是a标签元素来制作的话，为了让其更美观，在hover状态去掉下划线之类。只要在span标签上添加vertical-align: super; 就可以实现标签定位在右上角了。

使用原理：

使用方法很简单，你可以在使用span这样的行内标签：

<h3>Example heading <span class="label label-default">New</span></h3>

12、徽章

从某种意义上来说，徽章效果和前面介绍的标签效果是极其的相似。也是用来做一些提示信息使用。常出现的是一些系统发出的信息，比如你登录你的twitter后，如果你信息没有看，系统会告诉你有多少信息未读，在Bootstrap框架中，把这种效果称作为徽章效果，使用“badge”样式来实现。不过和标签组件不一样的是：在徽章组件中没有提供多种颜色风格的效果，不过你也可以通过badges.less或者_badges.scss快速自定义。

使用方法：

使用方法，其实也没什么太多可说的，你可以像标签一样，使用span标签来制作，然后为他加入badge类：

<a href="#">Inbox <span class="badge">42</span></a>

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

Das obige ist der detaillierte Inhalt vonDieser Artikel hilft Ihnen, die Navigationsleiste und die Seitennavigation in Bootstrap zu erlernen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!