English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 Tutoriel de base

Bootstrap4 Navigation bar

　 　 You can use the Bootstrap navigation bar component to create responsive navigation titles for your website or application. These responsive navigation bars are initially folded on devices with small viewports (such as mobile phones), but expand when the user clicks the toggle button. However, on medium and large devices such as laptops or desktops, it will be horizontal as usual.

The navigation bar is generally placed at the top of the page.

We can use the .navbar class to create a standard navigation bar, followed by: .navbar-expand-xl|lg|md|sm classes are used to create responsive navigation bars (horizontally spread on large screens, vertically stacked on small screens).

The options on the navigation bar can be used with the <ul> element and add class. Then add .nav to the <li> element.-item class, use .nav on the <a> element.-link class:

<!DOCTYPE html>
<html>
<head>
　　<title>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>
<nav class="navbar navbar-expand-sm bg-clair">
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Lien　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Lien　2</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Lien　3</a>
　　　　</li>
　　</ul>
</nav>
<br>
<div class="container-fluid">
　　<h2>Simple navigation bar example</h2>
　　<p>The navigation bar is generally placed at the top of the page.</p>
　　<p>We can use the .navbar class to create a standard navigation bar, followed by: .navbar<-expand-xl|lg|md|sm classes are used to create responsive navigation bars (horizontally spread on large screens, vertically stacked on small screens).</p>
</div>
</body>
</html>
Voyons un test ‹/›

Barre de navigation verticale

Supprimer .navbar-expand-xl|lg|md|sm classes pour créer une barre de navigation verticale:

<!DOCTYPE html>
<html>
<head>
　　<title>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>
<nav class="navbar bg-clair">
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Lien　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Lien　2</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Lien　3</a>
　　　　</li>
　　</ul>
</nav>
<br>
<div class="container-fluid">
　　<h2>Barre de navigation verticale</h2>
　　<p>La barre de navigation est généralement située en haut de la page.</p>
</div>
</body>
</html>
Voyons un test ‹/›

Barres de navigation de couleurs différentes

Vous pouvez utiliser les classes suivantes pour créer des barres de navigation de couleurs différentes : .bg-primaire, .bg-réussie, .bg-d'information, .bg-d'avertissement, .bg-dangereuse, .bg-secondaire, .bg-sombre et .bg-clair).

Avis: Pour les arrière-plans sombres, il est nécessaire de définir la couleur du texte sur une couleur claire, et pour les arrière-plans clairs, il est nécessaire de définir la couleur du texte sur une couleur sombre.

<!DOCTYPE html>
<html>
<head>
　　<title>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>Barres de navigation de couleurs différentes</h2>
　　<p>Pour les arrière-plans sombres, il est nécessaire de définir la couleur du texte sur une couleur claire, et pour les arrière-plans clairs, il est nécessaire de définir la couleur du texte sur une couleur sombre.</p>
</div>
<nav class="navbar navbar-expand-sm bg-barre de navigation clair-clair">
　　<ul class="navbar-nav">
　　　　<li class="nav-élément actif">
　　　　　　<a class="nav-lien" href="#">Activé</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-lien désactivé" href="#">Désactivé</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-élément actif">
　　　　　　<a class="nav-lien" href="#">Activé</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-lien désactivé" href="#">Désactivé</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-barre de navigation primaire-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-élément actif">
　　　　　　<a class="nav-lien" href="#">Activé</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-lien désactivé" href="#">Désactivé</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-barre de navigation réussie-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-élément actif">
　　　　　　<a class="nav-lien" href="#">Activé</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-lien désactivé" href="#">Désactivé</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-barre de navigation d'information-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-élément actif">
　　　　　　<a class="nav-lien" href="#">Activé</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-lien désactivé" href="#">Désactivé</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-barre de navigation d'avertissement-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-élément actif">
　　　　　　<a class="nav-lien" href="#">Activé</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-lien désactivé" href="#">Désactivé</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-barre de navigation dangereuse-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-élément actif">
　　　　　　<a class="nav-lien" href="#">Activé</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-lien désactivé" href="#">Désactivé</a>
　　　　</li>
　　</ul>
</nav>
<nav class="navbar navbar-expand-sm bg-barre de navigation secondaire-dark">
　　<ul class="navbar-nav">
　　　　<li class="nav-élément actif">
　　　　　　<a class="nav-lien" href="#">Activé</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-lien désactivé" href="#">Désactivé</a>
　　　　</li>
　　</ul>
</nav>
</body>
</html>
Voyons un test ‹/›

États d'activation et de désactivation: Vous pouvez ajouter la classe .active sur l'élément <a> pour mettre en évidence l'option sélectionnée. La classe .disabled est utilisée pour rendre le lien non cliquable.

Marque/Logo

.navbar-La classe "brand" est utilisée pour mettre en évidence la marque/Logo:

<!DOCTYPE html>
<html>
<head>
　　<title>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>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<!--　Marque/logo　-->
　　<a class="navbar-brand" href="#">Logo</a>
　　
　　<!--　Liens　-->
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Lien　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Lien　2</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Lien　3</a>
　　　　</li>
　　</ul>
</nav>
<div class="container-fluid">
　　<h2>Marque/Logo</h2>
　　<p>.navbar-La classe "brand" est utilisée pour mettre en évidence la marque/Logo:</p>
</div>
</body>
</html>
Voyons un test ‹/›

Si vous utilisez des images, vous pouvez utiliser .navbar-la classe "brand" pour ajuster l'image à la barre de navigation.

<!DOCTYPE html>
<html>
<head>
　　<title>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>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<!--　Marque/logo　-->
　　<a class="navbar-brand" href="#">
　　　　<img src="https://statique.oldtoolbag.com/images/mélanger/oiseau.jpg" alt="logo" style="largeur:40px;">
　　</a>
　　
　　<!--　Liens　-->
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Lien　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Lien　2</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Lien　3</a>
　　　　</li>
　　</ul>
</nav>
<div class="container-fluid">
　　<h2>Marque　/　Logo</h2>
　　<p>Si vous utilisez des images, vous pouvez utiliser .navbar-la classe "brand" pour ajuster l'image à la barre de navigation.</p>
</div>
</body>
</html>
Voyons un test ‹/›

Barre de navigation repliable

Généralement, sur les petits écrans, nous replions la barre de navigation et cliquons pour afficher les options de navigation.

Pour créer une barre de navigation repliable, vous pouvez ajouter data-basculer="replier" et data-cible="#cible". Ensuite, enveloppez le contenu de navigation (liens) dans un div avec la classe 　et divélément avec l'ID correspondant au bouton data-cible de l'ID spécifié :

<!DOCTYPE html>
<html>
<head>
　　<title>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>
<nav class="navbar navbar-expand-md　bg-dark navbar-dark">
　　<a class="navbar-marque"　href="#">Barre de navigation</a>
　　<button　class="navbar-bouton"　type="bouton"　data-bouton"　type="bouton"　data-cible="#collapsibleNavbar">
　　　　<span class="navbar-bouton-icône"></span>
　　</button>
　　<div　class="collapse　navbar-collapse"　id="collapsibleNavbar">
　　　　<ul class="navbar-nav">
　　　　　　<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 href="#">Lien</a>
　　　　　　</li>　　　　
　　　　</ul>
　　</div>　　
</nav>
<br>
<div class="container">
　　<h2>plier de navigation</h2>
　　<p>通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。</p>
　　<p>提示:　如果你删除　.navbar-expand-md　类，导航链接会一直隐藏，且切换按钮会一直显示。</p>
</div>
</body>
</html>
Voyons un test ‹/›

导航栏使用下拉菜单

导航栏上可以设置下拉菜单：

<!DOCTYPE html>
<html>
<head>
　　<title>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>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<!--　Marque　-->
　　<a class="navbar-brand" href="#">Logo</a>
　　<!--　Liens　-->
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Lien　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Lien　2</a>
　　　　</li>
　　　　<!--　Dropdown　-->
　　　　<li class="nav-item　dropdown">
　　　　　　<a class="nav-lien　dropdown-toggle"　href="#"　id="navbardrop"　data-toggle="dropdown">
　　　　　　　　Lien dropdown
　　　　　　</a>
　　　　　　<div　class="dropdown-menu">
　　　　　　　　<a　class="dropdown-item"　href="#">Lien　1</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Lien　2</a>
　　　　　　　　<a　class="dropdown-item"　href="#">Lien　3</a>
　　　　　　</div>
　　　　</li>
　　</ul>
</nav>
<br>
　　
<div class="container">
　　<h2>导航栏使用下拉菜单</h2>
　　<p>导航栏上可以设置下拉菜单。</p>
</div>
</body>
</html>
Voyons un test ‹/›

导航栏的表单与按钮

导航栏的表单 <form> 元素使用 类来排版输入框与按钮：

<!DOCTYPE html>
<html>
<head>
　　<title>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>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<form　class="form-inline">
　　　　<input　class="form-control"　type="text"　placeholder="Search">
　　　　<button　class="btn　btn-success"　type="button">Search</button>
　　</form>
</nav>
<br>
<div class="container">
　　<h2>导航栏的表单</h2>
　　<p>导航栏的表单　form　元素使用　class="form-inline"　类来排版输入框与按钮：</p>
</div>
</body>
</html>
Voyons un test ‹/›

你也可以使用其他的输入框类，如　.input-group-addon"类用于在输入框前添加小标签。

<!DOCTYPE html>
<html>
<head>
　　<title>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>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<form　class="form-inline">
　　　　<div　class="input-group">
　　　　　　<span class="input">-group-<input type="text" class="form/span>
　　　　　　control" placeholder="Username">-<input type="text" class="form
　　　　</div>　　　　
　　</form>
</nav>
<br>
<div class="container">
　　<h2>导航表单</h2>
　　<p>　.input-group-addon 类用于在输入框前添加小标签。</p>
</div>
</body>
</html>
Voyons un test ‹/›

导航栏文本

使用 .navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。

<!DOCTYPE html>
<html>
<head>
　　<title>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>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
　　<!--　Liens　-->
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Lien　1</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Lien　2</a>
　　　　</li>
　　</ul>
　　<!--　Navbar text-->
　　<span class="navbar-text">
　　　　Navbar text
　　</span>
</nav>
<br>
<div class="container">
　　<h2>导航栏文本</h2>
　　<p>使用　.navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。</p>
</div>
</body>
</html>
Voyons un test ‹/›

固定导航栏

导航栏可以固定在头部或者底部。

我们使用 .fixed-top 类来实现导航栏的固定：

<!DOCTYPE html>
<html>
<head>
　　<title>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 style="height:1500px">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
　　<a class="navbar-brand" href="#">Logo</a>
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link href="#">Lien</a>
　　　　</li>
　　</ul>
</nav>
<div class="container-fluid" style="margin-top:80px">
　　<h2>固定导航栏</h2>
　　<p>La barre de navigation peut être fixée en haut ou en bas de la page.</p>
　　<h1>Regardez la page en défilement.</h1>
</div>
</body>
</html>
Voyons un test ‹/›

.fixed-bottom 类用于设置导航栏固定在底部：

<!DOCTYPE html>
<html>
<head>
　　<title>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 style="height:1500px">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
　　<a class="navbar-brand" href="#">Logo</a>
　　<ul class="navbar-nav">
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="javascript:void(0)">Lien</a>
　　　　</li>
　　　　<li class="nav-item">
　　　　　　<a class="nav-link" href="javascript:void(0)">Lien</a>
　　　　</li>
　　</ul>
</nav>
<div class="container-fluid">
　　<h2>Barre de navigation fixe en bas</h2>
　　<p>La barre de navigation peut être fixée en haut ou en bas de la page.</p>
　　<h1>Regardez la page en défilement.</h1>
</div>
</body>
</html>
Voyons un test ‹/›
Bootstrap4 Navigation de pâtes de beurreBootstrap4 Navigation