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

导航（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>

页面展示效果：

随着浏览器窗口变化，页面展示效果：