Bootstrap Navigation
Introduction
Dans ce tutoriel, vous apprendrez à utiliser la boîte à outils Bootstrap pour créer une navigation basée sur les navs, les onglets et les pilules.
Nous avons des exemples de démonstration avec des explications associées, comprenant : une navigation de base basée sur des onglets et des pilules, une navigation empilée ou verticale basée sur des onglets et des pilules, des menus déroulants dans les onglets et les pilules, la création d'une navigation empilée avec des listes de navigation, et la création d'une navigation cliquable avec JavaScript (différentes directions).
Onglets de base
Deux classes CSS, .nav et .nav-tabs, sont utilisées pour créer une navigation de base basée sur des onglets. Dans la version v2.0.1 de Bootstrap, les styles de la classe CSS .nav sont déclarés aux lignes 2176 à 2220 (certains styles associés sont également inclus ici). Les lignes 2222 à 2267 contiennent les styles pour .nav-tabs. L'exemple suivant montre comment créer une navigation de base basée sur des onglets à l'aide de Bootstrap.
Exemple de navigation par onglets de base avec Bootstrap
Exemple
<div class="row">
<div class="span6">
<ul class="nav nav-tabs">
<li class="active"><a href="../index.html">Accueil</a></li>
<li><a href="../index.html">Tutoriels</a></li>
<li><a href="../index.html">Éditeur de pratique </a></li>
<li><a href="../index.html">Galerie</a></li>
<li><a href="../index.html">Contact</a></li>
</ul>
</div>
</div>
</div>
Sortie
Voir en ligne
Affichez l'exemple ci-dessus dans différentes fenêtres de navigateur.
Pilules de base
Une fois que vous savez comment créer une navigation de base à onglets avec Bootstrap, il devient facile de créer une navigation de base à pilules. Au lieu d'utiliser la classe .nav-tabs, vous utilisez ici la classe .nav-pills. Les styles de .nav-pills se trouvent aux lignes 2222 à 2224 dans bootstrap.css, et sont répétés aux lignes 2268 à 2280 dans bootstrap.css (utilisés dans le dernier exemple).
L'exemple suivant montre comment créer une navigation de base à pilules.
Exemple de navigation de base à pilules avec Bootstrap
Exemple
<div class="row">
<div class="span8">
<ul class="nav nav-pills">
<li class="active"><a href="../index.html">Accueil</a></li>
<li><a href="../index.html">Tutoriels</a></li>
<li><a href="../index.html">Éditeur de pratique </a></li>
<li><a href="../index.html">Galerie</a></li>
<li><a href="../index.html">Contact</a></li>
</ul>
</div>
</div>
</div>
Sortie
Voir en ligne
Affichez l'exemple ci-dessus dans différentes fenêtres de navigateur.
Onglets empilés ou verticaux
Pour créer une navigation à onglets empilés ou verticaux, vous devez ajouter les classes .nav-stacked, .nav et .nav-tabs à votre balisage. Par défaut, une navigation à onglets horizontale est créée. Les lignes 2281 à 2309 contiennent les styles de .nav-stacked. Voici un exemple.
Exemple de navigation à onglets empilés ou verticaux avec Bootstrap
Exemple
<div class="row">
<div class="span8">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="../index.html">Accueil</a></li>
<li><a href="../index.html">Tutoriels</a></li>
<li><a href="../index.html">Éditeur de pratique </a></li>
<li><a href="../index.html">Galerie</a></li>
<li><a href="../index.html">Contact</a></li>
</ul>
</div>
</div>
</div>
Sortie
Voir en ligne
Affichez l'exemple ci-dessus dans une autre fenêtre de navigateur.
Pilules empilées ou verticales
Semblable à la création d'onglets empilés ou verticaux, vous devez ajouter une classe CSS supplémentaire pour créer une navigation à pilules empilées ou verticales. Il s'agit de la classe .nav-stacked, située aux lignes 2281 à 2309, qui contient les styles de .nav-stacked. Voici un exemple.
Exemple de navigation à pilules empilées ou verticales avec Bootstrap
Exemple
<div class="row">
<div class="span2">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="../index.html">Accueil</a></li>
<li><a href="../index.html">Tutoriels</a></li>
<li><a href="../index.html">Éditeur de pratique </a></li>
<li><a href="../index.html">Galerie</a></li>
<li><a href="../index.html">Contact</a></li>
</ul>
</div>
</div>
</div>
Sortie
Voir en ligne
Affichez l'exemple ci-dessus dans une autre fenêtre de navigateur.
Onglets avec menus déroulants
Vous pouvez utiliser Bootstrap pour créer une navigation par menu déroulant basée sur des onglets. Il y a quatre classes CSS - .dropdown, .dropdown-toggle, .dropdown-menu et .caret - dont vous avez besoin, ainsi que les classes .nav et .nav-tabs. Dans bootstrap.css (version 2.0.1), les lignes 1545 à 1547 contiennent les styles de la classe .dropdown, les lignes 1548 à 1553 contiennent les styles de .dropdown-toggle, les lignes 1576 à 1632 contiennent les styles de .dropdown-menu, et les lignes 1554 à 1575 contiennent les styles de .caret. Dans l'exemple de démonstration, une autre classe CSS .divider est également utilisée, mais elle n'est pas requise.
Bien sûr, vous devez référencer trois fichiers JavaScript dans votre fichier HTML - jquery.js, bootstrap-dropdown.js et application.js. Tous se trouvent dans le dossier docs/assets/js/.
Voici un exemple.
Exemple de navigation par menu déroulant basée sur des onglets avec Bootstrap
Exemple
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exemple de navigation par menu déroulant basée sur des onglets avec Bootstrap</title>
<meta name="description" content="Exemple de navigation par menu déroulant basée sur des onglets avec Bootstrap">
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css.html" rel="stylesheet">
<style type="text/css">
.container {
margin-top: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav nav-tabs">
<li class="active"><a href="../index.html">Accueil</a></li>
<li><a href="../index.html">À propos</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="../index.html">FrontEnd<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="../index.html">Twitter Bootstrap</a></li>
<li><a href="../index.html">Google Plus API</a></li>
<li><a href="../index.html">HTML5</a></li>
<li class="divider"></li>
<li><a href="../index.html">Exemples</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="../index.html">Back-end<b class="caret bottom-up"></b></a>
<ul class="dropdown-menu bottom-up pull-right">
<li><a href="../index.html">PHP</a></li>
<li><a href="../index.html">MySQL</a></li>
<li><a href="../index.html">PostgreSQL</a></li>
<li class="divider"></li>
<li><a href="../index.html">Démos en direct</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js.html"></script>
</body>
</html>
Remarque : Nous avons ajouté une balise style distincte et l'avons référencée dans un petit ensemble de styles pour créer une marge supérieure de 200 pixels pour le conteneur ; ceci est juste à titre de démonstration. data-toggle est un attribut spécifique à Bootstrap. Définir sa valeur sur "dropdown" crée une navigation par menu déroulant.
Sortie
Menu déroulant à base d'onglets :
Menu dropup à base d'onglets :
Voir en ligne
Affichez l'exemple ci-dessus dans une autre fenêtre de navigateur.
Pilules avec menus déroulants
Le balisage et le CSS pour créer des menus déroulants à base de pilules sont similaires à ceux pour créer des menus déroulants à base d'onglets. La seule chose à faire est de remplacer .nav-tabs par la classe .nav-pills. Voici un exemple.
Exemple de navigation par menu déroulant à base de pilules Bootstrap
Exemple
<html lang="en">
<head>
<meta charset="utf-8">
<title>Exemple de navigation par menu déroulant à base de pilules Bootstrap</title>
<meta name="description" content="Exemple de navigation par menu déroulant à base de pilules Bootstrap">
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap2.2.css.html" rel="stylesheet">
<style type="text/css">
.container {
margin-top: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="span6">
<ul class="nav nav-pills">
<li class="active"><a href="../index.html">Accueil</a></li>
<li><a href="../index.html">À propos</a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="../index.html">FrontEnd<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="../index.html">Twitter Bootstrap</a></li>
<li><a href="../index.html">Google Plus API</a></li>
<li><a href="../index.html">HTML5</a></li>
<li class="divider"></li>
<li><a href="../index.html">Exemples</a></li>
</ul>
</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="../index.html">Back-end<b class="caret bottom-up"></b></a>
<ul class="dropdown-menu bottom-up pull-right">
<li><a href="../index.html">PHP</a></li>
<li><a href="../index.html">MySQL</a></li>
<li><a href="../index.html">PostgreSQL</a></li>
<li class="divider"></li>
<li><a href="../index.html">Démos en direct</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/application.js.html"></script>
</body>
</html>
Sortie
Menu déroulant à base de pilules :
Menu déroulant vers le haut à base de pilules :
Voir en ligne
Affichez l'exemple ci-dessus dans une autre fenêtre de navigateur.
Création d'une navigation empilée avec en-têtes facultatifs à l'aide de la liste de navigation
La classe .nav-class peut être utilisée pour créer une navigation empilée adaptée à une barre latérale. Vous pouvez ajouter des en-têtes à un groupe de liens, avec des styles définis pour .nav-list situés aux lignes 2201 à 2221 dans bootstrap.css (version 2.0.1). Voici un exemple.
Exemple de navigation empilée avec liste de navigation
Exemple
<div class="row">
<div class="span6">
<ul class="nav nav-list">
<li class="nav-header">En-tête de liste</li>
<li class="active"><a href="../index.html">Accueil</a></li>
<li><a href="../index.html">Bibliothèque</a></li>
<li><a href="../index.html">Applications</a></li>
<li class="nav-header">Un autre en-tête de liste</li>
<li><a href="../index.html">Profil</a></li>
<li><a href="../index.html">Paramètres</a></li>
<li class="divider"></li>
<li><a href="../index.html">Aide</a></li>
</ul>
</div>
</div>
</div>
Sortie
Voir en ligne
Affichez l'exemple ci-dessus dans une autre fenêtre de navigateur.
Création d'une navigation empilée avec des icônes à l'aide d'une liste de navigation
Exemple
<div class="span6">
<ul class="nav nav-list">
<li class="nav-header">En-tête de liste</li>
<li class="active"><a href="../index.html"><i class="icon-white icon-home"></i> Accueil</a></li>
<li><a href="../index.html"><i class="icon-book"></i> Bibliothèque</a></li>
<li><a href="../index.html"><i class="icon-pencil"></i> Applications</a></li>
<li class="nav-header">Un autre en-tête de liste</li>
<li><a href="../index.html"><i class="icon-user"></i> Profil</a></li>
<li><a href="../index.html"><i class="icon-cog"></i> Paramètres</a></li>
<li class="divider"></li>
<li><a href="../index.html"><i class="icon-flag"></i> Aide</a></li>
</ul>
</div>
</div>
Sortie
Voir en ligne
Affichez les exemples ci-dessus dans différentes fenêtres de navigateur.
Création d'une navigation cliquable avec JavaScript
Vous pouvez créer une navigation par onglets avec le plugin jQuery léger de Bootstrap et un balisage simple.
Comment créer une navigation cliquable ?
Vous avez besoin d'une classe CSS nommée "tabbable" qui sert de conteneur. À l'intérieur, ajoutez les classes "nav" et "nav-tabs" à un élément "ul". À l'intérieur de celui-ci, utilisez 'data-toggle="tab"' (appliqué aux éléments d'ancrage concernés) pour créer des zones cliquables. Ensuite, créez une div avec la classe CSS "tab-content", et à l'intérieur de cette div, plusieurs éléments div avec la classe CSS "tab-pane" servent à contenir le contenu réel.
Pour que la navigation cliquable fonctionne correctement, vous devez référencer deux fichiers JS - jquery.js et bootstrap-tab.js. Les deux fichiers se trouvent dans le dossier docs/assets/js.
Voici un exemple démontrant une navigation cliquable.
Exemple
<div class="row">
<div class="span4">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="../index.html" data-toggle="tab">Section 1</a></li>
<li class=""><a href="../index.html" data-toggle="tab">Section 2</a></li>
<li class=""><a href="../index.html" data-toggle="tab">Section 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="1">
<p>Vous regardez la section 1.</p>
</div>
<div class="tab-pane" id="2">
<p>Vous regardez la section 2.</p>
</div>
<div class="tab-pane" id="3">
<p>Vous regardez la section 3.</p>
</div>
</div>
</div>
</div>
</div>
</div>
Cliquez ici pour télécharger tous les fichiers HTML, CSS, JS et images utilisés dans ce tutoriel.
Autres extensions