Bootstrap 4参考手册

组件·导航栏 | Navbar

导航栏 | Navbar

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

怎么运行的

以下是开始使用导航栏之前需要了解的内容：

导航栏需要用.navbar-expand{-sm|-md|-lg|-xl}包装.navbar的响应倒塌和颜色方案的类。

导航栏及其内容默认为流畅的。使用可选容器限制其水平宽度。

使用我们的间距和柔性工具类来控制 navbars 中的间距和对齐。

导航栏默认情况下是响应式的，但您可以轻松修改它们来改变它。响应行为取决于我们的 Collapse JavaScript 插件。

打印时，导航栏默认为隐藏状态。强制他们打印通过添加.d-print到.navbar。请参阅显示实用程序类。

确保使用<nav>元素的可访问性，或者如果使用更通用的元素，如<div>，请将每个导航栏添加role="navigation"为明确标识为辅助技术用户的地标区域。

请阅读有关支持的子组件的示例和列表。

支持的内容

Navbars 内置了对少数子组件的支持。根据需要选择：

.navbar-brand 为您的公司，产品或项目名称。

.navbar-nav 用于全高和轻量级导航（包括对下拉菜单的支持）。

.navbar-toggler 用于我们的折叠插件和其他导航切换行为。

.form-inline 用于任何形式控制和操作。

.navbar-text 用于添加垂直居中的文本字符串。

.collapse.navbar-collapse 通过父断点来分组和隐藏导航栏内容。

下面是一个响应式光主题导航栏中包含的所有子组件的示例，该导航栏在lg（大）断点处自动崩溃。

在 getbootstrap.com 上打开示例

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

本例使用的颜色（bg-light）和间距（my-2，my-lg-0，mr-sm-0，my-sm-0）的工具类。

品牌

.navbar-brand可应用于大部分元素，但是锚效果最好的一些元素可能需要的工具类或自定义样式。

在 getbootstrap.com 上打开示例

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <span class="navbar-brand mb-0 h1">Navbar</span>
</nav>

将图像添加到.navbar-brand可能总是需要自定义样式或实用程序才能适当调整大小。下面是一些要演示的示例。

在 getbootstrap.com 上打开示例

<!-- Just an image -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
  </a>
</nav>

在 getbootstrap.com 上打开示例

<!-- Image and text -->
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

NAV

Navbar 导航链接基于我们的.nav选项和他们自己的修饰符类，并且需要使用切换器类来提供正确的响应式样式。导航栏中的导航也将越来越占用尽可能多的水平空间，以保持导航栏内容的安全对齐。

活动状态.active- 指示当前页面可以直接应用于.nav-links或其直接父级.nav-item。

在 getbootstrap.com 上打开示例

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</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-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

而且因为我们为导航使用类，所以如果您愿意，可以完全避免使用基于列表的方法。

在 getbootstrap.com 上打开示例

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#">Disabled</a>
    </div>
  </div>
</nav>

您也可以在导航栏导航中使用下拉菜单。下拉菜单需要用于定位的缠绕元件，所以一定要使用单独的和嵌套的元素.nav-item和.nav-link，如下所示。

在 getbootstrap.com 上打开示例

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</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-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</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">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

形式

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

在 getbootstrap.com 上打开示例

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

根据需要将内联表单的内容与实用程序对齐。

在 getbootstrap.com 上打开示例

<nav class="navbar navbar-light bg-light justify-content-between">
  <a class="navbar-brand">Navbar</a>
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

输入组也可以工作：

在 getbootstrap.com 上打开示例

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <div class="input-group">
      <span class="input-group-addon" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

作为这些导航栏形式的一部分，也支持各种按钮。这也是一个很好的提示，即垂直对齐工具可以用来对齐不同大小的元素。

在 getbootstrap.com 上打开示例

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <button class="btn btn-outline-success" type="button">Main button</button>
    <button class="btn btn-sm align-middle btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

文本

导航栏可能会在.navbar-text帮助下包含一些文本。该类为文本字符串调整垂直对齐和水平间距。

在 getbootstrap.com 上打开示例

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

根据需要混合并匹配其他组件和实用程序。

在 getbootstrap.com 上打开示例

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar w/ 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-icon"></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="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

配色方案

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

在 getbootstrap.com 上打开示例

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

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

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

容器

尽管这不是必需的，但您可以将导航栏包装.container到一个页面中，也可以在其中添加一个，以便仅将固定顶部导航栏或静态顶部导航栏的内容居中。

在 getbootstrap.com 上打开示例

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
  </nav>
</div>

当容器在导航栏中时，其横向填充将在低于指定.navbar-expand{-sm|-md|-lg|-xl}类别的断点处移除。这可以确保在导航栏折叠时，我们不会在较低视口上不必要地加倍填充。

在 getbootstrap.com 上打开示例

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

放置

使用我们的位置公用程序将导航栏放置在非静态位置。从固定到顶部，固定到底部或粘到顶部（与页面滚动直到到达顶部，然后停留在那里）。固定导航栏使用position: fixed，这意味着他们从 DOM 的正常流动和拉可能需要自定义的 CSS（例如，padding-top上<body>），以防止重叠与其他元素。

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

在 getbootstrap.com 上打开示例

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Default</a>
</nav>

在 getbootstrap.com 上打开示例

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

在 getbootstrap.com 上打开示例

<nav class="navbar fixed-bottom navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

在 getbootstrap.com 上打开示例

<nav class="navbar sticky-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Sticky top</a>
</nav>

响应行为

当他们的内容在按钮后面崩溃时，导航栏可以利用.navbar-toggler，.navbar-collapse和.navbar-expand{-sm|-md|-lg|-xl}类进行更改。结合其他实用程序，您可以轻松选择何时显示或隐藏特定元素。

对于永不崩溃.navbar-expand的导航栏，请在导航栏上添加该类。对于总是崩溃的导航栏，请勿添加任何.navbar-expand课程。

Toggler

Navbar 的切换器默认是左对齐的，但是它们应该像一个.navbar-brand一样遵循一个兄弟元素，它们会自动对齐到最右边。反转你的标记会颠倒切换器的位置。以下是不同切换样式的示例。

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

在 getbootstrap.com 上打开示例

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <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-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

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

在 getbootstrap.com 上打开示例

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</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-icon"></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="#">Home <span class="sr-only">(current)</span></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>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

在左边有一个触发器，右边是品牌名称：

在 getbootstrap.com 上打开示例

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <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-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</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="#">Home <span class="sr-only">(current)</span></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>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

外部内容

有时您想使用折叠插件触发页面上其他地方的隐藏内容。因为我们的插件适用于id和data-target匹配，这很容易完成！

在 getbootstrap.com 上打开示例

<div class="pos-f-t">
  <div class="collapse" id="navbarToggleExternalContent">
    <div class="bg-dark p-4">
      <h4 class="text-white">Collapsed content</h4>
      <span class="text-muted">Toggleable via the navbar brand.</span>
    </div>
  </div>
  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </nav>
</div>

组件·导航栏 | Navbar相关

Bootstrap 4

Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。

主页	https://getbootstrap.com/
源码	https://github.com/twbs/bootstrap
版本	4
发布版本	4.0.0-beta.2

Bootstrap 4目录

1.快速开始 \| Getting started
2.组件·信息提示框 \| Alerts
3.组件·徽章 \| Badges
4.组件·面包屑导航 \| Breadcrumb
5.组件·按钮组 \| Button group
6.组件·按钮 \| Buttons
7.组件·卡片 \| Cards
8.组件·轮播 \| Carousel
9.组件·折叠 \| Collapse
10.组件·下拉菜单 \| Dropdowns
11.组件·表单 \| Forms
12.组件·输入框组 \| Input group
13.组件·大屏幕 \| Jumbotron
14.组件·列表组 \| List group
15.组件·模态框 \| Modal
16.组件·导航栏 \| Navbar
17.组件·导航 \| Navs
18.组件·分页 \| Pagination
19.组件·弹出框 \| Popovers
20.组件·进度条 \| Progress
21.组件·滚动监听 \| Scrollspy
22.组件·提示工具 \| Tooltips
23.内容 \| Content
24.布局 \| Layout
25.迁移 \| Migration
26.实用工具 \| Utilities
27.Bootstrap4 网格系统
28.Bootstrap4 按钮组
29.Bootstrap4 按钮
30.Bootstrap4 图像形状
31.Bootstrap4 表格
32.Bootstrap4 颜色
33.Bootstrap4 文字排版
34.Bootstrap4 轮播
35.Bootstrap4 表单控件
36.Bootstrap4 表单
37.Bootstrap4 导航栏
38.Bootstrap4 导航
39.Bootstrap4 折叠
40.Bootstrap4 下拉菜单
41.Bootstrap4 卡片
42.Bootstrap4 分页
43.Bootstrap4 小工具
44.Bootstrap4 滚动监听
45.Bootstrap4 弹出框
46.Bootstrap4 提示框
47.Bootstrap4 模态框
48.Bootstrap 4 多媒体对象
49.Bootstrap 4 Flex（弹性）布局
50.Bootstrap4 创建一个网页
51.Bootstrap4 自定义表单
52.Bootstrap4 面包屑导航（Breadcrumb）