Bootstrap4 导航栏
导航栏
导航栏是位于页面顶部的导航标题：
基本导航栏
使用 Bootstrap，导航栏可以根据屏幕尺寸扩展或折叠。
标准导航栏是用以下命令创建的.navbar类，然后是响应式折叠类：.navbar-expand-xl|lg|md|sm（在超大、大、中或小屏幕上垂直堆叠导航栏）。
要在导航栏中添加链接，请使用<ul>元素与class="navbar-nav"。然后加<li>元素与.nav-item类后面跟着一个<a>元素与一个.nav-link类：
示例
<!-- A grey horizontal navbar that becomes vertical on small screens -->
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
亲自试一试 »
垂直导航栏
去除.navbar-expand-xl|lg|md|sm类创建垂直导航栏：
示例
<!-- A vertical navbar -->
<nav class="navbar bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 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类添加一个黑色的文字颜色。
示例
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active</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>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</nav>
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>
亲自试一试 »
活动/禁用状态：添加.active类到<a>元素来突出显示当前链接，或者.disabled类来指示该链接不可点击。
品牌/标志
这个.navbar-brand类用于突出显示页面的品牌/徽标/项目名称：
示例
<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"。然后将导航栏内容（链接等）包装在 div 元素内class="collapse navbar-collapse"，后跟一个匹配的 iddata-target按钮的：“目标”。
示例
<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>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
亲自试一试 »
导航栏表单和按钮
添加一个<form>元素与class="form-inline"将输入和按钮并排分组：
示例
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.html">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</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.html">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="Username">
</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="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
亲自试一试 »
固定导航栏
导航栏也可以固定在页面的顶部或底部。
固定导航栏在固定位置（顶部或底部）保持可见，与页面滚动无关。
这个.fixed-top类使导航栏固定在顶部:
使用.fixed-bottom类使导航栏停留在底部页面的：
使用.sticky-top类使导航栏固定/停留在顶部滚动时的页面过去的它。笔记：该类在 IE11 及更早版本中不起作用（将其视为position:relative）。