导航栏(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>
  6. <div class="collapse navbar-collapse" id="navbarSupportedContent">
  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="#">Link</a>
  13. </li>
  14. <li class="nav-item dropdown">
  15. <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  16. Dropdown
  17. </a>
  18. <div class="dropdown-menu" aria-labelledby="navbarDropdown">
  19. <a class="dropdown-item" href="#">Action</a>
  20. <a class="dropdown-item" href="#">Another action</a>
  21. <div class="dropdown-divider"></div>
  22. <a class="dropdown-item" href="#">Something else here</a>
  23. </div>
  24. </li>
  25. <li class="nav-item">
  26. <a class="nav-link disabled" href="#">Disabled</a>
  27. </li>
  28. </ul>
  29. <form class="form-inline my-2 my-lg-0">
  30. <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
  31. <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  32. </form>
  33. </div>
  34. </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>
  5. <!-- As a heading -->
  6. <nav class="navbar navbar-light bg-light">
  7. <span class="navbar-brand mb-0 h1">Navbar</span>
  8. </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>
  4. <nav class="navbar navbar-dark bg-primary">
  5. <!-- Navbar content -->
  6. </nav>
  7. <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  8. <!-- Navbar content -->
  9. </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>
  6. <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
  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">
  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) - 图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>
  6. <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
  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>

扩展导航区内容

使用iddata-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>