Bootstrap/docs/4.5/components/navbar

在GitHub上查看

导航栏

Bootstrap强大的响应式导航标题导航栏的文档和示例。 包括对品牌,导航等的支持,包括对我们的合拢插件的支持。

这个怎么运作

在开始使用导航栏之前,您需要了解以下内容：

• 导航栏需要包装 .navbar with .navbar-expand{-sm|-md|-lg|-xl} 用于响应性崩溃和 配色方案 类。
• 导航栏及其内容默认情况下是流畅的。 Use 可选容器 限制其水平宽度。
• 使用我们的 间距 and flex 用于控制导航栏中间距和对齐方式的实用程序类。
• 导航栏默认情况下是响应式的,但是您可以轻松地对其进行修改以进行更改。 响应行为取决于我们的Collapse JavaScript插件。
• 打印时,导航栏默认为隐藏。 通过添加来强制打印它们 .d-print 到了 .navbar 。见 显示 实用班。
• 通过使用 <nav> 元素,或者,如果使用更通用的元素（例如 <div> ,添加一个 role="navigation" 每个导航栏,以明确将其标识为辅助技术用户的地标性区域。

该组件的动画效果取决于 prefers-reduced-motion 媒体查询。 见 辅助功能文档中的慢动部分 .

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

支持内容

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="#"> 导航栏 </a>
<button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button">
<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 aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown" role="button"> 落下 </a>
<div aria-labelledby="navbarDropdown" class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
</div>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1"> 残障人士 </a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input aria-label="Search" class="form-control mr-sm-2" placeholder="Search" type="search"/>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"> 搜索 </button>
</form>
</div>
</nav>

这个例子使用 颜色 (bg-light ）和 间距 (my-2,my-lg-0,mr-sm-0,my-sm-0 ）实用程序类。

牌

The .navbar-brand 可以应用于大多数元素,但是锚点效果最好,因为某些元素可能需要实用程序类或自定义样式。

作为链接 作为标题

 作为链接 
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#"> 导航栏 </a>
</nav>
 作为标题 
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1"> 导航栏 </span>
</nav>

将图像添加到 .navbar-brand 可能总是需要使用自定义样式或实用程序来适当调整大小。 以下是一些示例。

只是一张图片

 只是一张图片 
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img alt="" height="30" loading="lazy" src="/docs/4.5/assets/brand/bootstrap-solid.svg" width="30"/>
</a>
</nav>

图片和文字

 图片和文字 
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img alt="" class="d-inline-block align-top" height="30" loading="lazy" src="/docs/4.5/assets/brand/bootstrap-solid.svg" width="30"/> 引导 </a>
</nav>

Nav

导航栏导航链接建立在我们的 .nav 具有自己的修饰符类的选项,并且需要使用 切换器类 以获得适当的响应式样式。 导航栏中的导航也将增长,以占据尽可能多的水平空间 以确保您的导航栏内容安全对齐。

活动状态-具有 .active —表示当前页面可以直接应用于 .nav-link s或其直系父母 .nav-item s.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> 导航栏 </a>
<button aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarNav" data-toggle="collapse" type="button">
<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="#"> 特征 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> 价钱 </a>
</li>
<li class="nav-item">
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1"> 残障人士 </a>
</li>
</ul>
</div>
</nav>

并且由于我们在导航中使用类,因此您可以根据需要完全避免基于列表的方法。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> 导航栏 </a>
<button aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarNavAltMarkup" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" href="#"> Home <span class="sr-only">(current)</span></a>
<a class="nav-link" href="#"> 特征 </a>
<a class="nav-link" href="#"> 价钱 </a>
<a aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1"> 残障人士 </a>
</div>
</div>
</nav>

您还可以在导航栏导航中使用下拉菜单。 下拉菜单要求使用包装元素进行定位,因此请确保使用单独的嵌套元素 .nav-item and .nav-link 如下所示。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> 导航栏 </a>
<button aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarNavDropdown" data-toggle="collapse" type="button">
<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="#"> 特征 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> 价钱 </a>
</li>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdownMenuLink" role="button"> 下拉链接 </a>
<div aria-labelledby="navbarDropdownMenuLink" class="dropdown-menu">
<a class="dropdown-item" href="#"> 行动 </a>
<a class="dropdown-item" href="#"> 另一个动作 </a>
<a class="dropdown-item" href="#"> 这里还有其他 </a>
</div>
</li>
</ul>
</div>
</nav>

形式

将各种表单控件和组件放在导航栏中 .form-inline.

<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<input aria-label="Search" class="form-control mr-sm-2" placeholder="Search" type="search"/>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"> 搜索 </button>
</form>
</nav>

中的直接子元素 .navbar 使用弹性布局,默认为 justify-content: space-between 。使用其他 flex工具 根据需要调整此行为。

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand"> 导航栏 </a>
<form class="form-inline">
<input aria-label="Search" class="form-control mr-sm-2" placeholder="Search" type="search"/>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"> 搜索 </button>
</form>
</nav>

输入组也可以工作：

<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input aria-describedby="basic-addon1" aria-label="Username" class="form-control" placeholder="Username" type="text"/>
</div>
</form>
</nav>

这些导航栏形式也支持各种按钮。 这也极大地提醒了我们可以使用垂直对齐工具来对齐不同大小的元素。

<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<button class="btn btn-outline-success" type="button"> 主按键 </button>
<button class="btn btn-sm btn-outline-secondary" type="button"> 较小的按钮 </button>
</form>
</nav>

Text

导航栏可以借助以下内容包含一些文本 .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 aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarText" data-toggle="collapse" type="button">
<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="#"> 特征 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> 价钱 </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-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#"> 导航栏 </a>
<button aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarColor01" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<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="#"> 特征 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> 价钱 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> 关于 </a>
</li>
</ul>
<form class="form-inline">
<input aria-label="Search" class="form-control mr-sm-2" placeholder="Search" type="search"/>
<button class="btn btn-outline-info my-2 my-sm-0" type="submit"> 搜索 </button>
</form>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#"> 导航栏 </a>
<button aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarColor02" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor02">
<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="#"> 特征 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> 价钱 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> 关于 </a>
</li>
</ul>
<form class="form-inline">
<input aria-label="Search" class="form-control mr-sm-2" placeholder="Search" type="search"/>
<button class="btn btn-outline-light my-2 my-sm-0" type="submit"> 搜索 </button>
</form>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
<a class="navbar-brand" href="#"> 导航栏 </a>
<button aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarColor03" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor03">
<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="#"> 特征 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> 价钱 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> 关于 </a>
</li>
</ul>
<form class="form-inline">
<input aria-label="Search" class="form-control mr-sm-2" placeholder="Search" type="search"/>
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit"> 搜索 </button>
</form>
</div>
</nav>

货柜

尽管不是必需的,但您可以将导航栏包装在 .container 将其放在页面的中心或在其中仅添加一个页面的内容 固定或静态顶部导航栏 .

<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> 导航栏 </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="#"> 导航栏 </a>
</div>
</nav>

放置

使用我们的 职位实用程序 将导航栏放置在非静态位置。 从固定到顶部,固定到底部或固定在顶部选择（滚动页面直到到达顶部,然后停留在顶部）。 固定导航栏使用 position: fixed ,表示它们是从DOM的常规流程中提取的,并且可能需要自定义CSS（例如, padding-top 在...上 <body> ）,以防止与其他元素重叠。

另请注意 .sticky-top uses position: sticky , 哪一个 并非所有浏览器都完全支持 .

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

<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#"> 固定顶 </a>
</nav>

<nav class="navbar fixed-bottom navbar-light bg-light">
<a class="navbar-brand" href="#"> 固定底 </a>
</nav>

<nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#"> 粘顶 </a>
</nav>

响应行为

导航栏可以利用 .navbar-toggler,.navbar-collapse ,和 .navbar-expand{-sm|-md|-lg|-xl} 当其内容折叠在按钮后面时更改的类。 与其他实用程序结合使用,您可以轻松选择何时显示或隐藏特定元素。

对于永不崩溃的导航栏,请添加 .navbar-expand 导航栏上的课程。 对于经常折叠的导航栏,请不要添加任何导航栏 .navbar-expand 类。

切换器

导航栏切换器默认情况下是左对齐的,但是它们应跟随同级元素（例如 .navbar-brand ,它们会自动对齐到最右边。 反转标记会反转切换器的位置。 以下是不同切换样式的示例。

没有 .navbar-brand 在最低断点处显示：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo01" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#"> 隐藏品牌 </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 aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1"> 残障人士 </a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input aria-label="Search" class="form-control mr-sm-2" placeholder="Search" type="search"/>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"> 搜索 </button>
</form>
</div>
</nav>

左侧显示品牌名称,右侧显示切换器：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"> 导航栏 </a>
<button aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo02" data-toggle="collapse" type="button">
<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 aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1"> 残障人士 </a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" placeholder="Search" type="search"/>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"> 搜索 </button>
</form>
</div>
</nav>

左侧带有切换开关,右侧带有品牌名称：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarTogglerDemo03" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"> 导航栏 </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 aria-disabled="true" class="nav-link disabled" href="#" tabindex="-1"> 残障人士 </a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input aria-label="Search" class="form-control mr-sm-2" placeholder="Search" type="search"/>
<button class="btn btn-outline-success my-2 my-sm-0" type="submit"> 搜索 </button>
</form>
</div>
</nav>

外部内容

有时,您想使用折叠插件来触发页面其他位置的隐藏内容。 因为我们的插件可以在 id and data-target 匹配,这很容易做到！

收合内容

Toggleable via the navbar brand.

<div class="fixed-top">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4"> 收合内容 </h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarToggleExternalContent" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>