导航栏 | Navs

Navs

有关如何使用 Bootstrap 包含的导航组件的文档和示例。

基本导航

在Bootstrap中分享一些导航中可用的标记和风格, 从基础的 .nav 类中通过切换修饰符类以在可用和禁用状态之间切换。

基础的.nav 组件是用fiexbox组建的，为组建各种类型的导航组件提供坚实的基础。其包含一些样式的覆盖（用于处理列表），一些link有更大的padding并且禁用了一些基础样式。

基础的.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" href="#">Disabled</a>
  </li>
</ul>

类在整个页面中生效，因此你可以非常灵活的使用。像上面使用 <ul>, 或者用你自己的<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" href="#">Disabled</a>
</nav>

可用样式

通过改变修饰符和组件来改变.nav 的样式。根据需要自行搭配，或者使用自己创建的样式。

水平对齐

通过使用Flexbox来更改导航的水平对齐方式。默认情况下，导航是左对齐的，但您可以很容易地将它们更改为居中或右对齐。

居中 .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" href="#">Disabled</a>
  </li>
</ul>

优对齐 .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" href="#">Disabled</a>
  </li>
</ul>

垂直对齐

Stack your navigation by changing the flex item direction with the .flex-column utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., .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" href="#">Disabled</a>
  </li>
</ul>

当然，不用 <ul>也可以做到。

举个