Comment ajouter une barre d'outils de navigation dans

Bootstrap ? L'article suivant vous présentera l'utilisation du composant de barre d'outils de navigation Bootstrap5 (Navbar). J'espère qu'il vous sera utile !

Comment ajouter une barre d'outils de navigation dans Bootstrap ? Une brève analyse sur l'utilisation du composant Navbar

1 Principe de fonctionnement

La barre d'outils de navigation Bootstrap (Navbar) est plus puissante et réactive que la navigation apprise dans la section précédente. La structure comprend la marque, la navigation, le formulaire, etc., ainsi que les plug-ins pliables. soutien. [Recommandation associée : "Tutoriel bootstrap"]

Avant de commencer à utiliser la barre de navigation, vous devez connaître les éléments suivants :

La barre de navigation doit être empaquetée avec .navbar et passée via .navbar-expand{- sm|-md |-lg|-xl} permet un pliage réactif et utilise une classe de jeu de couleurs.
La largeur du contenu par défaut de la barre de navigation est flottante. La modification des conteneurs limite la largeur horizontale de différentes manières.
Utilisez les classes communes d'espacement et de boîte flexible pour contrôler l'espacement et l'alignement des objets dans la barre de navigation.
La barre de navigation est responsive par défaut, mais cette option peut être facilement modifiée.
Utilisez des éléments de navigation pour garantir l'affinité, ou utilisez des éléments plus généraux tels que des divs.
Indiquez l'emplacement actuel en définissant aria-current="page" sur la page actuelle, ou aria-current="true" sur l'élément actuel du groupe.

2 La structure de la barre de navigation

2.1 Sous-éléments pris en charge

La barre de navigation a un support intégré pour certains sous-éléments. Choisissez parmi les options suivantes en fonction de vos besoins :

navbar-brand pour le nom de votre entreprise, de votre produit ou de votre projet.
navbar-nav offre une navigation très complète et légère (y compris la prise en charge des listes déroulantes).
navbar-toggler pour notre plugin de pliage et d'autres comportements de basculement de navigation.
Les classes communes d'espacement et de boîte flexible sont utilisées pour le contrôle et le comportement des formulaires.
navbar-text est utilisé pour les chaînes de texte centrées verticalement.
.collapse.navbar-collapse Regroupe et masque le contenu de la barre de navigation via les points d'arrêt du calque parent.
Ajoutez .navbar-scroll en option pour définir la hauteur maximale et faire défiler le contenu étendu de la barre de navigation.

Voici un exemple d'élément enfant, comprenant une barre de navigation réactive qui se réduit automatiquement au point d'arrêt md.

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div class="container">
            <nav class="navbar navbar-expand-md navbar-light bg-light">
                <div class="container-fluid">
                <a class="navbar-brand" href="https://www.bootstrap.cn"><img src="pic/logo.jpg"  height="60px"  alt=""></a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">首页</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">文档</a>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      版本
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                      <li><a class="dropdown-item" href="#">Bootstrap 4</a></li>
                      <li><a class="dropdown-item" href="#">Bootstrap 5</a></li>
                      <li><hr class="dropdown-divider"></li>
                      <li><a class="dropdown-item" href="#">早期版本</a></li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">留言</a>
                  </li>
                </ul>
                <form class="d-flex">
                  <input class="form-control me-2" type="search" placeholder="关键词" aria-label="Search">
                  <button class="btn btn-outline-success text-nowrap" type="submit">搜索</button>
                </form>
                </div>
                </div>
                </nav>

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Copier après la connexion

La navigation affichée avant et après le point d'arrêt est comme indiqué sur l'image

Comment ajouter une barre doutils de navigation dans Bootstrap ? Une brève analyse sur lutilisation du composant Navbar

Cliquez sur les trois lignes horizontales à droite pour afficher l'image ci-dessous, cliquez ici pour restaurer

Comment ajouter une barre doutils de navigation dans Bootstrap ? Une brève analyse sur lutilisation du composant Navbar

Après Dans l'exemple ci-dessus, si vous souhaitez écrire du code à la main, la mise en œuvre demande beaucoup d'efforts, mais maintenant il ne s'agit que d'un simple copier-coller. Ci-dessous, nous présentons en détail les fonctions et l'utilisation de chaque composant.

2.2 Marque (navbar-brand)

Vous pouvez y placer du texte, des images, des images et des combinaisons de texte. Dans l'exemple ci-dessus, nous mettons l'image du logo.

Texte

<!-- 可以放链接 -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>

<!-- 也可以放纯文本标签 -->
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">Navbar</span>
</div>
</nav>

Copier après la connexion

Comment ajouter une barre doutils de navigation dans Bootstrap ? Une brève analyse sur lutilisation du composant Navbar

L'image a été utilisée dans l'exemple ci-dessus, mélangeons maintenant l'image et le texte

<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="/static/doc5.0/assets/brand/bootstrap-logo.svg" alt="" width="30"    style="max-width:90%" class="d-inline-block align-text-top">
Bootstrap
</a>
</div>
</nav>

Copier après la connexion

Comment ajouter une barre doutils de navigation dans Bootstrap ? Une brève analyse sur lutilisation du composant Navbar

2.3 Navigation

La connexion de navigation est établie sur le .nav que nous avons appris auparavant et nécessite le utilisation de classes toggler pour établir un style réactif approprié. Les éléments de navigation dans une barre de navigation occupent autant d'espace horizontal que possible pour maintenir le contenu de votre barre de navigation aligné en toute sécurité.

Statut activé - utilisez .active - pour représenter la page actuelle. Peut être utilisé directement sur .nav-link ou directement sur .nav-item.
Veuillez noter que vous devez ajouter l'attribut aria-current sur le lien .nav lui-même.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div>
                <a href="#">品牌</a>
                <button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                <ul>
                  <li>
                    <a class="nav-link active" aria-current="page" href="#">首页</a>
                  </li>
                  <li>
                    <a href="#">功能</a>
                  </li>
                  <li>
                    <a href="#">价格</a>
                  </li>
                  <li>
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                  </li>
                </ul>
                </div>
                </div>
            </nav>

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Copier après la connexion

Comment ajouter une barre doutils de navigation dans Bootstrap ? Une brève analyse sur lutilisation du composant Navbar

Une façon intéressante de le faire sans utiliser de liste.

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                <a class="navbar-brand" href="#">品牌</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                <div class="navbar-nav">
                  <a class="nav-link active" aria-current="page" href="#">首页</a>
                  <a class="nav-link" href="#">功能</a>
                  <a class="nav-link" href="#">价格</a>
                  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </div>
                </div>
                </div>
            </nav>

Copier après la connexion

Les deux ont le même effet

Vous pouvez également utiliser des menus déroulants dans les éléments de navigation de la barre de navigation. Les menus déroulants nécessitent un élément wrapper pour le positionnement, assurez-vous d'utiliser des éléments séparés et imbriqués pour .nav-item et .nav-link comme indiqué ci-dessous.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div>
                <a href="#">品牌</a>
                <button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                <span></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul>
                  <li>
                    <a class="nav-link active" aria-current="page" href="#">首页</a>
                  </li>
                  <li>
                    <a href="#">功能</a>
                  </li>
                  <li>
                    <a href="#">价格</a>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      下拉菜单
                    </a>
                    <ul aria-labelledby="navbarDropdownMenuLink">
                      <li><a href="#">菜单一</a></li>
                      <li><a href="#">菜单二</a></li>
                      <li><a href="#">菜单三</a></li>
                    </ul>
                  </li>
                </ul>
                </div>
                </div>
            </nav>

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Copier après la connexion

Comment ajouter une barre doutils de navigation dans Bootstrap ? Une brève analyse sur lutilisation du composant Navbar

2.4 Formulaires

Vous pouvez placer divers formulaires et composants dans la barre de navigation, tels que le formulaire de recherche dans 13.2.1. Les éléments enfants directs dans la barre de navigation utilisent une disposition flexible, et la valeur par défaut est justifier-contenu. : espace entre les deux, c'est-à-dire aligner les deux extrémités. Utilisez d’autres classes de boîtes à étoile unique si nécessaire pour ajuster ce comportement.

input群组也可以这样使用。如果导航条整个都是表单，或者大部分是表单，则可以使用form元素作为容器并保存HTML。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <nav class="navbar navbar-light bg-light">
                <form>
                <div>
                <span id="basic-addon1">@</span>
                <input type="text" placeholder="请输入用户名" aria-label="Username" aria-describedby="basic-addon1">
                </div>
                </form>
            </nav>

        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Copier après la connexion

Comment ajouter une barre doutils de navigation dans Bootstrap ? Une brève analyse sur lutilisation du composant Navbar

表单导航条也支持各种按钮。这也大大的提醒了我们可以使用垂直对齐工具来对齐不同大小的元素。

<nav class="navbar navbar-light bg-light">
<form class="container-fluid justify-content-start">
<button class="btn btn-outline-success me-2" type="button">Main button</button>
<button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
</form>
</nav>

Copier après la connexion

Comment ajouter une barre doutils de navigation dans Bootstrap ? Une brève analyse sur lutilisation du composant Navbar

2.5 文本

透过.navbar-text导航条可以包含一些文本。该class调整了文本字串的垂直对齐和水平间距。貌似这个用的不多，直接拿官方例子。

<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>

Copier après la connexion

Comment ajouter une barre doutils de navigation dans Bootstrap ? Une brève analyse sur lutilisation du composant Navbar

根据需要与其他元件和通用类别混合使用。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Features</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Pricing</a>
  </li>
</ul>
<span class="navbar-text">
  Navbar text with an inline element
</span>
</div>
</div>
</nav>

Copier après la connexion

1Comment ajouter une barre doutils de navigation dans Bootstrap ? Une brève analyse sur lutilisation du composant Navbar

3 配色方案

由于主题class和background-color通用类别class的结合，主题化导航条从未如此简单。从navbar-light选用浅色背景颜色，或者navbar-dark用于深色背景颜色。然后，使用.bg-*通用类别自定义。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
      <div>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
          <div>
            <a href="#">品牌</a>
            <button type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
              <span></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarColor01">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li>
                  <a class="nav-link active" aria-current="page" href="#">首页</a>
                </li>
                <li>
                  <a href="#">功能</a>
                </li>
                <li>
                  <a href="#">价格</a>
                </li>
                <li>
                  <a href="#">关于</a>
                </li>
              </ul>
              <form>
                <input class="form-control me-2" type="search" placeholder="输入关键词" aria-label="Search">
                <button class="btn btn-outline-light text-nowrap" type="submit">搜索</button>
              </form>
            </div>
          </div>
        </nav>
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
          <div>
            <a href="#">品牌</a>
            <button type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
              <span></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarColor02">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li>
                  <a class="nav-link active" aria-current="page" href="#">首页</a>
                </li>
                <li>
                  <a href="#">功能</a>
                </li>
                <li>
                  <a href="#">价格</a>
                </li>
                <li>
                  <a href="#">关于</a>
                </li>
              </ul>
              <form>
                <input class="form-control me-2" type="search" placeholder="输入关键词" aria-label="Search">
                <button class="btn btn-outline-light text-nowrap" type="submit">搜索</button>
              </form>
            </div>
          </div>
        </nav>
        <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
          <div>
            <a href="#">品牌</a>
            <button type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
              <span></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarColor03">
              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li>
                  <a class="nav-link active" aria-current="page" href="#">首页</a>
                </li>
                <li>
                  <a href="#">功能</a>
                </li>
                <li>
                  <a href="#">价格</a>
                </li>
                <li>
                  <a href="#">关于</a>
                </li>
              </ul>
              <form>
                <input class="form-control me-2" type="search" placeholder="输入关键词" aria-label="Search">
                <button class="btn btn-outline-primary text-nowrap" type="submit">搜索</button>
              </form>
            </div>
          </div>
        </nav>
      </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Copier après la connexion

1Comment ajouter une barre doutils de navigation dans Bootstrap ? Une brève analyse sur lutilisation du composant Navbar

更多颜色在通用类>背景颜色中查看，在前面章节表格颜色中也有相关介绍。

4 容器

虽然不是必需的，但您可以把导航条包装在.container中，将其置中于页面。您可以使用任意响应式容器以更改导航条中内容的显示宽度。这部分内容比较简单，我就不在演示了。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-md">
<a class="navbar-brand" href="#">Navbar</a>
</div>
</nav>

Copier après la connexion

5 定位

使用我们的定位通用类别将导航条放置在非静态位置。选择固定到顶部、固定到底部、或粘贴到顶部（会随着页面滚动，直到物件达到顶部，并停留在原处）。固定的导航条使用position:fixed，这意味着它们会脱离正常的DOM的文件流，并且可能需要自定义CSS（例如body上的padding-top），以防止与其他元素重叠。还要注意.sticky-top使用position:sticky，并没有被所有浏览器支持。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <nav class="navbar navbar-light bg-light">
                <div>
                <a href="#">默认</a>
                </div>
            </nav>

            <nav class="navbar fixed-top navbar-light bg-light">
                <div>
                <a href="#">固定到顶部</a>
                </div>
            </nav>

            <nav class="navbar fixed-bottom navbar-light bg-light">
                <div>
                <a href="#">固定到底部</a>
                </div>
            </nav>

            <nav class="navbar sticky-top navbar-light bg-light">
                <div>
                <a href="#">粘贴到顶部</a>
                </div>
            </nav>
            
            <div style="height: 600px;"></div>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Copier après la connexion

1Comment ajouter une barre doutils de navigation dans Bootstrap ? Une brève analyse sur lutilisation du composant Navbar

向下拉动滚动条后变化

1Comment ajouter une barre doutils de navigation dans Bootstrap ? Une brève analyse sur lutilisation du composant Navbar

通过上面的例子我们可以看出

固定到顶部和固定到底部虽然在container内，但是效果上不会受影响，其宽度超出了container限制。
使用了固定到顶部后，默认导航条会自动排在其后。
粘贴到顶部会自动跟在已有可视元素后面
当拖动滚定条后，固定到顶部和固定到底部位置不变，但默认和粘贴到顶部会被拖上去。

6 滚动

添加.navbar-nav-scroll到 .navbar-nav （或其他navbar子组件），以在折叠的navbar的可切换内容内启用垂直滚动。默认情况下，滚动以75vh（或75%的视口高度）启动，但您可以使用本地CSS自定义属性（--bs-navbar-height或自定义风格）覆盖该属性。在较大的视口中，当导航栏展开时，内容将显示为默认导航栏中的内容。

请注意，当设置overflow-y:auto（需要在此处滚动内容）时，这种行为可能会带来溢出的缺点，overflow-x相当于auto，它将裁剪一些水平内容。

以上是手册对此内容的解释，啰嗦了很多，其实很简单，直接看效果图就好了，说白了就是强制在移动状态下点击三道横线出现一个滚动条，俺老刘觉得这纯属多事。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar scroll</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
      Link
    </a>
    <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Link</a>
  </li>
</ul>
<form class="d-flex">
  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>

Copier après la connexion

1Comment ajouter une barre doutils de navigation dans Bootstrap ? Une brève analyse sur lutilisation du composant Navbar

7 响应性行为

导航条可以使用.navbar-toggler，.navbar-collapse和.navbar-expand{-sm|-md|-lg|-xl}决定它们的内容何时会摺叠。结合其他通用类别，您可以选择何时显示或隐藏特定元素。

对于不需要折叠的导航条，在导航条中加入.navbar-expand。对于总是折叠的导航条，不要加任何.navbar-expand class。

8 切换元素

导航条的切换元素（toggler）预设情况下会对齐左边，但如果它们位于同层级的.navbar-brand后面，它们将自动和最右边对齐。反转您的标记将对调切换元素的位置。以下是不同切换元素样式的示例。

8.1 在最小断点没有.navbar-brand：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<form class="d-flex">
  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>

Copier après la connexion

1Comment ajouter une barre doutils de navigation dans Bootstrap ? Une brève analyse sur lutilisation du composant Navbar

8.2 在最小断点左侧有一个品牌名称，右边是切换元素：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<form class="d-flex">
  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>

Copier après la connexion

1Comment ajouter une barre doutils de navigation dans Bootstrap ? Une brève analyse sur lutilisation du composant Navbar

8.3 在最小断点左侧有一个切换元素，右边是品牌名称

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>
<form class="d-flex">
  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
  <button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>

Copier après la connexion

1Comment ajouter une barre doutils de navigation dans Bootstrap ? Une brève analyse sur lutilisation du composant Navbar

8.3 外部内容

有时会需要使用折叠插件来触发位于.navbar外的容器内容。因为插件是透过匹配id和data-bs-target来执行的，这将很容易完成！这个很有意思，给个完整代码，自己试试看。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>导航演示</title>
  </head>
  <body>
      <br><br>
        <div>
            <div id="navbarToggleExternalContent">
                <div class="bg-dark p-4">
                <h5 class="text-white h4">Collapsed content</h5>
                <span>Toggleable via the navbar brand.</span>
                </div>
                </div>
                <nav class="navbar navbar-dark bg-dark">
                <div>
                <button type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
                <span></span>
                </button>
                </div>
            </nav>
        </div>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

Copier après la connexion

今天的课程就到这里，。请关注我，及时学习俺老刘原创的《Bootstrap5零基础到精通》第14节 Bootstrap5滑动导航组件使用。

如果这篇文章对你有帮助，记得随手点赞哦！

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!