Bootstrap4 Tutoriel de base

Bootstrap4 Barre de navigation Bootstrap4 plier

Bootstrap4 Navigation

Bootstrap propose une méthode simple et rapide pour créer des composants de navigation de base, tels que les étiquettes et les pastilles, qui sont très flexibles et esthétiques. Tous les composants de navigation de Bootstrap (onglets et pastilles) partagent les mêmes balises de base et styles via la classe .nav.

Si vous souhaitez créer une barre de navigation horizontale simple, vous pouvez ajouter Classe .nav, ajouter .nav à chaque élément <li>-Classe item, ajouter .nav à chaque lien-Classe link :

Exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Navigation</h2>
　　<p>Navigation horizontale simple:</p>
　　<ul class="nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien disabled" href="#">Désactivé</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Vérifiez le test ‹/›

Alignement de la navigation

.justify-content-La classe center pour afficher le navigation au centre, .justify-content-Définir l'alignement à droite de la navigation avec la classe end.

Exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Navigation</h2>
　　<p>Alignement à gauche de la navigation (par défaut):</p>
　　<ul class="nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien disabled" href="#">Désactivé</a>
　　　　</li>
　　</ul>
　　
　　<p class="text-center">Navigation centrée:</p>
　　<ul class="nav justify-content-center">
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien disabled" href="#">Désactivé</a>
　　　　</li>
　　</ul>
　　　　
　　<p class="text-right">Navigation alignée à droite:</p>
　　<ul class="nav justify-content-end">
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien disabled" href="#">Désactivé</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Vérifiez le test ‹/›

Navigation verticale

.flex-La classe column est utilisée pour créer une navigation verticale：

Exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Navigation verticale</h2>
　　<p>.flex-column class est utilisée pour créer une navigation verticale：</p>
　　<ul class="nav flex-column">
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien disabled" href="#">Désactivé</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Vérifiez le test ‹/›

Onglets

Utilisez .nav-La classe tabs peut convertir la navigation en onglets. Ensuite, pour l'onglet sélectionné, utilisez la classe .active pour le marquer.

Exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Onglets</h2>
　　<p>Navigation d'onglets:</p>
　　<ul class="nav nav-tabs">
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien active" href="#">Actif</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien disabled" href="#">Désactivé</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Vérifiez le test ‹/›

Navigation en capsules

.nav-La classe pills peut configurer les éléments de navigation en forme de capsule.

Exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Capsules</h2>
　　<p>Navigation en capsules:</p>
　　<ul class="nav nav-pills">
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien active" href="#">Actif</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien disabled" href="#">Désactivé</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Vérifiez le test ‹/›

Navigation égale

.nav-La classe justified peut configurer l'affichage des éléments de navigation en alignement horizontal équitable.

Exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Navigation égale</h2>
　　<p>.nav-La classe justified peut configurer l'affichage des éléments de navigation en alignement horizontal équitable./p>
　　<ul class="nav nav-pills nav-justified">
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien active" href="#">Actif</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien disabled" href="#">Désactivé</a>
　　　　</li>
　　</ul><br>
　　<p>Onglets justifiés:</p>
　　<ul class="nav nav-tabs nav-justified">
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien active" href="#">Actif</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien disabled" href="#">Désactivé</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Vérifiez le test ‹/›

Menu déroulant en capsules

Exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Barre de navigation en capsules avec menu déroulant</h2>
　　<ul class="nav nav-pills">
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien active" href="#">Actif</a>
　　　　</li>
　　　　<li class="nav-élément dropdown">
　　　　　　<a class="nav-lien dropdown-toggle" data-toggle="dropdown" href="#">Déroulant</a>
　　　　　　<div class="dropdown-menu">
　　　　　　　　<a class="dropdown-élément" href="#">Lien　1</a>
　　　　　　　　<a class="dropdown-élément" href="#">Lien　2</a>
　　　　　　　　<a class="dropdown-élément" href="#">Lien　3</a></div>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien disabled" href="#">Désactivé</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Vérifiez le test ‹/›

Menu déroulant d'onglets

Exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Menu déroulant d'onglets</h2>
　　<ul class="nav nav-tabs">
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien active" href="#">Actif</a>
　　　　</li>
　　　　<li class="nav-élément dropdown">
　　　　　　<a class="nav-lien dropdown-toggle" data-toggle="dropdown" href="#">Déroulant</a>
　　　　　　<div class="dropdown-menu">
　　　　　　　　<a class="dropdown-élément" href="#">Lien　1</a>
　　　　　　　　<a class="dropdown-élément" href="#">Lien　2</a>
　　　　　　　　<a class="dropdown-élément" href="#">Lien　3</a></div>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien" href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-lien disabled" href="#">Désactivé</a>
　　　　</li>
　　</ul>
</div>
</body>
</html>

Vérifiez le test ‹/›

Onglets dynamiques

Si vous souhaitez que les onglets puissent être basculés dynamiquement, vous pouvez ajouter data-attribut toggle="tab". Ensuite, ajoutez .tab sur le contenu correspondant de chaque onglet.-class pane.

Si vous souhaitez avoir un effet d'effacement progressif, vous pouvez ajouter .tab-ajouter après pane 　 .fade class:

Exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Changement d'onglet</h2>
　　<br>
　　<!--　Nav tabs　-->
　　<ul class="nav nav-tabs" role="tablist">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="tab" href="#menu1">Menu　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="tab" href="#menu2">Menu　2</a>
　　　　</li>
　　</ul>
　　<!--　Tab panes　-->
　　<div class="tab-content">
　　　　<div id="home" class="container tab-pane active"><br>
　　　　　　<h2ACCUEIL/h2>
　　　　　　Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua./p>
　　　　</div>
　　　　<div id="menu1" class="container tab-pane fade"><br>
　　　　　　<h2>Menu　1</h2>
　　　　　　<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>/p>
　　　　</div>
　　　　<div id="menu2" class="container tab-pane fade"><br>
　　　　　　<h2>Menu　2</h2>
　　　　　　<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>/p>
　　　　</div>
　　</div>
</div>
</body>
</html>

Vérifiez le test ‹/›

Onglet dynamique en capsule

Pour créer une onglet dynamique en capsule, il suffit de remplacer le code de l'exemple ci-dessus par data-toggle L'attribut est réglé sur data-toggle="pill":

Exemple

<!DOCTYPE html>
<html>
<head>
　　<title>Exemple Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Changement de l'onglet en capsule</h2>
　　<br>
　　<!--　Nav pills　-->
　　<ul class="nav nav-pills" role="tablist">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link active" data-toggle="pill" href="#home">Accueil</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="pill" href="#menu1">Menu　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" data-toggle="pill" href="#menu2">Menu　2</a>
　　　　</li>
　　</ul>
　　<!--　Tab panes　-->
　　<div class="tab-content">
　　　　<div id="home" class="container tab-pane active"><br>
　　　　　　<h2ACCUEIL/h2>
　　　　　　Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua./p>
　　　　</div>
　　　　<div id="menu1" class="container tab-pane fade"><br>
　　　　　　<h2>Menu　1</h2>
　　　　　　<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>/p>
　　　　</div>
　　　　<div id="menu2" class="container tab-pane fade"><br>
　　　　　　<h2>Menu　2</h2>
　　　　　　<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>/p>
　　　　</div>
　　</div>
</div>
</body>
</html>

Vérifiez le test ‹/›

Bootstrap4 Barre de navigation Bootstrap4 plier