Eine Reihe von Freigabemethoden zur Verwendung der Bootstrap-Navigation bar_javascript-Fähigkeiten

Dieser Artikel enthält die grundlegende Verwendung der Bootstrap-Navigationsleiste als Referenz. Der spezifische Inhalt ist wie folgt: 1. Erstellen der Navigationsleiste im Bootstrap-Framework hauptsächlich durch den .nav-Stil. Der Standardstil „.nav“ stellt keinen Standardnavigationsstil bereit und ein anderer Stil muss angehängt werden, um wirksam zu sein, z. B. „nav-tabs“, „nav-pills“ und dergleichen. Auf der rechten Seite finden Sie beispielsweise ein Beispiel für eine Tab-Navigationsleiste im Code-Editor. Die Implementierungsmethode besteht darin, die Klassenstile .nav und nav-tabs zum ul-Tag hinzuzufügen

2. Bootstrap-Basisnavigationsleiste

HomeCSS3SassjQueryResponsive

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

Schritt 1 : Erstellen Sie zunächst eine Navigationsliste (

) und fügen Sie den Klassennamen „navbar-nav“ hinzu

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

Die Hauptfunktion des „.navbar“-Stils besteht darin, Effekte wie links und rechts festzulegen Polsterung und abgerundete Ecken, aber es und farbbezogene Stile wurden in keiner Weise festgelegt

3. Titel hinzufügen zur Bootstrap-Navigationsleiste

网站首页系列教程名师介绍成功案例关于我们

Beim Erstellen von Webseiten steht häufig ein Titel vor dem Menü (die Textgröße ist etwas größer als bei anderen Texten). Tatsächlich hat das Bootstrap-Framework diesen Aspekt auch für alle berücksichtigt , durch „navbar-header“ und „navbar-brand“ zu erreichen.

4. Bootstrap-Navigationsleiste, sekundäres Menü

　　 导航条
 　网站首页系列教程名师介绍成功案例关于我们

Hinzufügen eines sekundären Menüs zur Navigationsleiste, ebenfalls sehr einfach

5. Bootstrap-Navigationsleiste mit Formular

　　 导航条
 　网站首页系列教程
  CSS3JavaScriptPHP名师介绍成功案例关于我们

Einige Navigationsleisten verfügen über eine Suche form. Im Bootstrap-Framework wird ein Formular mit dem Namen navbar-form bereitgestellt. „navbar-left“ ermöglicht es dem Formular, zur besseren Ausrichtung nach links zu schweben. Im Bootstrap-Framework wird auch der Stil „navbar-right“ bereitgestellt, um Elemente rechts von der Navigationsleiste auszurichten.

6. Schaltflächen, Texte und Links in der Bootstrap-Navigationsleiste

　　 Bootstrap
 　网站首页系列教程
  CSS3JavaScriptPHP名师介绍成功案例关于我们搜索

Zusätzlich zur Verwendung des a-Elements und der Navigationsleiste in der Navigationsleiste Die Navigationsleiste des Bootstrap-Frameworks Zusätzlich zu nav's ul und navbar-form können auch andere Elemente verwendet werden:

1). >2).Navigationsleiste Der Text in Navbar-Text

3).Diese drei Stile unterliegen bei der Verwendung im Framework bestimmten Einschränkungen und müssen mit „navbar-brand“ und „navbar-nav“ kombiniert werden, und die Anzahl ist begrenzt. Im Allgemeinen gibt es kein Problem, wenn Sie ein oder zwei verwenden, aber es wird Probleme geben, wenn Sie mehr verwenden 🎜>

Feste Bootstrap-Navigationsleiste

In einem von vielen Fällen möchten Designer die Navigationsleiste oben oder unten im Browser fixieren Die feste Navigationsleiste wird häufiger in der mobilen Entwicklung verwendet. 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 am unteren Rand des Browserfensters fixiert

　　 Bootstrap
 　Navbar TextNavbar TextNavbar Text　　 Bootstrap
 　Navbar Text
  Navbar Text
  Navbar Text

8. Bootstrap-Paging Navigation
Seitennavigation mit Seitenzahlen, wahrscheinlich die häufigste Art der Seitennavigation, insbesondere wenn die Listenseite viel Inhalt hat. Normalerweise verwenden viele Schüler gerne p>a und p>span-Strukturen zum Erstellen einer Paging-Navigation mit Seitenzahlen. Im Bootstrap-Framework wird jedoch eine Struktur wie ul>li>a verwendet und dem ul-Tag hinzugefügt Sie können die Paging-Schaltflächengröße auch in verschiedenen Situationen einstellen 1). 🎜>

Zusätzlich zur Seitennavigation mit Seitenzahlen bietet das Bootstrap-Framework diese Art der Seitennavigation häufig auf einigen einfachen Websites an, z B. persönliche Blogs, Zeitschriften-Websites usw. Bei dieser Art der Seitennavigation wird die konkrete Seitennummer nicht angezeigt, sondern es werden nur die Schaltflächen „Vorherige Seite“ und „Nächste Seite“ angezeigt.

　…我是内容　…

Im tatsächlichen Gebrauch ähnelt die Seitennavigation der Seitennavigation mit Seitenzahlen. Die Pager-Klasse wird dem ul-Tag hinzugefügt.

Standardmäßig wird die Seitennavigation in der Mitte angezeigt, aber manchmal brauchen wir eine auf der linken und eine auf der linken Seite rechts. Das Bootstrap-Framework bietet zwei Stile:

Vorherige: Lassen Sie die Schaltfläche „Zurück“ auf der linken Seite.

Nächste: Lassen Sie die Schaltfläche „Weiter“ auf der rechten Seite.

«12345»

Das Obige ist eine Reihe von Informationen zur Verwendung von Bootstrap-Navigationsbar_Javascript-Fähigkeiten. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

………