编辑于 Github

导航栏

Bootstrap强大的响应式导航标题，导航栏的文档和示例。包括对品牌，导航等的支持，包括对我们的折叠插件的支持。

这个怎么运作

在开始使用导航栏之前，您需要了解以下内容:

  • Navbars需要使用.navbar-expand {-sm | -md | -lg | -xl}包装.navbar以进行响应式折叠和[颜色方案]（＃颜色方案）类。
  • 默认情况下，Navbars及其内容是流畅的。 使用[可选容器]（＃containers）限制其水平宽度。
  • 使用我们的[spacing]（{{site.baseurl}} / docs / {{site.docs_version}} / utilities / spacing /）和[flex]（{{site.baseurl}} / docs / {{site.docs_version} / utilities / flex /）用于控制导航栏中间距和对齐的实用程序类。
  • 默认情况下，导航栏会响应，但您可以轻松修改它们以更改它。 响应行为取决于我们的Collapse JavaScript插件。
  • 打印时默认隐藏导航栏。 通过将.d-print添加到.navbar来强制打印它们。 请参阅[display]（{{site.baseurl}} / docs / {{site.docs_version}} / utilities / display /）实用程序类。
  • 通过使用<nav>元素确保可访问性，或者，如果使用更通用的元素（如<div>），则为每个导航栏添加一个`role =“navigation”以明确地将其标识为用户的标志性区域 辅助技术。

继续阅读示例和支持的子组件列表。

导航

Navbar导航链接使用自己的修饰符类构建我们的.nav选项，并且需要使用[toggler classes]（#toggler）来实现正确的响应式样式。导航栏中的导航也将增长到占用尽可能多的水平空间，以保持导航栏内容安全对齐。

活动状态 - 使用.active-表示当前页面可以直接应用于.nav-links或它们的直接父.nav-items。

<nav class="navbar navbar-expand-lg bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">导航栏</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">家 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">特征</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">价钱</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">残障人士</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

您还可以在导航栏导航中使用下拉列表。下拉菜单需要一个包装元素进行定位，因此请务必使用.nav-item和.nav-link的单独和嵌套元素，如下所示。

<nav class="navbar navbar-expand-lg bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">导航栏</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">家 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" 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="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    下拉链接
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#">行动</a>
            <a class="dropdown-item" href="#">另一个动作</a>
            <a class="dropdown-item" href="#">还有别的什么</a>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

形式

使用.form-inline在导航栏中放置各种表单控件和组件。

<nav class="navbar navbar-expand-lg bg-primary">
    <div class="container">
        <div class="navbar-translate">
            <a class="navbar-brand" href="/presentation.html">牌</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                <span class="navbar-toggler-icon"></span>
                <span class="navbar-toggler-icon"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a href="#pablo" class="nav-link">link</a>
                </li>
                <li class="nav-item">
                    <a href="#pablo" class="nav-link">link</a>
                </li>
            </ul>

            <form class="form-inline ml-auto">
                <div class="form-group no-border">
                  <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-just-icon btn-round">
                  <i class="material-icons">search</i>
                </button>
            </form>
        </div>
    </div>
</nav>

文本

Navbars可以在.navbar-text的帮助下包含一些文本。此类调整文本字符串的垂直对齐和水平间距。

<nav class="navbar navbar-dark bg-primary">
  <div class="container">
    <span class="navbar-text">
       内联元素
    </span>
  </div>
</nav>
<nav class="navbar navbar-expand-lg bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar with Text</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">家 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">特征</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">价钱</a>
        </li>
      </ul>
      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </div>
</nav>

配色方案

由于主题类和background-color实用程序的组合，主题导航栏从未如此简单。选择.navbar-light用于浅色背景颜色，或.navbar-dark用于深色背景颜色。然后，用`.bg-自定义

<nav class="navbar navbar-expand-lg bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-expand-lg bg-success">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-expand-lg bg-danger">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-expand-lg bg-warning">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-expand-lg bg-white">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-expand-lg bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-expand-lg bg-info">
  <!-- Navbar content -->
</nav>

集装箱

当容器位于导航栏中时，其水平填充将在低于指定的`.navbar-expand {-sm -md -lg -xl}类的断点处移除。这可确保在导航栏折叠时，我们不会在较低视口上不必要地填充填充。 
<nav class="navbar navbar-expand-lg navbar-light bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">导航栏</a>
  </div>
</nav>

放置

使用我们的[位置实用程序]（{{site.baseurl}} docs {{site.docs_version}}实用程序位置）将导航栏放置在非静态位置。选择固定到顶部，固定到底部，或粘贴到顶部（滚动页面，直到它到达顶部，然后停留在那里）。固定的导航栏使用position：fixed，这意味着它们是从DOM的正常流程中拉出来的，并且可能需要自定义CSS（例如，<body>上的padding-top）以防止与其他元素重叠。

还要注意.sticky-top使用position：sticky，[在每个浏览器中都不完全支持]（https://caniuse.com/#feat=css-sticky）

<nav class="navbar navbar-light bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">默认</a>
  </div>
</nav>
<nav class="navbar fixed-top navbar-light bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">固定 最佳</a>
  </div>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">固定 底部</a>
  </div>
</nav>
<nav class="navbar sticky-top navbar-light bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">黏 最佳</a>
  </div>
</nav>

反应行为

Navbars可以利用.navbar-toggler，.navbar-collapse和`.navbar-expand {-sm -md -lg -xl}类来改变它们的内容在按钮后面的崩溃。与其他实用程序结合使用，您可以轻松选择何时显示或隐藏特定元素。

Toggler

默认情况下，Navbar切换器是左对齐的，但是如果它们遵循像.navbar-brand这样的兄弟元素，它们将自动对齐到最右边。反转标记将反转切换器的位置。以下是不同切换样式的示例。

在最低断点处没有显示.navbar-brand

<nav class="navbar navbar-expand-lg bg-primary">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">隐 牌</a>
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active">
          <a class="nav-link" href="#">家 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">残障人士</a>
        </li>
      </ul>
      <form class="form-inline ml-auto">
          <div class="form-group has-white">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-neutral btn-icon btn-round">
              <i class="material-icons">搜索</i>
          </button>
      </form>
    </div>
  </div>
</nav>

左侧显示品牌名称，右侧显示切换器

<nav class="navbar navbar-expand-lg bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">导航栏</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active">
          <a class="nav-link" href="#">家 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline ml-auto">
          <div class="form-group no-border">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-neutral btn-icon btn-round">
              <i class="material-icons">search</i>
          </button>
      </form>
    </div>
  </div>
</nav>

左侧有一个切换器，右侧有品牌名称

<nav class="navbar navbar-expand-lg bg-primary">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    <span class="navbar-toggler-bar navbar-kebab"></span>
    </button>
    <a class="navbar-brand" href="#">导航栏</a>

    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active">
          <a class="nav-link" href="#">家 <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">残障人士</a>
        </li>
      </ul>
      <form class="form-inline ml-auto">
          <div class="form-group no-border">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-neutral btn-icon btn-round">
              <i class="material-icons">search</i>
          </button>
      </form>
    </div>
  </div>
</nav>