在开始使用导航栏之前，您需要了解以下内容：
导航栏需要以
.navbar-expand{-sm|-md|-lg|-xl|-xxl}
来包装
.navbar
， 以便响应折叠和
配色方案
类。
默认情况下，导航栏及其内容是流动的。更改
容器
以不同方式限制其水平宽度。
使用我们的
spacing
和
flex
实用程序类来控制导航栏中的间距和对齐方式。
默认情况下，导航栏是有响应的，但是您可以轻松地修改它们来改变这一点。响应行为取决于我们的Collapse JavaScript插件。
通过使用
<nav>
元素确保可访问性，或者如果使用更通用的元素（如
<div>
），则在每个导航栏中添加
role="navigation"
，以明确地将其标识为辅助技术用户的地标区域。
通过对当前页使用
aria-current="page"
或对集合中的当前项使用
aria-current="true"
来指示当前项。
此组件的动画效果取决于
prefers-reduced-motion
媒体查询。请参阅我们的
可访问性文档的简化运动部分
。
导航栏内置了对一些子组件的支持。根据需要从以下选项中选择：
.navbar-brand
，用于您的公司、产品或项目名称。
.navbar-nav
用于全高和轻型导航（包括支持下拉菜单）。
.navbar-toggler
，用于我们的折叠插件和其他
导航切换
行为。
任何表单控件和操作的Flex和spacing实用程序。
.navbar-text
，用于添加垂直居中的文本字符串。
.collapse.navbar-collapse
， 以按父断点分组和隐藏导航栏内容。
下面是一个例子，所有的子组件都包含在一个响应的光主题导航栏中，它会在
lg
(大) 断点处自动折叠。
Navbar
< nav class = "navbar navbar-expand-lg navbar-light bg-light" >
< div class = "container-fluid" >
< a class = "navbar-brand" href = "#" > Navbar</ a >
< button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-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 me-auto mb-2 mb-lg-0" >
< li class = "nav-item" >
< a class = "nav-link active" aria-current = "page" href = "#" > Home</ a >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Link</ a >
< li class = "nav-item dropdown" >
< a class = "nav-link dropdown-toggle" href = "#" id = "navbarDropdown" role = "button" data-bs-toggle = "dropdown" aria-expanded = "false" >
Dropdown
< ul class = "dropdown-menu" aria-labelledby = "navbarDropdown" >
< li >< a class = "dropdown-item" href = "#" > Action</ a ></ li >
< li >< a class = "dropdown-item" href = "#" > Another action</ a ></ li >
< li >< hr class = "dropdown-divider" ></ li >
< li >< a class = "dropdown-item" href = "#" > Something else here</ a ></ li >
< li class = "nav-item" >
< a class = "nav-link disabled" href = "#" tabindex = "-1" aria-disabled = "true" > Disabled</ a >
< form class = "d-flex" >
< input class = "form-control me-2" type = "search" placeholder = "Search" aria-label = "Search" >
< button class = "btn btn-outline-success" type = "submit" > Search</ button >
</ form >
</ div >
</ div >
</ nav >
此示例使用
颜色
(
bg-light
) 和
间距
(
my-2
,
my-lg-0
,
me-sm-0
,
my-sm-0
) 实用程序类。
品牌（Brand）
.navbar-brand
可以应用于大多数元素，但锚定效果最好，因为有些元素可能需要实用程序类或自定义样式。
<!-- As a link -->
< nav class = "navbar navbar-light bg-light" >
< div class = "container-fluid" >
< a class = "navbar-brand" href = "#" > Navbar</ a >
</ div >
</ nav >
<!-- As a heading -->
< nav class = "navbar navbar-light bg-light" >
< div class = "container-fluid" >
< span class = "navbar-brand mb-0 h1" > Navbar</ span >
</ div >
</ nav >
将图像添加到
.navbar-brand
可能总是需要自定义样式或实用程序来适当调整大小。这里有一些例子来说明。
<
nav
class
=
"navbar navbar-light bg-light"
>
<
div
class
=
"container"
>
<
a
class
=
"navbar-brand"
href
=
"#"
>
<
img
src
=
"/docs/5.0/assets/brand/bootstrap-logo.svg"
alt
=
""
width
=
"30"
height
=
"24"
>
</
div
>
</
nav
>
<!-- Image and text -->
< nav class = "navbar navbar-light bg-light" >
< div class = "container-fluid" >
< a class = "navbar-brand" href = "#" >
< img src = "/docs/5.0/assets/brand/bootstrap-logo.svg" alt = "" width = "30" height = "24" class = "d-inline-block align-top" >
Bootstrap
</ div >
</ nav >
导航栏导航链接建立在我们的
.nav
选项的基础上，并带有自己的修饰符类，需要使用
toggler 类
来实现正确的响应样式。
导航栏中的导航也将增长到占据尽可能多的水平空间
，以保持您的导航栏内容安全对齐。
活动状态带有
.active
，以指示当前页可以直接应用于
.nav-link
或其直接父
.nav-item
。
请注意，还应该在
.nav-link
本身上添加
aria-current
属性。
Navbar
< nav class = "navbar navbar-expand-lg navbar-light bg-light" >
< div class = "container-fluid" >
< a class = "navbar-brand" href = "#" > Navbar</ a >
< button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-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" >
< a class = "nav-link active" aria-current = "page" href = "#" > Home</ a >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Features</ a >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Pricing</ a >
< li class = "nav-item" >
< a class = "nav-link disabled" href = "#" tabindex = "-1" aria-disabled = "true" > Disabled</ a >
</ div >
</ div >
</ nav >
因为我们的导航系统使用类，所以如果您愿意，可以完全避免使用基于列表的方法。
Navbar
< nav class = "navbar navbar-expand-lg navbar-light bg-light" >
< div class = "container-fluid" >
< a class = "navbar-brand" href = "#" > Navbar</ a >
< button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-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-link active" aria-current = "page" href = "#" > Home</ a >
< a class = "nav-link" href = "#" > Features</ a >
< a class = "nav-link" href = "#" > Pricing</ a >
< a class = "nav-link disabled" href = "#" tabindex = "-1" aria-disabled = "true" > Disabled</ a >
</ div >
</ div >
</ div >
</ nav >
也可以在导航栏中使用下拉列表。下拉菜单需要一个包装元素来定位，所以请确保对
.nav-item
和
.nav-link
使用单独的嵌套元素，如下所示。
Navbar
< nav class = "navbar navbar-expand-lg navbar-light bg-light" >
< div class = "container-fluid" >
< a class = "navbar-brand" href = "#" > Navbar</ a >
< button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-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" >
< a class = "nav-link active" aria-current = "page" href = "#" > Home</ a >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Features</ a >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Pricing</ a >
< li class = "nav-item dropdown" >
< a class = "nav-link dropdown-toggle" href = "#" id = "navbarDropdownMenuLink" role = "button" data-bs-toggle = "dropdown" aria-expanded = "false" >
Dropdown link
< ul class = "dropdown-menu" aria-labelledby = "navbarDropdownMenuLink" >
< li >< a class = "dropdown-item" href = "#" > Action</ a ></ li >
< li >< a class = "dropdown-item" href = "#" > Another action</ a ></ li >
< li >< a class = "dropdown-item" href = "#" > Something else here</ a ></ li >
</ div >
</ div >
</ nav >
在导航栏中放置各种表单控件和组件：
< nav class = "navbar navbar-light bg-light" >
< div class = "container-fluid" >
< form class = "d-flex" >
< input class = "form-control me-2" type = "search" placeholder = "Search" aria-label = "Search" >
< button class = "btn btn-outline-success" type = "submit" > Search</ button >
</ form >
</ div >
</ nav >
.navbar
的直接子元素使用flex布局，并将默认为
justify-content: space-between
。根据需要使用其他
flex实用程序
来调整此行为。
Navbar
Search
< nav class = "navbar navbar-light bg-light" >
< div class = "container-fluid" >
< a class = "navbar-brand" > Navbar</ a >
< form class = "d-flex" >
< input class = "form-control me-2" type = "search" placeholder = "Search" aria-label = "Search" >
< button class = "btn btn-outline-success" type = "submit" > Search</ button >
</ form >
</ div >
</ nav >
输入组也起作用。如果导航栏是一个完整的表单，或者主要是一个表单，那么可以使用
<form>
元素作为容器并保存一些HTML。
< nav class = "navbar navbar-light bg-light" >
< form class = "container-fluid" >
< div class = "input-group" >
< span class = "input-group-text" id = "basic-addon1" > @</ span >
< input type = "text" class = "form-control" placeholder = "Username" aria-label = "Username" aria-describedby = "basic-addon1" >
</ div >
</ form >
</ nav >
这些导航栏表单也支持各种按钮。这也是一个很好的提醒，垂直对齐实用程序可以用来对齐不同大小的元素。
Main button
Smaller button
< nav class = "navbar navbar-light bg-light" >
< form class = "container-fluid justify-content-start" >
< button class = "btn btn-outline-success me-2" type = "button" > Main button</ button >
< button class = "btn btn-sm btn-outline-secondary" type = "button" > Smaller button</ button >
</ form >
</ nav >
在
.navbar-text
的帮助下，导航栏可能包含一些文本。此类调整文本字符串的垂直对齐方式和水平间距。
< nav class = "navbar navbar-light bg-light" >
< div class = "container-fluid" >
< span class = "navbar-text" >
Navbar text with an inline element
</ span >
</ div >
</ nav >
根据需要与其他部件和实用程序混合搭配。
Navbar w/ text
< nav class = "navbar navbar-expand-lg navbar-light bg-light" >
< div class = "container-fluid" >
< a class = "navbar-brand" href = "#" > Navbar w/ text</ a >
< button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-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 me-auto mb-2 mb-lg-0" >
< li class = "nav-item" >
< a class = "nav-link active" aria-current = "page" href = "#" > Home</ a >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Features</ a >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Pricing</ a >
< span class = "navbar-text" >
Navbar text with an inline element
</ span >
</ div >
</ div >
</ nav >
由于主题类和
background-color
实用程序的结合，导航栏的主题化从未如此简单。 从
.navbar-light
中选择用于浅背景色，或从
.navbar-dark
中选择用于深背景色。然后，使用
.bg-*
实用程序进行自定义。
Navbar
<
nav
class
=
"navbar navbar-light"
style
=
"background-color: #e3f2fd;"
>
<!-- Navbar content -->
</
nav
>
尽管这不是必需的，但是您可以将导航栏包装在一个
.container
中，以使其在页面上居中–-尽管请注意，仍然需要一个内部容器。 或者可以在
.navbar
中添加一个容器，使
固定或静态顶部导航栏
的内容仅居中。
< div class = "container" >
< nav class = "navbar navbar-expand-lg navbar-light bg-light" >
< div class = "container-fluid" >
< a class = "navbar-brand" href = "#" > Navbar</ a >
</ div >
</ nav >
</ div >
使用任何响应容器更改导航栏中内容的显示宽度。
Navbar
< nav class = "navbar navbar-expand-lg navbar-light bg-light" >
< div class = "container-md" >
< a class = "navbar-brand" href = "#" > Navbar</ a >
</ div >
</ nav >
使用我们的
位置工具
将导航栏放置在非静态位置。 选择“固定到顶部”、“固定到底部”或“粘贴到顶部”（滚动页面直到页面到达顶部，然后停留在那里）。 固定导航栏 使用
position: fixed
，这意味着它们是从DOM的正常流中提取的，可能需要定制CSS（例如，在
<body>
上
padding-top
）以防止与其他元素重叠。
另外请注意，
.sticky-top
使用
position: sticky
，
这并不是每个浏览器都完全支持的。
。
Default
< nav class = "navbar navbar-light bg-light" >
< div class = "container-fluid" >
< a class = "navbar-brand" href = "#" > Default</ a >
</ div >
</ nav >
Fixed top
< nav class = "navbar fixed-top navbar-light bg-light" >
< div class = "container-fluid" >
< a class = "navbar-brand" href = "#" > Fixed top</ a >
</ div >
</ nav >
Fixed bottom
< nav class = "navbar fixed-bottom navbar-light bg-light" >
< div class = "container-fluid" >
< a class = "navbar-brand" href = "#" > Fixed bottom</ a >
</ div >
</ nav >
Sticky top
< nav class = "navbar sticky-top navbar-light bg-light" >
< div class = "container-fluid" >
< a class = "navbar-brand" href = "#" > Sticky top</ a >
</ div >
</ nav >
导航栏可以使用
.navbar-toggler
、
.navbar-collapse
和
.navbar-expand{-sm|-md|-lg|-xl|-xxl}
类来确定它们的内容何时折叠到按钮后面。结合其他实用程序，可以轻松选择何时显示或隐藏特定元素。
对于从不折叠的导航栏，请在导航栏上添加
.navbar-expand
。对于总是折叠的导航栏，不要添加任何
.navbar-expand
类。
默认情况下，导航栏开关是左对齐的，但是如果它们跟随一个兄弟元素，比如
.navbar-brand
，它们将自动对齐到最右边。反转标记将反转触发器的位置。下面是不同切换样式的示例。
最小断点处没有显示
.navbar-brand
：
< nav class = "navbar navbar-expand-lg navbar-light bg-light" >
< div class = "container-fluid" >
< button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-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 me-auto mb-2 mb-lg-0" >
< li class = "nav-item" >
< a class = "nav-link active" aria-current = "page" href = "#" > Home</ a >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Link</ a >
< li class = "nav-item" >
< a class = "nav-link disabled" href = "#" tabindex = "-1" aria-disabled = "true" > Disabled</ a >
< form class = "d-flex" >
< input class = "form-control me-2" type = "search" placeholder = "Search" aria-label = "Search" >
< button class = "btn btn-outline-success" type = "submit" > Search</ button >
</ form >
</ div >
</ div >
</ nav >
左侧显示品牌名称，右侧显示切换：
Navbar
< nav class = "navbar navbar-expand-lg navbar-light bg-light" >
< div class = "container-fluid" >
< a class = "navbar-brand" href = "#" > Navbar</ a >
< button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-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 me-auto mb-2 mb-lg-0" >
< li class = "nav-item" >
< a class = "nav-link active" aria-current = "page" href = "#" > Home</ a >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Link</ a >
< li class = "nav-item" >
< a class = "nav-link disabled" href = "#" tabindex = "-1" aria-disabled = "true" > Disabled</ a >
< form class = "d-flex" >
< input class = "form-control me-2" type = "search" placeholder = "Search" aria-label = "Search" >
< button class = "btn btn-outline-success" type = "submit" > Search</ button >
</ form >
</ div >
</ div >
</ nav >
左边是切换，右边是品牌名称：
< nav class = "navbar navbar-expand-lg navbar-light bg-light" >
< div class = "container-fluid" >
< button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-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 me-auto mb-2 mb-lg-0" >
< li class = "nav-item" >
< a class = "nav-link active" aria-current = "page" href = "#" > Home</ a >
< li class = "nav-item" >
< a class = "nav-link" href = "#" > Link</ a >
< li class = "nav-item" >
< a class = "nav-link disabled" href = "#" tabindex = "-1" aria-disabled = "true" > Disabled</ a >
< form class = "d-flex" >
< input class = "form-control me-2" type = "search" placeholder = "Search" aria-label = "Search" >
< button class = "btn btn-outline-success" type = "submit" > Search</ button >
</ form >
</ div >
</ div >
</ nav >
有时您需要使用 collapse 插件为结构上位于
.navbar
之外的内容触发容器元素。因为我们的插件工作在
id
和
data-bs-target
匹配上，这很容易做到！
Collapsed content
Toggleable via the navbar brand.
< div class = "collapse" id = "navbarToggleExternalContent" >
< div class = "bg-dark p-4" >
< h5 class = "text-white h4" > Collapsed content</ h5 >
< span class = "text-muted" > Toggleable via the navbar brand.</ span >
</ div >
</ div >
< nav class = "navbar navbar-dark bg-dark" >
< div class = "container-fluid" >
< button class = "navbar-toggler" type = "button" data-bs-toggle = "collapse" data-bs-target = "#navbarToggleExternalContent" aria-controls = "navbarToggleExternalContent" aria-expanded = "false" aria-label = "Toggle navigation" >
< span class = "navbar-toggler-icon" ></ span >
</ button >
</ div >
</ nav >
当您这样做时，我们建议包含额外的JavaScript，以便在打开容器时以编程方式将焦点移动到容器中。否则，键盘用户和辅助技术用户很可能很难找到最新披露的内容，特别是如果打开的容器在文档结构中的触发器
之前
。我们还建议确保 toggler 具有
aria-controls
属性，指向内容容器的
id
。理论上，这允许辅助技术用户直接从切换程序跳转到它控制的容器——但目前对此的支持还很不完善。
