Bootstrap 4 导航栏
导航栏
导航栏是放置在页面顶部的导航标题
基础导航栏
使用 Bootstrap，导航栏可以根据屏幕尺寸扩展或折叠。
标准导航栏使用 .navbar 类创建，后面跟着响应式折叠类：.navbar-expand-xl|lg|md|sm（在超大、大、中或小屏幕上将导航栏垂直堆叠）。
要在导航栏中添加链接，请使用具有 class="navbar-nav" 的 <ul> 元素。 然后添加具有 .nav-item 类的 <li> 元素，后面跟着具有 .nav-link 类的 <a> 元素。
示例
<!-- 灰色水平导航栏，在小屏幕上变成垂直导航栏 -->
<nav class="navbar navbar-expand-sm bg-light">
<!-- 链接 -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">链接 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接 3</a>
</li>
</ul>
</nav>
试试看 »
垂直导航栏
删除 .navbar-expand-xl|lg|md|sm 类以创建垂直导航栏
示例
<!-- 垂直导航栏 -->
<nav class="navbar bg-light">
<!-- 链接 -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">链接 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接 3</a>
</li>
</ul>
</nav>
试试看 »
居中导航栏
添加 .justify-content-center 类以居中导航栏。
以下示例将使导航栏在中等、大、超大屏幕上居中。 在小屏幕上，它将垂直显示并左对齐（因为 .navbar-expand-sm 类）
彩色导航栏
使用任何 .bg-color 类更改导航栏的背景颜色 (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light)
提示：使用 .navbar-dark 类将导航栏中所有链接的文本颜色设置为白色，或使用 .navbar-light 类将文本颜色设置为黑色。
示例
<!-- 灰色带黑色文本 -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<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>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul>
</nav>
<!-- 黑色带白色文本 -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- 蓝色带白色文本 -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>
试试看 »
活动/禁用状态：将 .active 类添加到 <a> 元素以突出显示当前链接，或使用 .disabled 类表示链接不可点击。
品牌/Logo
.navbar-brand 类用于突出显示页面上的品牌/logo/项目名称
示例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Logo</a>
...
</nav>
试试看 »
在图像上使用 .navbar-brand 类时，Bootstrap 4 将自动调整图像样式以垂直适合导航栏。
示例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">
<img src="bird.jpg" alt="Logo" style="width:40px;">
</a>
...
</nav>
试试看 »
折叠导航栏
通常，尤其是在小屏幕上，你想要隐藏导航链接并用一个按钮替换它们，该按钮应该在点击时显示它们。
要创建可折叠导航栏，请使用具有 class="navbar-toggler", data-toggle="collapse" and data-target="#thetarget" 的按钮。 然后将导航栏内容（链接等）包装在一个具有 class="collapse navbar-collapse" 的 div 元素中，后面跟着与按钮的 data-target 匹配的 id：“thetarget”。
示例
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- 品牌 -->
<a class="navbar-brand" href="#">导航栏</a>
<!-- 切换器/可折叠按钮 -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- 导航栏链接 -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<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>
</div>
</nav>
试试看 »
提示：你也可以删除 .navbar-expand-md 类以始终隐藏导航栏链接并显示切换器按钮。
带下拉菜单的导航栏
导航栏也可以包含下拉菜单
示例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- 品牌 -->
<a class="navbar-brand" href="#">Logo</a>
<!-- 链接 -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">链接 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接 2</a>
</li>
<!-- 下拉菜单 -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
下拉链接
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">链接 1</a>
<a class="dropdown-item" href="#">链接 2</a>
<a class="dropdown-item" href="#">链接 3</a>
</div>
</li>
</ul>
</nav>
试试看 »
导航栏表单和按钮
添加具有 class="form-inline" 的 <form> 元素以并排分组输入和按钮
示例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<input class="form-control mr-sm-2" type="text" placeholder="搜索">
<button class="btn btn-success" type="submit">搜索</button>
</form>
</nav>
试试看 »
你也可以使用其他输入类，例如 .input-group-prepend 或 .input-group-append 在输入字段旁边附加图标或帮助文本。 你将在 Bootstrap 输入框章节中了解更多关于这些类的信息。
示例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="用户名">
</div>
</form>
</nav>
试试看 »
导航栏文本
使用 .navbar-text 类垂直对齐导航栏内不是链接的任何元素（确保适当的填充和文本颜色）。
示例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- 链接 -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">链接 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接 2</a>
</li>
</ul>
<!-- 导航栏文本 -->
<span class="navbar-text">
导航栏文本
</span>
</nav>
试试看 »
固定导航栏
导航栏也可以固定在页面顶部或底部。
固定导航栏保持在固定位置（顶部或底部）可见，独立于页面滚动。
.fixed-top 类使导航栏固定在顶部
使用 .fixed-bottom 类使导航栏始终保持在页面底部
使用 .sticky-top 类使导航栏在滚动经过它时固定/保持在页面顶部。 注意：此类在 IE11 和更早版本中不起作用（将被视为 position:relative）。
