Getting started
Accessibility（无障碍）
Browsers and devices（浏览器和设备）
Build tools（构建工具）
Contents（内容）
Download（下载）
JavaScript
Theming Bootstrap（主题Bootstrap）
Webpack
Components: Alerts
Alerts（警报）
Components: Badges
Badges（徽章）
Components: Breadcrumb
Breadcrumb
Components: Button group
Button group（按钮组）
Components: Buttons
Buttons（按钮）
Components: Cards
Components: Carousel
Cards（卡）
Carousel（圆盘传送带）
Components: Collapse
Collapse（折叠）
Components: Dropdowns
Dropdowns（下拉菜单）
Components: Forms
Forms（表单）
Components: Input group
Input group（输入群组）
Components: Input group
Jumbotron（广告大屏幕）
Components: List group
List group（列表组）
Components: Modal
Modal（互动视窗）
Components: Navbar
Navbar（导航栏）
Components: Navs
Navs（导航栏）
Components: Pagination
Pagination（分页）
Components: Popovers
Popovers（弹出框）
Components: Progress
Progress（进度条）
Components: Scrollspy
Scrollspy（滚动监听）
Components: Tooltips
Tooltips（提示工具）
Content
Code（代码）
Figures（图片区）
Images（图片）
Reboot（重置）
Tables（表格）
Typography（排版）
Layout
Grid（网格）
Layout（布局）
Media object（多媒体对象）
Utilities for layout（排版通用类别）
Migration
Migrating to v4（迁移到v4）
Utilities
Borders（边框）
Clearfix（清除浮动）
Close icon（关闭图标）
Colors（颜色）
Display property（显示属性）
Embeds（内嵌）
Flex（弹性）
Float（浮动）
Image replacement（图像替换）
Position（位置）
Screenreaders（荧幕阅读器）
Sizing（尺寸）
Spacing（间隔）
Text（文本）
Vertical alignment（垂直对齐）
Visibility（能见度）
©
本文档使用 PHP中文网手册 发布
文字
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（大）断点处自动崩溃。
<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可应用于大部分元素，但是锚效果最好的一些元素可能需要的工具类或自定义样式。
<!-- 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可能总是需要自定义样式或实用程序才能适当调整大小。下面是一些要演示的示例。
<!-- 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>
<!-- 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。
<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>
而且因为我们为导航使用类，所以如果您愿意，可以完全避免使用基于列表的方法。
<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，如下所示。
<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在导航栏中放置各种表单控件和组件。
<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>
根据需要将内联表单的内容与实用程序对齐。
<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>
输入组也可以工作：
<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>
作为这些导航栏形式的一部分，也支持各种按钮。这也是一个很好的提示，即垂直对齐工具可以用来对齐不同大小的元素。
<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帮助下包含一些文本。该类为文本字符串调整垂直对齐和水平间距。
<nav class="navbar navbar-light bg-light"> <span class="navbar-text"> Navbar text with an inline element </span></nav>
根据需要混合并匹配其他组件和实用程序。
<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-*实用程序自定义
<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到一个页面中，也可以在其中添加一个，以便仅将固定顶部导航栏或静态顶部导航栏的内容居中。
<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}类别的断点处移除。这可以确保在导航栏折叠时，我们不会在较低视口上不必要地加倍填充。
<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
<nav class="navbar navbar-light bg-light"> <a class="navbar-brand" href="#">Default</a></nav>
<nav class="navbar fixed-top navbar-light bg-light"> <a class="navbar-brand" href="#">Fixed top</a></nav>
<nav class="navbar fixed-bottom navbar-light bg-light"> <a class="navbar-brand" href="#">Fixed bottom</a></nav>
<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显示在最低的断点：
<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>
品牌名称显示在左侧，右侧显示切换器：
<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>
在左边有一个触发器，右边是品牌名称：
<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匹配，这很容易完成！
<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>