Les menus sont utilisés dans la plupart des pages Web. Celles-ci sont définies dans une liste non ordonnée <ul>. Vous devez ajouter la classe .list-inline à <ul> pour créer un menu horizontal.
Voir cet exemple:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Menu</h3>
<ul class="list-inline">
<li><a href="#">Accueil</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Résultat :
Onglets bootstrap
Vous pouvez créer une balise de navigation de base avec <ul class = « nav nav-tabs »>. Vous pouvez également marquer la page actuelle avec <li class = « active »>.
L’exemple suivant indique comment créer un onglet de navigation simple.
Voir cet exemple:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Onglets</h3>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Accueil</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
<br>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Résultat :
Onglets bootstrap avec menu déroulant
Vous pouvez également utiliser des onglets dans un menu déroulant.
Voir cet exemple:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Onglets avec menu déroulant</h3>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Accueil</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Résultat :
Bootstrap Onglets dynamiques
Ajoutez l’attribut data-toggle = « tab » à chaque lien. Ajoutez ensuite une classe .tab-pane avec un ID unique pour chaque onglet et insérez-les dans un élément <div> avec la classe .tab-content, pour rendre les balises basculables.
Si vous souhaitez que les onglets apparaissent et disparaissent en fondu, ajoutez la classe .fade à .tab-pane.
Voir cet exemple:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>Onglets dynamiques</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Accueil</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Un langage de balisage est un langage de programmation utilisé pour rendre le texte plus
interactif et dynamique. Il peut transformer un texte en images, tableaux, liens, etc.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Java est un langage de programmation de haut niveau, robuste, sécurisé et orienté objet.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>SQL est juste un langage de requête, ce n'est pas une base de données. Pour effectuer des requêtes SQL,
vous devez installer n'importe quelle base de données, par exemple Oracle, MySQL, MongoDB, PostGre SQL, SQL Server, DB2, etc.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Le langage C est développé pour créer des applications système qui dirigent
interagit avec les périphériques matériels tels que les pilotes, les noyaux, etc.</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Résultat :
Les listes Bootstrap
Vous pouvez créer une liste avec <ul class = « nav nav-pills »>. Vous pouvez également marquer la page actuelle avec <li class = « active »>.
Voir cet exemple:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Liste</h3>
<ul class="nav nav-pills">
<li class="active"><a href="#">Accueil</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Résultat :
Bootstrap Menu verticales
Ajoutez la classe .nav-stacked pour afficher la liste verticalement.
Voir cet exemple:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Menu verticale</h3>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Accueil</a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Résultat :
Bootstrap liste avec menu déroulant
Vous pouvez également utiliser le menu déroulant avec une liste.
Voir cet exemple:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Pillules avec menu déroulant</h3>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Accueil</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Submenu 1-1</a></li>
<li><a href="#">Submenu 1-2</a></li>
<li><a href="#">Submenu 1-3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
Résultat :
Bootstrap onglets / menu Justifiés
Pour les onglets et les menus justifiés, ajoutez la classe .nav-justified (largeur égale):
Exemple:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Bootstrap Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Exemple d'onglets et menu justifiés</h2>
<p>Pour justifier les menus (de largeur égale), utilisez la classe .nav-Justified:</p>
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lien</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lien</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Inactif</a>
</li>
</ul><br>
<h4>Justified tabs:</h4>
<ul class="nav nav-tabs nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#">Actif</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lien</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Lien</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Inactif</a>
</li>
</ul>
</div>
</body>
</html>
Résultat :
