English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
The navigation bar is a great feature and a prominent feature of Bootstrap websites. The navigation bar acts as a responsive header base component in your application or website. The navigation bar is folded in the view of mobile devices and expands horizontally as the available viewport width increases. At the core of Bootstrap navigation bars, the navigation bar includes the site name and basic navigation definition styles.
The steps to create a default navigation bar are as follows:
Add class to the <nav> tag .navbar, .navbar-default.
Add to the above element role="navigation"to improve accessibility.
Add a title class to the <div> element .navbar-header, which includes a class with navbar-brand the <a> element. This will make the text look bigger.
To add links to the navigation bar, simply add a class with .nav, .navbar-nav Unordered list is enough.
Der folgende Beispiel zeigt dies:
<!DOCTYPE html> <html> <head> <meta charset="utf-8">-8"> <title>Bootstrap-Beispiel - Default Navigation Bar</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Grundlagen-Tutorial-Website</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Separate link</a></li> <li class="divider"></li> <li><a href="#">Another separate link</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>Test and see ‹/›
The results are as follows:
Um der Navigationsleiste eine responsives Verhalten hinzuzufügen, muss das zu falende Inhalt in einer Klasse .collapse、.navbar-collapse Der <div> mit der Klasse .navbar-toggle und zwei data- Elementen des Buttons. Der erste ist data-toggleerlaubt, JavaScript zu sagen, was mit dem Button zu tun ist, der zweite ist data-targetdargestellt, um anzuzeigen, auf welchen Element umgeschaltet werden soll. Drei mit der Klasse .icon-bar Die <span>-Elemente der Klasse .nav-collapse Der Elemente im <div>. Um diese Funktionen zu erreichen, müssen Sie Bootstrap-Faltwerk(Collapse)-Plugin.
Der folgende Beispiel zeigt dies:
<!DOCTYPE html> <html> <head> <meta charset="utf-8">-8"> <title>Bootstrap-Beispiel - Responsives Navigationsleiste</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <span class="sr-only">Navigationsumschaltung</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Grund教程</a> </div> <div class="collapse navbar-collapse" id="example-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Separate link</a></li> <li class="divider"></li> <li><a href="#">Another separate link</a></li> </ul> </li> </ul> </div> </div></nav> </body> </html>Test and see ‹/›
The results are as follows:
Sie können die Klasse .navbar-btn Fügen Sie Knöpfe zu <button>-Elementen hinzu, die nicht im <form> enthalten sind, und die in der Navigationsleiste vertikal zentriert sind..navbar-btn kann auf <a> und <input>-Elementen verwendet werden.
Verwenden Sie nicht in .navbar-nav inneren <a>-Elemente verwendet .navbar-btnweil es nicht der Standard ist button class.
Der folgende Beispiel zeigt dies:
<!DOCTYPE html> <html> <head> <meta charset="utf-8">-8"> <title>Bootstrap-Beispiel - Knöpfe in der Navigationsleiste</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Grundlagen-Tutorial-Website</a> </div> <div> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Suche"> </div> <button type="submit" class="btn btn-default">Übertragungsknopf</button> </form> <button type="button" class="btn btn-default navbar-btn"> Navigationsleistenknopf </button> </div> </div> </nav> </body> </html>Test and see ‹/›
The results are as follows:
Falls Textzeichenketten in der Navigation enthalten sein sollen, verwenden Sie bitte die Klasse .navbar-textDies wird in der Regel zusammen mit dem <p>-Tag verwendet, um angemessene Vorabwerte und Farben zu gewährleisten. Der folgende Beispiel zeigt dies:
<!DOCTYPE html> <html> <head> <meta charset="utf-8">-8"> <title>Bootstrap-Beispiel - Text in der Navigationsleiste</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Grundlagen-Tutorial-Website</a> </div> <div> <p class="navbar-text">w3codebox Benutzerlogin</p> </div> </div> </nav> </body> </html>Test and see ‹/›
The results are as follows:
Wenn Sie Symbole in den regulären Navigationskomponenten verwenden möchten, dann verwenden Sie die Klasse glyphicon glyphicon-* um Symbole zu setzen, mehr siehe Bootstrap-Icon wie im folgenden Beispiel gezeigt:
<!DOCTYPE html> <html> <head> <meta charset="utf-8">-8"> <title>Bootstrap-Beispiel - Nicht-navigierende Links</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Grundlagen-Tutorial-Website</a> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Registrieren</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Anmelden</a></li> </ul> </div> </nav> </body> </html>Test and see ‹/›
The results are as follows:
Sie können die Utility-Klassen verwenden .navbar-left oder .navbar-right ausrichten von Navigationsleisten links oder rechts Navigationslinks, Formulare, Schaltflächen oder Text Diese Komponenten. Beide Klassen fügen CSS-Float in der angegebenen Richtung hinzu. Nachfolgender Beispiel zeigt dies.
<!DOCTYPE html> <html> <head> <meta charset="utf-8">-8"> <title>Bootstrap-Beispiel - Komponentenausrichtung</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Grundlagen-Tutorial-Website</a> </div> <div> !--ausgerichtet nach links--> <ul class="nav navbar-nav navbar-left"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Separate link</a></li> <li class="divider"></li> <li><a href="#">Another separate link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <button type="submit" class="btn btn-default"> ausgerichtet nach links-Senden-Schaltfläche </button> </form> <p class="navbar-text navbar-left">ausgerichtet nach links-Text</p> !--ausgerichtet nach rechts--> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Separate link</a></li> <li class="divider"></li> <li><a href="#">Another separate link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-right" role="search"> <button type="submit" class="btn btn-default"> ausgerichtet nach rechts-Senden-Schaltfläche </button> </form> <p class="navbar-text navbar-right">ausgerichtet nach rechts-Text</p> </div> </div> </nav> </body> </html>Test and see ‹/›
The results are as follows:
Bootstrap-Navigationsleisten können dynamisch positioniert werden. Standardmäßig ist es ein blockiges Element und wird basierend auf seiner Position im HTML platziert. Mit einigen Hilfsklassen können Sie es an der Ober- oder Unterseite der Seite platzieren oder es zu einer statischen Navigationsleiste machen, die mit der Seite zusammen rollt.
Wenn Sie möchten, dass die Navigationsleiste fest an den oberen Rand der Seite angebracht wird, fügen Sie hinzu .navbar class Fügen Sie die Klasse hinzu .navbar-fixed-topNachfolgender Beispiel zeigt dies.
Um zu verhindern, dass die Navigationsleiste mit anderen Inhalten der Hauptseite kollidiert, fügen Sie mindestens 50 Pixel innerer Abstand (Padding), der Wert des Abstands kann nach Bedarf eingestellt werden.
<!DOCTYPE html> <html> <head> <meta charset="utf-8">-8"> <title>Bootstrap-Beispiel - Fest an den oberen Rand/title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Grundlagen-Tutorial-Website</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Separate link</a></li> <li class="divider"></li> <li><a href="#">Another separate link</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>Test and see ‹/›
The results are as follows:
Wenn Sie möchten, dass die Navigationsleiste fest an den unteren Rand der Seite angebracht wird, fügen Sie hinzu .navbar class Fügen Sie die Klasse hinzu .navbar-fixed-bottomNachfolgender Beispiel zeigt dies.
<!DOCTYPE html> <html> <head> <meta charset="utf-8">-8"> <title>Bootstrap-Beispiel - Fest an den unteren Rand des Bereichs/title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default navbar-fixed-bottom" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Grundlagen-Tutorial-Website</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Separate link</a></li> <li class="divider"></li> <li><a href="#">Another separate link</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>Test and see ‹/›
The results are as follows:
Um eine Navigationsleiste zu erstellen, die mit der Seite zusammen rollt, fügen Sie hinzu .navbar-static-top class. Diese Klasse erfordert keine Innenabstand (Padding) im <body> hinzuzufügen.
<!DOCTYPE html> <html> <head> <meta charset="utf-8">-8"> <title>Bootstrap-Beispiel - statischer oberer Rand</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Grundlagen-Tutorial-Website</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Separate link</a></li> <li class="divider"></li> <li><a href="#">Another separate link</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>Test and see ‹/›
The results are as follows:
Um eine Navigationsleiste mit schwarzer Hintergrundfarbe und weißer Textfarbe zu erstellen, genügt es, einfach .navbar class hinzufügen .navbar-inverse class hinzu, wie im folgenden Beispiel gezeigt:
Um zu verhindern, dass die Navigationsleiste mit anderen Inhalten der Hauptseite kollidiert, fügen Sie mindestens 50 Pixel innerer Abstand (Padding), der Wert des Abstands kann nach Bedarf eingestellt werden.
<!DOCTYPE html> <html> <head> <meta charset="utf-8">-8"> <title>Bootstrap-Beispiel - invertierte Navigationsleiste</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-inverse" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">Grundlagen-Tutorial-Website</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">iOS</a></li> <li><a href="#">SVN</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">Separate link</a></li> <li class="divider"></li> <li><a href="#">Another separate link</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>Test and see ‹/›
The results are as follows: