English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La barra di navigazione è una funzione eccellente e una caratteristica saliente del sito web Bootstrap. La barra di navigazione agisce come componente di base responsive per la testata di navigazione nel tuo applicativo o sito web. Nella visualizzazione mobile, la barra di navigazione è piegata e si espande orizzontalmente man mano che la larghezza della visuale disponibile aumenta. Nel cuore della barra di navigazione Bootstrap, questa include il nome del sito e lo stile di definizione di navigazione di base.
I passaggi per creare una barra di navigazione predefinita sono i seguenti:
Aggiungi la classe a etichetta <nav> .navbar, .navbar-default。
Aggiungi a questi elementi role="navigation"che aiuta a migliorare l'accessibilità.
Aggiungi una classe di titolo all'elemento <div> .navbar-headerche contiene un elemento con la classe navbar-brand l'elemento <a>. Questo renderà il testo più grande di una dimensione.
Per aggiungere collegamenti alla barra di navigazione, è sufficiente aggiungere un elemento con la classe .nav, .navbar-nav elenco non ordinato.</elenco non ordinato>.
Esempio seguente dimostra questo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Esempio Bootstrap - Barra di navigazione predefinita</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="#">基础教程网</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="#">Link separato</a></li> <li class="divider"></li> <li><a href="#">Un altro link separato</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>测试看看 ‹/›
结果如下所示：
Per aggiungere la funzionalità responsive alla barra di navigazione, il contenuto che desideri piegare deve essere avvolto in un elemento con la classe .collapse、.navbar-collapse contenuta nel <div> della class .navbar-toggle e due pulsanti con due elementi data-. data-toggleper informare JavaScript cosa fare con il pulsante, il secondo è data-targetindicando quale elemento deve essere切换ato. Tre pulsanti con class .icon-bar Creare il cosiddetto pulsante hamburger utilizzando il <span>. .nav-collapse gli elementi all'interno di <div>. Per implementare queste funzionalità, è necessario includere Plugin di piegatura (Collapse) di Bootstrap。
Esempio seguente dimostra questo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Esempio Bootstrap - Barra di navigazione responsive</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">Switch navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Guida di base</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="#">Link separato</a></li> <li class="divider"></li> <li><a href="#">Un altro link separato</a></li> </ul> </li> </ul> </div> </div></nav> </body> </html>测试看看 ‹/›
结果如下所示：
Puoi usare la class .navbar-btn Aggiungi pulsanti al <button> non contenuto in <form>, i pulsanti sono centrati verticalmente nella barra di navigazione..navbar-btn può essere utilizzato sugli elementi <a> e <input>.
Non utilizzare .navbar-nav sull'elemento <a> all'interno di .navbar-btnpoiché non è uno standard button class。
Esempio seguente dimostra questo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Esempio Bootstrap - Pulsante nella barra di navigazione</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="#">基础教程网</a> </div> <div> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Ricerca"> </div> <button type="submit" class="btn btn-default">Pulsante di invio</button> </form> <button type="button" class="btn btn-default navbar-btn"> Pulsante della barra di navigazione </button> </div> </div> </nav> </body> </html>测试看看 ‹/›
结果如下所示：
Se devi includere una stringa di testo nella navigazione, utilizza la class .navbar-text. Questo di solito viene utilizzato insieme al tag <p>, per garantire un'adeguata spaziatura e colore. Ecco un esempio che dimostra questo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Esempio Bootstrap - Testo nella barra di navigazione</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="#">基础教程网</a> </div> <div> <p class="navbar-text">w3codebox Login utente</p> </div> </div> </nav> </body> </html>测试看看 ‹/›
结果如下所示：
Se desideri utilizzare icone all'interno dei componenti di navigazione della barra di navigazione standard, utilizza la class glyphicon glyphicon-* per impostare le icone, per ulteriori informazioni vedere Icone Bootstrap Come nell'esempio seguente:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Esempio Bootstrap - Link non di navigazione</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="#">基础教程网</a> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span> Registrazione</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> </ul> </div> </nav> </body> </html>测试看看 ‹/›
结果如下所示：
Puoi utilizzare le classi utility .navbar-left o .navbar-right Allineamento a sinistra o destra nella barra di navigazione Link di navigazione, modulo, pulsante o testo Questi componenti. Entrambe le classi aggiungono CSS di flottazione nella direzione specificata. Ecco un esempio che dimostra questo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Esempio Bootstrap - Modalità di allineamento dei componenti</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="#">基础教程网</a> </div> <div> <--Allineamento a sinistra--> <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="#">Link separato</a></li> <li class="divider"></li> <li><a href="#">Un altro link separato</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <button type="submit" class="btn btn-default"> Allineamento a sinistra - pulsante di invio </button> </form> <p class="navbar-text navbar-left">Allineamento a sinistra - testo</p> <--Allineamento a destra--> <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="#">Link separato</a></li> <li class="divider"></li> <li><a href="#">Un altro link separato</a></li> </ul> </li> </ul> <form class="navbar-form navbar-right" role="search"> <button type="submit" class="btn btn-default"> Allineamento a destra - pulsante di invio </button> </form> <p class="navbar-text navbar-right">Allineamento a destra - testo</p> </div> </div> </nav> </body> </html>测试看看 ‹/›
结果如下所示：
La barra di navigazione Bootstrap può essere posizionata dinamicamente. Di default, è un elemento bloccante, posizionato in base alla sua posizione HTML. Con alcune classi di aiuto, puoi posizionarla in alto o in basso nella pagina, o farla scorrere insieme alla pagina come una barra di navigazione statica.
Se desideri fissare la barra di navigazione nella parte superiore della pagina, aggiungi a .navbar class aggiungi class .navbar-fixed-top. Il seguente esempio dimostra questo:
Per prevenire che la barra di navigazione si incroci con il contenuto principale della pagina, aggiungere almeno 50 pixel di margine interno (padding) al tag <body>, il valore può essere impostato a seconda delle tue esigenze.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Esempio Bootstrap - Fisso in alto</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="#">基础教程网</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="#">Link separato</a></li> <li class="divider"></li> <li><a href="#">Un altro link separato</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>测试看看 ‹/›
结果如下所示：
Se desideri fissare la barra di navigazione nella parte inferiore della pagina, aggiungi a .navbar class aggiungi class .navbar-fixed-bottom. Il seguente esempio dimostra questo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Esempio Bootstrap - Fisso in basso</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="#">基础教程网</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="#">Link separato</a></li> <li class="divider"></li> <li><a href="#">Un altro link separato</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>测试看看 ‹/›
结果如下所示：
Se desideri creare una barra di navigazione che scorre insieme alla pagina, aggiungi .navbar-static-top class. Questa classe non richiede di aggiungere margini interni (padding) al <body>.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Esempio Bootstrap - Statico in alto</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="#">基础教程网</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="#">Link separato</a></li> <li class="divider"></li> <li><a href="#">Un altro link separato</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>测试看看 ‹/›
结果如下所示：
Per creare una barra di navigazione in contrasto con sfondo nero e testo bianco, è sufficiente aggiungere semplicemente a .navbar class aggiungi .navbar-inverse class è sufficiente, come mostrato nell'esempio seguente:
Per prevenire che la barra di navigazione si incroci con il contenuto principale della pagina, aggiungere almeno 50 pixel di margine interno (padding) al tag <body>, il valore può essere impostato a seconda delle tue esigenze.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 示例 - 倒置的导航栏</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="#">基础教程网</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="#">Link separato</a></li> <li class="divider"></li> <li><a href="#">Un altro link separato</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>测试看看 ‹/›
结果如下所示：