Welches Paket wird für die Navigationsleiste in Bootstrap verwendet?

In Bootstrap wird die Navigationsleiste mit dem Element „nav“ umschlossen. Durch die Verwendung dieses Elements zum Umschließen der Navigationsleiste kann die Syntax „“.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Bootstrap-Version 3.3.7, DELL G3-Computer

Was soll die Navigationsleiste in Bootstrap einschließen? Kopf der Anwendung oder Website, als reaktionsfähige Grundkomponente der Navigation, kann es den Anzeigestatus der Navigationsleiste automatisch an die Breite des Browserfensters anpassen, es auf mobilen Geräten falten (und öffnen oder schließen) und wird allmählich zum horizontalen Erweiterungsmodus.

Navigationsleiste im Standardstil

Die Navigationsleiste von Bootstrap besteht aus zwei Teilen: Ein Teil dient zum Platzieren von Symbolschaltflächen, definiert durch den Container von .navbar-header; der andere Teil wird zum Platzieren von Navigationskomponenten verwendet, definiert durch .nav-collapse .collapse Containerdefinition. Der

.navbar-header-Container enthält normalerweise den Site-Namen und die Symbolschaltfläche. Der Site-Name ist immer sichtbar, die Symbolschaltfläche ist jedoch nur auf kleinen Bildschirmen sichtbar. Der Site-Name ist ein .navbar-Markenlink. Der Icon-Button ist ein Button der Klasse .navbar-toggle, der drei Elemente mit class="icon-bar" enthält. Wenn Sie eine Schaltfläche definieren, versehen Sie sie auch mit den Attributen data-toggle und data-target. Das data-toggle-Attribut teilt JavaScript mit, was die Schaltfläche bewirkt, und das data-target-Attribut gibt das Menüelement an, das angezeigt werden soll, wenn auf die Schaltfläche geklickt wird.

.nav-collapse.collapse Der Container enthält normalerweise nur Navigationskomponenten wie Navigationslinks, Formulare, Schaltflächen, Dropdown-Menüs, Text, Nicht-Navigationslinks usw. Navigationskomponenten werden auf großen Bildschirmen nur horizontal erweitert und müssen dies tun auf kleinen Bildschirmen angeklickt werden. Bei einer einfachen Navigationsleiste enthält diese in der Regel nur Navigationslinks. Navigationslinks werden mithilfe von Listenelementen von .nav.navbar definiert.

Um die Navigationsleiste responsiv zu gestalten, wird sie normalerweise mit einem .navbar

-Element umschlossen.

Tag definiert den Teil des Navigationslinks.

Natürlich können Sie auch das

-Element verwenden, aber stellen Sie sicher, dass Sie das Attribut „role="navigation"“ festlegen, um sicherzustellen, dass Benutzer, die Hilfsmittel verwenden, eindeutig wissen, dass es sich um einen Navigationsbereich handelt. Alternativ können Sie für eine ordnungsgemäße Ausrichtung und Polsterung die gesamte Navigationsleiste in einen .container- oder .container-Fluid-Container legen.

Verwandte Empfehlungen:

Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonWelches Paket wird für die Navigationsleiste in Bootstrap verwendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript bootstrap class 内边距 viewport

Stellungnahme：

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