Im Bootstrap -Framework ist die Navigation als Navigationskomponente unabhängig. Nach verschiedenen Versionen kann der entsprechende Quellcode gefunden werden:
Weniger: Navigs
Sass: _navs.scss
Tag-förmige Navigation, auch als Tab Navigation bezeichnet
Die Tag-förmige Navigation wird über den .nav-tabs-Stil implementiert. Bei der Erstellung von Tag-förmigen Navigation müssen Sie den Klassennamen .nav-tabs mit dem ursprünglichen Navigationsklassennamen .NAV an den Container anhängen.
<ul> <li><a href="#">Navigation Title 1</a></li> <li><a href="#">Navigation Title 2</a></li> <li><a href="#">Navigation Title 3</a></li> <li><a href="#">Navigation Title 4</a></li> <li><a href="#">Navigation Titel 5 </a> </li> </ul>
Prinzip:
Zeigen Sie Menüelemente in Blöcken an und ordnen Sie sie auf demselben Niveau an, definieren Sie dann den Auswirkungen des Stils und der Maus-Suspension von Nicht-Highlight-Menüs
.nav-tabs {Border-Bottom: 1px Solid #ddd;}. nav-tabs> li {float: links; Rand-Bottom: -1px;}. nav-tabs> li> a {margin-right: 2px; line-height: 1,42857143; Border: 1px SIDEL-LIFT; > A: Hover {Border-Color: #eee #eee #ddd;}Im Allgemeinen verfügt die Registerkarte über ein aktuell ausgewähltes Element. Sie müssen den Klassennamen nur zu seinem (li) Tag hinzufügen.
<ul> <li><a href="#">Navigation Title 1</a></li> <li><a href="#">Navigation Title 2</a></li> <li><a href="#">Navigation Title 3</a></li> <li><a href="#">Navigation Title 4</a></li> <li><a href="#">Navigation Titel 5 </a> </li> </ul>
.nav-tabs> li.active> a, .nav-tabs> li.active> a: hover, .nav-tabs> li.active> a: fokus {color: #555; Cursor: Standard; Hintergrundfarbe: #fff; Grenze: 1PX Solid #ddd; Grenzbodenfarbe: transparent;}Zusätzlich zu den aktuellen Optionen verfügen einige Registerkarten auch über einen behinderten Zustand. Um diesen Effekt zu erzielen, fügen Sie einfach den Klassennamen hinzu, der im Tag -Element deaktiviert ist.
.nav> li.Disabled> a {color: #999;}. NAV> li.Disabled> a: hover, .nav> li.Disabled> a: Focus {color: #999; Textdekoration: Keine; Cursor: nicht verurteilt; Hintergrundfarbe: transparent;}Wenn Sie den Effekt des Klickens auf den Menüelement erreichen möchten, um den Inhalt zu wechseln, müssen Sie mit dem JS-Plug-In zusammenarbeiten
Kapselnavigation (Pillen)
Derzeit ist er mit abgerundetem Eckeffekt hervorgehoben, seine Implementierungsmethode ähnelt der Tab-Navigation. Mit derselben Struktur müssen Sie nur den Klassennamen .nav-tabs durch den Klassennamen .nav-Pills ersetzen
.nav-pills> li {float: links;}. nav-pills> li> a {border-radius: 4px;}. nav-pills> li + li {margin-linft: 2px;}. nav-pills> li.active> a: hover, .nav-pills> li.active> a: fokus: {farb: # ##Fff; Hintergrundfarbe: #428bca;}Vertikale gestapelte Navigation
Neben der horizontalen Navigation gibt es auch vertikale Navigation. Um vertikale gestapelte Navigation zu erstellen, müssen Sie nur den Klassennamen auf der Grundlage von .nav-Pills hinzufügen.
Im Vergleich zur Kapselnavigation besteht die Hauptsache darin, die Navigationsgegenstände vom Schweben zu verhindern, sie vertikal zu arrangieren und dann einen bestimmten Abstand für benachbarte Navigationsgegenstände zu hinterlassen.
.nav-gestapelt> li {float: none;}. nave-gestapelt> li + li {margin-top: 2px; margin-left: 0;}<ul> <li><a href="#">Navigation title 0</a></li> <li><a href="#">Navigation title 1</a></li> <li><a href="#">Navigation title 2</a></li> <li><a href="#">Navigation title 3</a></li> <li><a href = "#"> Navigationstitel 4 </a> </li> <li> <a href = "#"> Navigationstitel 5 </a> </li> </ul>Die vertikale Stapelnavigation ist wie eine geteilte Linie zwischen der Dropdown-Menügruppe und der Gruppe, und es gibt auch eine geteilte Linie zwischen den Navigationselementen. Fügen Sie einfach <li class = "Divider"> </li> zwischen den Navigationselementen hinzu.
<ul> <li> <a href = "#"> Navigationstitel 0 </a> </li> <li> <a href = "#"> Navigationstitel 1 </a> </li> <li> <a href = "#"> Navigationstitel 2 </a> </li> </li> <a <a href = " href = "#"> Navigationstitel 4 </a> </li> <li> <a href = "#"> Navigationstitel 5 </a> </li> </ul>
.nav .nav-divider {Höhe: 1px; Rand: 9px 0; Überlauf: Hidden; Hintergrundfarbe: #e5e5e5;}Adaptive Navigation
Die adaptive Navigation bezieht sich auf die Navigation, die die gesamte Breite des Behälters einnimmt, und die Menüelemente können sich an die Breite der Tabellenzellen anpassen. Die adaptive Navigation entspricht der adaptiven Tastekomponente, die von .BTN-Gruppen zugänglich erwähnt wurde, aber bei der adaptiven Navigation muss der Klassenname .Nav-Gerechtigkeit mit .nav-tabs oder .nav-Pills verwendet werden.
Prinzip:
Stellen Sie die Breite auf 100% der Liste UL ein und setzen Sie dann die Anzeige: Tabellenzell für jedes Menüelement LI, so dass die Liste die Form einer Tabellenzelle simuliert.
.nav-gerechtifiziert {width: 100%;}. nav-ursprünglich> li {float: none;}. nav-ursprünglich> li> a {margin-bottom: 5px; text-align: center;}. nav-ursprünglich> .dropdown .dropdown-menu {top: auto; links: auto;}@media (min-width: 768px) {.nav-gerechtfertigt> li {display: table-cell; Breite: 1%; } .nav-gerechtfertigt> li> a {margin-bottom: 0; }}Es gibt eine Medienabfrage.
.nav-tabs und .nav-zuguteifiziert werden zusammen verwendet, was adaptive Tab Navigation bedeutet. Wenn die Browser -Fensterbreite weniger als 768px beträgt, erfolgt eine zusätzliche Verarbeitung im Stil.
.nav-tabs.nav-gerechtifizierte {width: 100%; Border-Bottom: 0;}. nav-tabs.nav-gerichtifizierte> li {float: None;}. nav-tabs.nav-zutreffend> li> a {margin-bottom: 5px; Text-Align: Mitte;}. nav-tabs.nav-gerichtifizierte> .dropdown .dropdown-menu {top: auto; links: auto;}@media (min-width: 768px) {.nav-tabs.nav-gerichtifiziert> li {display: table-cell; Breite: .Active> a: Hover, .nav-tabs.nav-Gereinigung> .aktiv> a: hover, .nav-tabs.nav-gerecht> .aktiv> a: fokus {border: 1px solid #ddd;}@media (min-width: 768px) {.nav-tabs.nav-av.nav-gerichtlich> a {{Border-border-borde-border-ddd; Border-Radius: 4px 4px 0 0; } .nav-tabs.nav-gerichtifiziert> .aktiv> a, .nav-tabs.nav-gerechtfertigte> .active> a: hover, .nav-tabs.nav-gerechtfertigte> .active> a: Focus {Border-Bottom-Color: #fff; }}Navigation Plus Pulldown-Menü (Sekundärnavigation)
Um eine sekundäre Navigation zu erstellen, müssen Sie nur Li als übergeordnete Container verwenden, den Klassennamen verwenden.
<ul> <li><a href="#">Navigation Menu1</a></li> <li><a href="#">Navigation Menu2</a></li> <li><a href="#">Navigation Menu3</a></li> <li><a href="#">Navigation Menu4</a></li> <li><a href="#">Navigation Menu4</a></li> <li> <adata-toggle="dropdown">Navigation Menu5 <span></span> </a> <ul> <li><a href="#">Drop down Menu1</a></li> <li><a href="#">Drop down Menu2</a></li> <li><a href="#">Drop down Menü3 </a> </li> <li> <a href = "#"> Dropdown -Menü4 </a> </li> </li> </li> <li> <a href = "#"> Navigationsmenü 6 </a> </li> </ul>
Breadcrumb Navigation
Breadcrumbs werden im Allgemeinen für die Navigation verwendet, und ihre Hauptfunktion besteht darin, dem Benutzer den aktuellen Ort der Seite mitzuteilen. Breadcrumbs sind auch eine unabhängige Modulkomponente im Bootstrap -Framework.
Weniger: Preadcrumbs.Less
Sass: _breadcrumbs.scss
<ol> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> Mein Buch </a> </li> <li> Illustrierte CSS </li> </ol>
.Breadcrumb {Padding: 8px 15px; Rand-Bottom: 20px; Listenstil: Keine; Hintergrundfarbe: #f5f5f5; Border-Radius: 4px;}. Breadcrumb> li {Anzeige: Inline-Block;}. "// 00A0";}. Breadcrumb> .Active {Farbe: #999;}Das obige verwendet li+li: Vor der Implementierung des Separators zwischen Li und Li. Diese Lösung wird in der unteren Version von IE nicht unterstützt.
Wenn Sie weiterhin ausführlich lernen möchten, können Sie hier klicken, um Ihnen zu lernen und Ihnen zwei aufregende Themen anzuhängen: Bootstrap -Lern -Tutorial Bootstrap Practical Tutorial
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.