• 导航栏(navbar)
    • 运行原理
    • 支持的内容
      • 品牌
      • nav导航
      • Form表单
      • Text文本处理
    • Color颜色选择器(配色方案)
    • .Container主内容-容器
    • 定位
    • 响应式行为处理
      • Toggler 切换触发器
      • 扩展导航区内容

    导航栏(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>