当前位置：首页 > news >正文

【Bootstrap V4系列】学习入门教程之组件-导航（Navs）

news 来源：原创 2025/7/5 13:58:02

【Bootstrap V4系列】学习入门教程之组件-导航（Navs）

导航（Navs）
- 一、Base nav
- 二、Available styles 可用样式
- - 2.1 Horizontal alignment 水平对齐
  - 2.2 Vertical 垂直的
  - 2.3 Tabs 表格样式
  - 2.4 Pills 胶囊样式
  - 2.5 Fill and justify 填充并调整对齐
- 三、Working with flex utilities 使用flex实用程序

导航（Navs）

如何使用Bootstrap附带的导航组件的文档和示例。

一、Base nav

Bootstrap中的导航共享通用标记和样式，从base.nav类到活动和禁用状态。交换修改器类以在每种样式之间切换。

base.nav组件是用flexbox构建的，为构建所有类型的导航组件提供了坚实的基础。它包括一些样式覆盖（用于处理列表），一些用于较大命中区域的链接填充，以及基本的禁用样式。

base.nav组件不包含任何.active状态。以下示例包括该类，主要是为了证明该特定类不会触发任何特殊样式。

<ul class="nav"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
</ul>

页面展示效果：

在这里插入图片描述

类贯穿始终，因此您的标记可以非常灵活。使用上面的<ul>s，如果你的项目顺序很重要，可以使用<ol>，或者用<nav>元素滚动。因为.nav使用display:flex，所以导航链接的行为与导航项目相同，但没有额外的标记。

<nav class="nav"><a class="nav-link active" href="#">Active</a><a class="nav-link" href="#">Link</a><a class="nav-link" href="#">Link</a><a class="nav-link disabled">Disabled</a>
</nav>

页面展示效果：

在这里插入图片描述

二、Available styles 可用样式

2.1 Horizontal alignment 水平对齐

使用flexbox实用程序更改导航的水平对齐。默认情况下，导航是左对齐的，但您可以轻松地将其更改为居中或右对齐。

Centered with .justify-content-center:

<ul class="nav justify-content-center"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
</ul>

页面展示效果：

在这里插入图片描述

Right-aligned with .justify-content-end:

<ul class="nav justify-content-end"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
</ul>

在这里插入图片描述

2.2 Vertical 垂直的

通过使用.flex-column 列实用程序更改flex项方向来堆叠导航。需要将它们堆叠在某些视口上，而不是其他视口上？使用响应式版本（例如.flex-sm-column）。

<ul class="nav flex-column"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
</ul>

页面展示效果：

在这里插入图片描述

与往常一样，垂直导航也可以在没有<ul>s的情况下进行。

<nav class="nav flex-column"><a class="nav-link active" href="#">Active</a><a class="nav-link" href="#">Link</a><a class="nav-link" href="#">Link</a><a class="nav-link disabled">Disabled</a>
</nav>

2.3 Tabs 表格样式

从上面获取基本的nav，并添加.nav-tabs 类以生成选项卡式界面。使用它们通过我们的标签JavaScript插件创建标签区域。

<ul class="nav nav-tabs"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
</ul>

页面展示效果：

在这里插入图片描述

2.4 Pills 胶囊样式

使用相同的HTML，但使用.nav-pills ：

<ul class="nav nav-pills"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
</ul>

页面展示效果：

在这里插入图片描述

2.5 Fill and justify 填充并调整对齐

强制.nav的内容扩展两个修饰符类中的一个的全部可用宽度。要使用.nav项按比例填充所有可用空间，请使用.nav-fill。请注意，所有水平空间都已占用，但并非每个导航项目的宽度都相同。

<ul class="nav nav-pills nav-fill"><li class="nav-item"><a class="nav-link active" href="#">Active</a></li><li class="nav-item"><a class="nav-link" href="#">Much longer nav link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
</ul>

页面展示效果：

在这里插入图片描述

对于等宽元素，使用.nav-justified 对齐。所有水平空间都将被导航链接占据，但与上面的.nav-fill填充不同，每个导航项目的宽度都是相同的。

<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="#">Much longer nav link</a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
</ul>

页面展示效果：

在这里插入图片描述

三、Working with flex utilities 使用flex实用程序

如果你需要响应式导航变体，可以考虑使用一系列flexbox实用程序。虽然更详细，但这些实用程序在响应断点之间提供了更大的定制。在下面的示例中，我们的导航将堆叠在最低的断点上，然后适应从小断点开始填充可用宽度的水平布局。

<nav class="nav nav-pills flex-column flex-sm-row"><a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a><a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a><a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a><a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
</nav>

页面展示效果：

在这里插入图片描述

随着浏览器窗口变化，页面展示效果：
在这里插入图片描述

【Bootstrap V4系列】学习入门教程之 组件-导航（Navs）

导航（Navs）

一、Base nav

二、Available styles 可用样式

2.1 Horizontal alignment 水平对齐

2.2 Vertical 垂直的

2.3 Tabs 表格样式

2.4 Pills 胶囊样式

2.5 Fill and justify 填充并调整对齐

三、Working with flex utilities 使用flex实用程序

相关文章：

【Bootstrap V4系列】学习入门教程之组件-导航（Navs）