导航栏(navbar)

导航栏是一个将商标、导航以及别的元素简单放置到一个简洁导航页头的容器代码组合，它很容易扩展，而且在折叠板插件的帮助下，它可以轻松与其它内容整合。

运行原理

这些是你开始使用导航条之前需要知道的东西：

  • 导航栏需要使用.navbar 来定义，并使用 .navbar-expand{-sm|-md|-lg|-xl} 用于响应式布局以及使用配色方案Class 。
  • 导航栏默认内容是流式的，使用 containers容喇来限制它们的水平宽度。
  • 使用我们提供的 间隙间距 和 flex 布局 classes 来定义导航栏中元素的间距和对齐。
  • Navbars导航栏默认支持响应式，在修改上也很容易，你可以使用轻松的来定义它们-这取决于我们提供的 JavaScript 插件。
  • 打印时，导航栏默认隐藏。如果需要打印显示，可以加入.d-print 样式到 .navbar中，点此参阅 display块元素 通用 class定义。
  • 使用<nav>导航通用元素来确保可访问性（易用性），或者如果使用更通用的元素，例如<div>添加一个role="navigation"，可以为使用者的辅助浏览提供明确标识。

此组件的动画效果取决于prefers-reduced-motion 媒体查询. 请参阅我们的 辅助功能文档的简化动作部分.

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

支持的内容

Navbar导航栏内置支持少量子组件。根据需要从以下选择：:

  • .navbar-brand 为您的公司，产品或项目名称。
  • .navbar-nav 提供完整的高和轻便的导航（包括对下拉菜单的支持）。
  • .navbar-toggler 用於我們的折疊插件和其他 navigation toggling 行為。
  • .form-inline 用于任何表单控件和操作。
  • .navbar-text 用于添加垂直居中的文本字符串。
  • .collapse.navbar-collapse用于通过父断点进行分组和隐藏导航列内容。
    以下是一个自动在 lg（大）断点处的自动响应轻型导航栏中包含的所有子组件的示例。

导航栏(Navbar) - 图1

  1. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  2.   <a class="navbar-brand" href="#">Navbar</a>
  3.   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  4.     <span class="navbar-toggler-icon"></span>
  5.   </button>
  7.   <div class="collapse navbar-collapse" id="navbarSupportedContent">
  8.     <ul class="navbar-nav mr-auto">
  9.       <li class="nav-item active">
  10.         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  11.       </li>
  12.       <li class="nav-item">
  13.         <a class="nav-link" href="#">Link</a>
  14.       </li>
  15.       <li class="nav-item dropdown">
  16.         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  17.           Dropdown
  18.         </a>
  19.         <div class="dropdown-menu" aria-labelledby="navbarDropdown">
  20.           <a class="dropdown-item" href="#">Action</a>
  21.           <a class="dropdown-item" href="#">Another action</a>
  22.           <div class="dropdown-divider"></div>
  23.           <a class="dropdown-item" href="#">Something else here</a>
  24.         </div>
  25.       </li>
  26.       <li class="nav-item">
  27.         <a class="nav-link disabled" href="#">Disabled</a>
  28.       </li>
  29.     </ul>
  30.     <form class="form-inline my-2 my-lg-0">
  31.       <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
  32.       <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  33.     </form>
  34.   </div>
  35. </nav>

This example uses color (bg-light) and spacing (my-2, my-lg-0, mr-sm-0, my-sm-0) utility classes.

品牌

.navbar-brand 可以用于大多数元素，但对于链接最有效，因为某些元素可能需要通用样式类别class或自定义样式。

导航栏(Navbar) - 图2

  1. <!-- As a link -->
  2. <nav class="navbar navbar-light bg-light">
  3.   <a class="navbar-brand" href="#">Navbar</a>
  4. </nav>
  6. <!-- As a heading -->
  7. <nav class="navbar navbar-light bg-light">
  8.   <span class="navbar-brand mb-0 h1">Navbar</span>
  9. </nav>

如果你喜欢，可以完全不使用列表法来做导航。

导航栏(Navbar) - 图3

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

导航栏(Navbar) - 图4

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

nav导航

导航栏链接建立在我们的.nav上，享有使用专属的class样式，并可以使用toggler切换触发器来进行响应式切换，在导航栏中的元件，也装饰占用更多的水平空间，以保持导览列内容安全对齐。

活动状态指示：用 .active表示当前页面，可直接应用于.nav-link或 .nav-item上。

导航栏(Navbar) - 图5

  1. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  2.   <a class="navbar-brand" href="#">Navbar</a>
  3.   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  4.     <span class="navbar-toggler-icon"></span>
  5.   </button>
  6.   <div class="collapse navbar-collapse" id="navbarNav">
  7.     <ul class="navbar-nav">
  8.       <li class="nav-item active">
  9.         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  10.       </li>
  11.       <li class="nav-item">
  12.         <a class="nav-link" href="#">Features</a>
  13.       </li>
  14.       <li class="nav-item">
  15.         <a class="nav-link" href="#">Pricing</a>
  16.       </li>
  17.       <li class="nav-item">
  18.         <a class="nav-link disabled" href="#">Disabled</a>
  19.       </li>
  20.     </ul>
  21.   </div>
  22. </nav>

如果你喜欢（或有需要），也可以不使用ul、ol式的列（直接用A其它元素作为列表子项-译者注)。

导航栏(Navbar) - 图6

  1. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  2.   <a class="navbar-brand" href="#">Navbar</a>
  3.   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
  4.     <span class="navbar-toggler-icon"></span>
  5.   </button>
  6.   <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
  7.     <div class="navbar-nav">
  8.       <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
  9.       <a class="nav-item nav-link" href="#">Features</a>
  10.       <a class="nav-item nav-link" href="#">Pricing</a>
  11.       <a class="nav-item nav-link disabled" href="#">Disabled</a>
  12.     </div>
  13.   </div>
  14. </nav>

您还可以在导航栏中使用下拉列表，下拉菜单最好使用一个菜单进行位置定位包裹，请确保使用单独的元素嵌套.nav-item 和 .nav-link，如下所示。

导航栏(Navbar) - 图7

  1. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  2.   <a class="navbar-brand" href="#">Navbar</a>
  3.   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
  4.     <span class="navbar-toggler-icon"></span>
  5.   </button>
  6.   <div class="collapse navbar-collapse" id="navbarNavDropdown">
  7.     <ul class="navbar-nav">
  8.       <li class="nav-item active">
  9.         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  10.       </li>
  11.       <li class="nav-item">
  12.         <a class="nav-link" href="#">Features</a>
  13.       </li>
  14.       <li class="nav-item">
  15.         <a class="nav-link" href="#">Pricing</a>
  16.       </li>
  17.       <li class="nav-item dropdown">
  18.         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  19.           Dropdown link
  20.         </a>
  21.         <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
  22.           <a class="dropdown-item" href="#">Action</a>
  23.           <a class="dropdown-item" href="#">Another action</a>
  24.           <a class="dropdown-item" href="#">Something else here</a>
  25.         </div>
  26.       </li>
  27.     </ul>
  28.   </div>
  29. </nav>

Form表单

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

导航栏(Navbar) - 图8

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

根据需要将内联表单引用系统提供的内容与对齐等class样式。

导航栏(Navbar) - 图9

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

还可以引用input-group输入框组控件：

导航栏(Navbar) - 图10

  1. <nav class="navbar navbar-light bg-light">
  2.   <form class="form-inline">
  3.     <div class="input-group">
  4.       <div class="input-group-prepend">
  5.         <span class="input-group-text" id="basic-addon1">@</span>
  6.       </div>
  7.       <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
  8.     </div>
  9.   </form>
  10. </nav>

有的导航中需要用到各种按钮，可以使用通用样式Class来作居中对齐处理。

导航栏(Navbar) - 图11

  1. <nav class="navbar navbar-light bg-light">
  2.   <form class="form-inline">
  3.     <button class="btn btn-outline-success" type="button">Main button</button>
  4.     <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  5.   </form>
  6. </nav>

Text文本处理

可以使用.navbar-text选择器来包裹文字-这已经对文本字符串的垂直对齐、水平间距作了处理优化。

导航栏(Navbar) - 图12

  1. <nav class="navbar navbar-light bg-light">
  2.   <span class="navbar-text">
  3.     Navbar text with an inline element
  4.   </span>
  5. </nav>

根据需要与其它元件或通用样式定义组合使用。

导航栏(Navbar) - 图13

  1. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  2.   <a class="navbar-brand" href="#">Navbar w/ text</a>
  3.   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
  4.     <span class="navbar-toggler-icon"></span>
  5.   </button>
  6.   <div class="collapse navbar-collapse" id="navbarText">
  7.     <ul class="navbar-nav mr-auto">
  8.       <li class="nav-item active">
  9.         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  10.       </li>
  11.       <li class="nav-item">
  12.         <a class="nav-link" href="#">Features</a>
  13.       </li>
  14.       <li class="nav-item">
  15.         <a class="nav-link" href="#">Pricing</a>
  16.       </li>
  17.     </ul>
  18.     <span class="navbar-text">
  19.       Navbar text with an inline element
  20.     </span>
  21.   </div>
  22. </nav>

Color颜色选择器(配色方案)

基于主题类class和background-color通用样式class定义，导航栏的配色方案和主题选择从未如此简单！你可以选择.navbar-light 来定义导航颜色反转（强黑白对比），也可以使用.navbar-dark用于深色背景定义，然后再引用.bg-*类通用定义来进行大小处理。

导航栏(Navbar) - 图14

  1. <nav class="navbar navbar-dark bg-dark">
  2.   <!-- Navbar content -->
  3. </nav>
  5. <nav class="navbar navbar-dark bg-primary">
  6.   <!-- Navbar content -->
  7. </nav>
  9. <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  10.   <!-- Navbar content -->
  11. </nav>

.Container主内容-容器

你可以把导航条包裹在一个 .container容器中，从而使之在网页中呈现居中效果（或在导航栏内部居中）—虽然这不是强制的。

导航栏(Navbar) - 图15

  1. <div class="container">
  2.   <nav class="navbar navbar-expand-lg navbar-light bg-light">
  3.     <a class="navbar-brand" href="#">Navbar</a>
  4.   </nav>
  5. </div>

When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified .navbar-expand{-sm|-md|-lg|-xl} class. This ensures we’re not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.

导航栏(Navbar) - 图16

  1. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  2.   <div class="container">
  3.     <a class="navbar-brand" href="#">Navbar</a>
  4.   </div>
  5. </nav>

定位

使用系统提供的position位置间距定位通用样式可以使导航栏呈现出随浏览器滚动的效果（非固定位置），可选的流动可以包括固定在顶部、固定在底部、或粘到顶部（与页面滚动，直到顶部并停留到那里）。固定导航栏可以使用position: fixed属性，这意味着它们从DOM的正常流动和拉动可能需要自定义的CSS(如在 <body>上定义padding-top)，以防止其重叠覆盖了其它元素。

注意：在.sticky-top 使用 position: sticky, 目前不支持所有常用浏览器。

导航栏(Navbar) - 图17

  1. <nav class="navbar navbar-light bg-light">
  2.   <a class="navbar-brand" href="#">默认</a>
  3. </nav>

导航栏(Navbar) - 图18

  1. <nav class="navbar fixed-top navbar-light bg-light">
  2.   <a class="navbar-brand" href="#">固定在顶部</a>
  3. </nav>

导航栏(Navbar) - 图19

  1. <nav class="navbar fixed-bottom navbar-light bg-light">
  2.   <a class="navbar-brand" href="#">固定在底部</a>
  3. </nav>

导航栏(Navbar) - 图20

  1. <nav class="navbar sticky-top navbar-light bg-light">
  2.   <a class="navbar-brand" href="#">呈现粘性(随屏滚动)于浏览器窗口顶部</a>
  3. </nav>

响应式行为处理

当内容在按钮后面折叠时，导航栏可以使用 .navbar-toggler、.navbar-collapse 和 .navbar-expand{-sm|-md|-lg|-xl}的 class样式来更改，结合其它常用样式，你可以根据需要定义显示或隐藏特定元素。

對於不需要折疊的導覽列，在導覽列中加入 .navbar-expand。對於總是折疊的導覽列，不要加任何 .navbar-expand class。对于永不崩溃.navbar-expand的导航栏，请在导航栏上添加该类。对于总是崩溃的导航栏，不要添加任何.navbar-expand类。对于不需要折叠（隐藏）的导航栏，请在导航栏上增加.navbar-expand class样式来定义，对于总是要折叠（隐藏）的导航栏，请不要加任何的 .navbar-expand class样式。

Toggler 切换触发器

Navbar下的Toggler是切换触发器（即手机模式下的MENU下拉项），它们默认是左对齐的。如果在它们中间定义一个同级的兄弟元素.navbar-brand，它们会自动对齐到窗口右边，反转你的品牌（LOGO或主标题）元素的位置，以下是不同切换形式（位置）的示例（需要在移动窄屏下才能看到效果）：

没有在最下最小浏览界面中定义 .navbar-brand 的样式（MENU切换按钮在默认左边）：

导航栏(Navbar) - 图21

  1. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  2.   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
  3.     <span class="navbar-toggler-icon"></span>
  4.   </button>
  5.   <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
  6.     <a class="navbar-brand" href="#">Hidden brand</a>
  7.     <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
  8.       <li class="nav-item active">
  9.         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  10.       </li>
  11.       <li class="nav-item">
  12.         <a class="nav-link" href="#">Link</a>
  13.       </li>
  14.       <li class="nav-item">
  15.         <a class="nav-link disabled" href="#">Disabled</a>
  16.       </li>
  17.     </ul>
  18.     <form class="form-inline my-2 my-lg-0">
  19.       <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
  20.       <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  21.     </form>
  22.   </div>
  23. </nav>

左侧有一个LOGO(主标题)，右边是MENU切换按钮：

导航栏(Navbar) - 图22

  1. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  2.   <a class="navbar-brand" href="#">Navbar</a>
  3.   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
  4.     <span class="navbar-toggler-icon"></span>
  5.   </button>
  7.   <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
  8.     <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
  9.       <li class="nav-item active">
  10.         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  11.       </li>
  12.       <li class="nav-item">
  13.         <a class="nav-link" href="#">Link</a>
  14.       </li>
  15.       <li class="nav-item">
  16.         <a class="nav-link disabled" href="#">Disabled</a>
  17.       </li>
  18.     </ul>
  19.     <form class="form-inline my-2 my-lg-0">
  20.       <input class="form-control mr-sm-2" type="search" placeholder="Search">
  21.       <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  22.     </form>
  23.   </div>
  24. </nav>

右侧有一个LOGO(主标题)，左边是MENU切换按钮：

导航栏(Navbar) - 图23

  1. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  2.   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
  3.     <span class="navbar-toggler-icon"></span>
  4.   </button>
  5.   <a class="navbar-brand" href="#">Navbar</a>
  7.   <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
  8.     <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
  9.       <li class="nav-item active">
  10.         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  11.       </li>
  12.       <li class="nav-item">
  13.         <a class="nav-link" href="#">Link</a>
  14.       </li>
  15.       <li class="nav-item">
  16.         <a class="nav-link disabled" href="#">Disabled</a>
  17.       </li>
  18.     </ul>
  19.     <form class="form-inline my-2 my-lg-0">
  20.       <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
  21.       <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  22.     </form>
  23.   </div>
  24. </nav>

扩展导航区内容

使用id 和 data-target 搭配，很容易达成：

导航栏(Navbar) - 图24

  1. <div class="pos-f-t">
  2.   <div class="collapse" id="navbarToggleExternalContent">
  3.     <div class="bg-dark p-4">
  4.       <h4 class="text-white">Collapsed content</h4>
  5.       <span class="text-muted">Toggleable via the navbar brand.</span>
  6.     </div>
  7.   </div>
  8.   <nav class="navbar navbar-dark bg-dark">
  9.     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
  10.       <span class="navbar-toggler-icon"></span>
  11.     </button>
  12.   </nav>
  13. </div>