English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La barre de navigation est une fonctionnalité excellente et une caractéristique marquante du site Web Bootstrap. Elle agit en tant que composant de base réactif pour l'en-tête de navigation dans votre application ou site Web. La barre de navigation est repliée dans la vue des appareils mobiles et s'étend horizontalement à mesure que la largeur de la fenêtre de visualisation disponible augmente. Au cœur de la barre de navigation Bootstrap, elle inclut le nom du site et les styles de définition de navigation de base.
Voici les étapes pour créer une barre de navigation par défaut :
Ajoutez une classe au balise <nav> .navbar, .navbar-default。
Ajoutez à l'élément ci-dessus role="navigation"ce qui aide à améliorer l'accessibilité.
Ajoutez une classe titre à l'élément <div> .navbar-headercontient des classes navbar-brand élément <a>. Cela rend le texte plus grand.
Pour ajouter un lien à la barre de navigation, il suffit de simplement ajouter une classe .nav, .navbar-nav et une liste non ordonnée.
Voici un exemple pour illustrer cela :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Exemple Bootstrap</title> - Navigation bar par défaut</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="#">Réseau de base de connaissances</a>/a> </div> <div> <ul class="nav navbar-nav> <li class="active"><a href="#">iOS</a>/a></li> <li><a href="#">SVN</a>/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>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">链接分离的</a></li> <li class="divider"></li> <li><a href="#">另一个链接分离的</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>看看测试 ‹/›
如下所示结果：
Pour ajouter des fonctionnalités réactives à la barre de navigation, le contenu à plier doit être enveloppé dans une classe .collapse, .navbar-collapse dans le <div> plié. La barre de navigation pliée est en réalité une barre avec la classe .navbar-toggle et deux data- bouton de l'élément. Le premier est data-togglesont utilisées pour informer JavaScript ce que doit faire le bouton, le deuxième est data-targetpour indiquer quel élément doit être basculé. Trois classes .icon-bar Les <span> créent ce qu'on appelle le bouton hamburger. Ceux-ci basculent en .nav-collapse des éléments à l'intérieur de <div> pour réaliser ces fonctionnalités. Pour cela, vous devez inclure Plugin de pliage (Collapse) Bootstrap。
Voici un exemple pour illustrer cela :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Exemple Bootstrap</title> - barre de navigation réactive</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">Basculer la navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Tutoriel de base</a> </div> <div class="collapse navbar-collapse" id="example-navbar-collapse"> <ul class="nav navbar-nav> <li class="active"><a href="#">iOS</a>/a></li> <li><a href="#">SVN</a>/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>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">链接分离的</a></li> <li class="divider"></li> <li><a href="#">另一个链接分离的</a></li> </ul> </li> </ul> </div> </div></nav> </body> </html>看看测试 ‹/›
如下所示结果：
Vous pouvez utiliser la classe .navbar-btn Ajoutez un bouton à l'élément <button> qui n'est pas dans <form>, et ce bouton sera centré verticalement dans la barre de navigation..navbar-btn qui peuvent être utilisés sur les éléments <a> et <input>.
Ne pas utiliser dans .navbar-nav sur l'élément <a> à l'intérieur .navbar-btnparce qu'elle n'est pas standard class bouton。
Voici un exemple pour illustrer cela :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Exemple Bootstrap</title> - bouton dans la barre de navigation/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="#">Réseau de base de connaissances</a>/a> </div> <div> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Recherche"> </div> <button type="submit" class="btn btn-default">bouton de soumission</button> </form> <button type="button" class="btn btn-navbar default-btn"> bouton de la barre de navigation </button> </div> </div> </nav> </body> </html>看看测试 ‹/›
如下所示结果：
Si vous devez inclure une chaîne de texte dans la navigation, utilisez la classe .navbar-textCela se fait généralement avec l'étiquette <p> pour assurer une indentation et une couleur appropriées. Voici un exemple pour illustrer cela :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Exemple Bootstrap</title> - texte dans la barre de navigation</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="#">Réseau de base de connaissances</a>/a> </div> <div> <p class="navbar-text">w3codebox utilisateur connexion</p> </div> </div> </nav> </body> </html>看看测试 ‹/›
如下所示结果：
Si vous souhaitez utiliser des icônes dans les composants de navigation de la barre de navigation standard, utilisez la classe glyphicon glyphicon-* pour définir les icônes, plus d'informations Icônes Bootstrap comme dans l'exemple suivant :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Exemple Bootstrap</title> - Liens non de navigation</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="#">Réseau de base de connaissances</a>/a> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><span class="glyphicon glyphicon-user"></span>Enregistrement</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Connexion</a></li> </ul> </div> </nav> </body> </html>看看测试 ‹/›
如下所示结果：
Vous pouvez utiliser les classes utilitaires .navbar-left ou .navbar-right Aligner à gauche ou à droite la barre de navigation Liens de navigation, formulaires, boutons ou texte Ces composants. Ces deux classes ajoutent un flot CSS dans la direction spécifiée. Un exemple montre cela :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Exemple Bootstrap</title> - Alignement des composants</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="#">Réseau de base de connaissances</a>/a> </div> <div> !--Aligné à gauche--> <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>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">链接分离的</a></li> <li class="divider"></li> <li><a href="#">另一个链接分离的</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <button type="submit" class="btn btn-default"> Aligné à gauche-Bouton de soumission </button> </form> <p class="navbar-texte navbar-left">Aligné à gauche-Texte</p> !--Aligné à droite--> <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>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">链接分离的</a></li> <li class="divider"></li> <li><a href="#">另一个链接分离的</a></li> </ul> </li> </ul> <form class="navbar-form navbar-right" role="search"> <button type="submit" class="btn btn-default"> Aligné à droite-Bouton de soumission </button> </form> <p class="navbar-texte navbar-right">Aligné à droite-Texte</p> </div> </div> </nav> </body> </html>看看测试 ‹/›
如下所示结果：
La barre de navigation Bootstrap peut être positionnée dynamiquement. Par défaut, elle est un élément en bloc, elle est positionnée en fonction de son emplacement dans le HTML. Grâce à certaines classes d'aide, vous pouvez la placer en haut ou en bas de la page, ou vous pouvez la rendre statique et la faire rouler avec la page.
Si vous souhaitez que la barre de navigation soit fixée en haut de la page, ajoutez à .navbar class Ajouter la classe .navbar-fixed-top。下面的示例演示了这点：
Pour éviter que la barre de navigation ne se chevauche avec le contenu principal de la page, ajoutez au moins 50 pixels de marge interne (padding), la valeur de la marge interne peut être réglée selon vos besoins.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Exemple Bootstrap</title> - Fixer en haut de la page</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-navbar default-fixed-top" role="navigation"> <div class="container-fluid> <div class="navbar-header> <a class="navbar-brand" href="#">Réseau de base de connaissances</a>/a> </div> <div> <ul class="nav navbar-nav> <li class="active"><a href="#">iOS</a>/a></li> <li><a href="#">SVN</a>/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>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">链接分离的</a></li> <li class="divider"></li> <li><a href="#">另一个链接分离的</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>看看测试 ‹/›
如下所示结果：
Si vous souhaitez que la barre de navigation soit fixée en bas de la page, ajoutez à .navbar class Ajouter la classe .navbar-fixed-bottom。下面的示例演示了这点：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Exemple Bootstrap</title> - Fixer en bas de la page</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-navbar default-fixed-bottom" role="navigation"> <div class="container-fluid> <div class="navbar-header> <a class="navbar-brand" href="#">Réseau de base de connaissances</a>/a> </div> <div> <ul class="nav navbar-nav> <li class="active"><a href="#">iOS</a>/a></li> <li><a href="#">SVN</a>/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>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">链接分离的</a></li> <li class="divider"></li> <li><a href="#">另一个链接分离的</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>看看测试 ‹/›
如下所示结果：
Pour créer une barre de navigation qui roule avec la page, ajoutez .navbar-static-top class. Cette classe n'exige pas d'ajouter des marges internes (padding) au <body>.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Exemple Bootstrap</title> - Barre de navigation supérieure statique</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-navbar default-static-top" role="navigation"> <div class="container-fluid> <div class="navbar-header> <a class="navbar-brand" href="#">Réseau de base de connaissances</a>/a> </div> <div> <ul class="nav navbar-nav> <li class="active"><a href="#">iOS</a>/a></li> <li><a href="#">SVN</a>/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>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">链接分离的</a></li> <li class="divider"></li> <li><a href="#">另一个链接分离的</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>看看测试 ‹/›
如下所示结果：
Pour créer une barre de navigation inversée avec un fond noir et du texte blanc, il suffit de simplement ajouter .navbar class ajouter .navbar-inverse class comme dans l'exemple suivant :
Pour éviter que la barre de navigation ne se chevauche avec le contenu principal de la page, ajoutez au moins 50 pixels de marge interne (padding), la valeur de la marge interne peut être réglée selon vos besoins.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Exemple Bootstrap</title> - Barre de navigation inversée</title>/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="#">Réseau de base de connaissances</a>/a> </div> <div> <ul class="nav navbar-nav> <li class="active"><a href="#">iOS</a>/a></li> <li><a href="#">SVN</a>/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>/a></li> <li><a href="#">EJB</a>/a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">链接分离的</a></li> <li class="divider"></li> <li><a href="#">另一个链接分离的</a></li> </ul> </li> </ul> </div> </div> </nav> </body> </html>看看测试 ‹/›
如下所示结果：