前端必知必会-Bootstrap 5 导航栏Navbars

---

Bootstrap 5 导航栏

导航栏

导航栏是位于页面顶部的导航标题：

基本导航栏

使用 Bootstrap，导航栏可以根据屏幕大小展开或折叠。

使用 .navbar 类创建标准导航栏，后跟响应式折叠类：.navbar-expand-xxl|xl|lg|md|sm（在 xxlarge、超大、大、中或小屏幕上垂直堆叠导航栏）。

要在导航栏内添加链接，请使用带有 class=“navbar-nav” 的 <ul> 元素（或 <div>）。然后添加带有 .nav-item 类的<li>元素，后跟带有 .nav-link 类的 <a> 元素：

示例

<!-- 灰色水平导航栏，在小屏幕上变为垂直 -->
<nav class="navbar navbar-expand-sm bg-light">

<div class="container-fluid">
<!-- 链接 -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">链接 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接 3</a>
</li>
</ul>
</div>

</nav>

垂直导航栏

删除 .navbar-expand-* 类以创建始终垂直的导航栏：

示例

<!-- 灰色垂直导航栏 ​​-->
<nav class="navbar bg-light">
...
</nav>

居中导航栏

添加 .justify-content-center 类以使导航栏居中：

示例

<nav class="navbar navbar-expand-sm bg-light justify-content-center">
...
</nav>

彩色导航栏

使用任何 .bg-color 类来更改导航栏的背景颜色（.bg-primary， .bg-success、.bg-info、.bg-warning、.bg-danger、.bg-secondary、.bg-dark 和 .bg-light)

提示：使用 .navbar-dark 类为导航栏中的所有链接添加白色文本颜色，或使用 .navbar-light 类添加黑色文本颜色。

示例

<!-- 灰色，黑色文本 -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#"></