Heim > Web-Frontend > HTML-Tutorial > Einführung in die Navigationsleiste (Navbar) und Navigation (Nav)

Einführung in die Navigationsleiste (Navbar) und Navigation (Nav)

零下一度
Freigeben: 2017-07-18 16:22:53
Original
18986 Leute haben es durchsucht

Bootstrap-Navigationsleiste

<p>Die Navigationsleiste ist eine gute Funktion und ein herausragendes Merkmal der Bootstrap-Website. Die Navigationsleiste dient als responsive Grundkomponente des Navigationsheaders in Ihrer App oder Website. Die Navigationsleiste wird in mobilen Ansichtsfenstern minimiert und horizontal erweitert, wenn die verfügbare Ansichtsfensterbreite zunimmt. Im Kern der Bootstrap-Navigationsleiste enthält die Navigationsleiste den Site-Namen und grundlegende Navigationsdefinitionsstile.

<p>Standardnavigationsleiste

<p>Die Schritte zum Erstellen einer Standardnavigationsleiste sind wie folgt:

<p>Klasse .navbar, .navbar-default zum <nav>-Tag hinzufügen.

<p>Das Hinzufügen von „role="navigation" zum obigen Element trägt zur Verbesserung der Zugänglichkeit bei.

<p>Fügen Sie eine Header-Klasse .navbar-header zum <div>-Element hinzu, das ein <a>-Element mit der Klasse navbar-brand enthält. Dadurch erscheint der Text größer.

<p>Um einen Link zur Navigationsleiste hinzuzufügen, fügen Sie einfach eine ungeordnete Liste mit der Klasse .nav, .navbar-nav hinzu.

Die vorherigen Wörter

<p> Es gibt nur einen Wortunterschied zwischen Navigationsleiste (navbar) und Navigation (nav), mit einem 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. In diesem Artikel wird die Bootstrap-Navigationsleiste im Detail vorgestellt

<p>

Grundlegende Navigationsleiste

<p> Im Bootstrap-Framework unterscheiden sich die Navigationsleiste und die Navigation nicht wesentlich im Aussehen, aber in Tatsächliche Verwendung Navigationsleisten sind viel komplexer als die Navigation.

<p> Die Navigationsleiste ist eine responsive Basiskomponente, die als Navigationskopf in einer Anwendung oder Website verwendet wird. Sie können auf Mobilgeräten gefaltet (und geöffnet oder geschlossen) werden und werden mit zunehmender Breite des Ansichtsfensters schrittweise horizontal erweitert

<p> Bei der Erstellung einer einfachen Navigationsleiste gibt es hauptsächlich die folgenden Schritte:

<p> 1. Fügen Sie zunächst den Klassennamen „navbar-nav“ basierend auf der Navigationsliste (
<p> 

反色导航条

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

<p>

<div class="navbar navbar-inverse" role="navigation">
<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> 
</ul>
</div>
Nach dem Login kopieren
<p>

<p> 

Das obige ist der detaillierte Inhalt vonEinführung in die Navigationsleiste (Navbar) und Navigation (Nav). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage