导航栏
Bootstrap强大的响应式导航标题,导航栏的文档和示例。包括对品牌,导航等的支持,包括对我们的折叠插件的支持。
这个怎么运作
在开始使用导航栏之前,您需要了解以下内容:
- Navbars需要使用
.navbar-expand {-sm | -md | -lg | -xl}
包装.navbar
以进行响应式折叠和[颜色方案](#颜色方案)类。 - 默认情况下,Navbars及其内容是流畅的。 使用[可选容器](#containers)限制其水平宽度。
- 使用我们的[spacing]({{site.baseurl}} / docs / {{site.docs_version}} / utilities / spacing /)和[flex]({{site.baseurl}} / docs / {{site.docs_version} / utilities / flex /)用于控制导航栏中间距和对齐的实用程序类。
- 默认情况下,导航栏会响应,但您可以轻松修改它们以更改它。 响应行为取决于我们的Collapse JavaScript插件。
- 打印时默认隐藏导航栏。 通过将
.d-print
添加到.navbar
来强制打印它们。 请参阅[display]({{site.baseurl}} / docs / {{site.docs_version}} / utilities / display /)实用程序类。 - 通过使用
<nav>
元素确保可访问性,或者,如果使用更通用的元素(如<div>
),则为每个导航栏添加一个`role =“navigation”以明确地将其标识为用户的标志性区域 辅助技术。
继续阅读示例和支持的子组件列表。
导航
Navbar导航链接使用自己的修饰符类构建我们的.nav
选项,并且需要使用[toggler classes](#toggler)来实现正确的响应式样式。导航栏中的导航也将增长到占用尽可能多的水平空间,以保持导航栏内容安全对齐。
活动状态 - 使用.active
-表示当前页面可以直接应用于.nav-link
s或它们的直接父.nav-item
s。
<nav class="navbar navbar-expand-lg bg-primary">
<div class="container">
<a class="navbar-brand" href="#">导航栏</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-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">家 <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 disabled" href="#">残障人士</a>
</li>
</ul>
</div>
</div>
</nav>
您还可以在导航栏导航中使用下拉列表。下拉菜单需要一个包装元素进行定位,因此请务必使用.nav-item
和.nav-link
的单独和嵌套元素,如下所示。
<nav class="navbar navbar-expand-lg bg-primary">
<div class="container">
<a class="navbar-brand" href="#">导航栏</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-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">家 <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 class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
下拉链接
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">行动</a>
<a class="dropdown-item" href="#">另一个动作</a>
<a class="dropdown-item" href="#">还有别的什么</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
形式
使用.form-inline
在导航栏中放置各种表单控件和组件。
<nav class="navbar navbar-expand-lg bg-primary">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="/presentation.html">牌</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#pablo" class="nav-link">link</a>
</li>
<li class="nav-item">
<a href="#pablo" class="nav-link">link</a>
</li>
</ul>
<form class="form-inline ml-auto">
<div class="form-group no-border">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-just-icon btn-round">
<i class="material-icons">search</i>
</button>
</form>
</div>
</div>
</nav>
文本
Navbars可以在.navbar-text
的帮助下包含一些文本。此类调整文本字符串的垂直对齐和水平间距。
<nav class="navbar navbar-dark bg-primary">
<div class="container">
<span class="navbar-text">
内联元素
</span>
</div>
</nav>
<nav class="navbar navbar-expand-lg bg-primary">
<div class="container">
<a class="navbar-brand" href="#">Navbar with 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-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></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="#">家 <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>
</div>
</nav>
配色方案
由于主题类和background-color
实用程序的组合,主题导航栏从未如此简单。选择.navbar-light
用于浅色背景颜色,或.navbar-dark
用于深色背景颜色。然后,用`.bg-自定义
集装箱
当容器位于导航栏中时,其水平填充将在低于指定的`.navbar-expand {-sm | -md | -lg | -xl}类的断点处移除。这可确保在导航栏折叠时,我们不会在较低视口上不必要地填充填充。 |
<nav class="navbar navbar-expand-lg navbar-light bg-primary">
<div class="container">
<a class="navbar-brand" href="#">导航栏</a>
</div>
</nav>
放置
使用我们的[位置实用程序]({{site.baseurl}} docs {{site.docs_version}}实用程序位置)将导航栏放置在非静态位置。选择固定到顶部,固定到底部,或粘贴到顶部(滚动页面,直到它到达顶部,然后停留在那里)。固定的导航栏使用position:fixed
,这意味着它们是从DOM的正常流程中拉出来的,并且可能需要自定义CSS(例如,<body>
上的padding-top
)以防止与其他元素重叠。
还要注意.sticky-top
使用position:sticky
,[在每个浏览器中都不完全支持](https://caniuse.com/#feat=css-sticky)
<nav class="navbar navbar-light bg-primary">
<div class="container">
<a class="navbar-brand" href="#">默认</a>
</div>
</nav>
<nav class="navbar fixed-top navbar-light bg-primary">
<div class="container">
<a class="navbar-brand" href="#">固定 最佳</a>
</div>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-primary">
<div class="container">
<a class="navbar-brand" href="#">固定 底部</a>
</div>
</nav>
<nav class="navbar sticky-top navbar-light bg-primary">
<div class="container">
<a class="navbar-brand" href="#">黏 最佳</a>
</div>
</nav>
反应行为
Navbars可以利用.navbar-toggler ,.navbar-collapse 和`.navbar-expand {-sm |
-md | -lg | -xl}类来改变它们的内容在按钮后面的崩溃。与其他实用程序结合使用,您可以轻松选择何时显示或隐藏特定元素。 |
Toggler
默认情况下,Navbar切换器是左对齐的,但是如果它们遵循像.navbar-brand
这样的兄弟元素,它们将自动对齐到最右边。反转标记将反转切换器的位置。以下是不同切换样式的示例。
在最低断点处没有显示.navbar-brand
<nav class="navbar navbar-expand-lg bg-primary">
<div class="container">
<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-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></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="#">家 <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 disabled" href="#">残障人士</a>
</li>
</ul>
<form class="form-inline ml-auto">
<div class="form-group has-white">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-neutral btn-icon btn-round">
<i class="material-icons">搜索</i>
</button>
</form>
</div>
</div>
</nav>
左侧显示品牌名称,右侧显示切换器
<nav class="navbar navbar-expand-lg bg-primary">
<div class="container">
<a class="navbar-brand" href="#">导航栏</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-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></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="#">家 <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 disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline ml-auto">
<div class="form-group no-border">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-neutral btn-icon btn-round">
<i class="material-icons">search</i>
</button>
</form>
</div>
</div>
</nav>
左侧有一个切换器,右侧有品牌名称
<nav class="navbar navbar-expand-lg bg-primary">
<div class="container">
<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-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></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="#">家 <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 disabled" href="#">残障人士</a>
</li>
</ul>
<form class="form-inline ml-auto">
<div class="form-group no-border">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-neutral btn-icon btn-round">
<i class="material-icons">search</i>
</button>
</form>
</div>
</div>
</nav>