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" 和 data-target="#thetarget" 的按钮。然后将导航栏内容（链接等）包装在一个带有 class="collapse navbar-collapse" 的 div 元素中，后面跟着一个与按钮 data-target 匹配的 id：“thetarget”。
示例
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Navbar</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
自己动手试一试 »
提示：您也可以移除 .navbar-expand-md 类以始终隐藏导航栏链接并显示切换按钮。
带下拉菜单的导航栏
导航栏也可以包含下拉菜单
示例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<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>
<!-- Dropdown -->
<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">
<!-- Links -->
<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>
<!-- Navbar text-->
<span class="navbar-text">
导航栏文本
</span>
</nav>
自己动手试一试 »
固定导航栏
导航栏也可以固定在页面顶部或底部。
固定的导航栏在固定位置（顶部或底部）可见，与页面滚动无关。
.fixed-top 类使导航栏固定在顶部
使用 .fixed-bottom 类使导航栏停留在页面底部
使用 .sticky-top 类使导航栏在您滚动过后固定/停留在页面顶部。注意：此类在 IE11 及更早版本中不起作用（将被视为 position:relative）。
