导航
1. 简单的导航（.nav .nav-item .nav-link）
如果你想创建一个简单的水平导航栏，可以在 < ul > 元素上添加 .nav类，在每个 < li > 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<ul class="nav">
<li class="nav-item">
<a href="#" class="nav-link">首页</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">简介</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">关于我们</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">不能点击</a>
</li>
</ul>
</div>
</body>
</html>
运行结果：
2. 导航对齐方式（.justify-content-center 局中 / .justify-content-end 局右）
默认居中导航，.justify-content-center 类设置导航居中显示，.justify-content-end 类设置导航右对齐。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<ul class="nav">
<li class="nav-item">
<a href="#" class="nav-link">首页</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">简介</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">关于我们</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">不能点击</a>
</li>
</ul>
<ul class="nav justify-content-center">
<li class="nav-item">
<a href="#" class="nav-link">首页</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">简介</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">关于我们</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">不能点击</a>
</li>
</ul>
<ul class="nav justify-content-end">
<li class="nav-item">
<a href="#" class="nav-link">首页</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">简介</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">关于我们</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">不能点击</a>
</li>
</ul>
</div>
</body>
</html>
运行结果：
3. 垂直导航（.flex-column）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<ul class="nav flex-column">
<li class="nav-item">
<a href="#" class="nav-link">首页</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">简介</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">关于我们</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">不能点击</a>
</li>
</ul>
</div>
</body>
</html>
运行结果：
4. 选项卡（.nav-tabs）
使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记。
扫描二维码关注公众号，回复：
16298683 查看本文章
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#" class="nav-link active">首页</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">简介</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">关于我们</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">不能点击</a>
</li>
</ul>
</div>
</body>
</html>
运行结果：
5. 胶囊导航（.nav-pills）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#" class="nav-link active">首页</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">简介</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">关于我们</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">不能点击</a>
</li>
</ul>
</div>
</body>
</html>
运行结果：
6. 导航等宽（.nav-justified）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a href="#" class="nav-link active">首页</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">简介</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">关于我们</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">不能点击</a>
</li>
</ul>
<br>
<br>
<br>
<ul class="nav nav-tabs nav-justified">
<li class="nav-item">
<a href="#" class="nav-link active">首页</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">简介</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">关于我们</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">不能点击</a>
</li>
</ul>
</div>
</body>
</html>
运行结果：
7. 下拉菜单
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<!-- 胶囊下拉菜单 -->
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#" class="nav-link active">首页</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">简介</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">1</a>
<a href="#" class="dropdown-item">2</a>
<a href="#" class="dropdown-item">3</a>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">关于我们</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">联系我们</a>
</li>
</ul>
<br>
<br>
<!-- 选项卡下拉菜单 -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="#" class="nav-link active">首页</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">简介</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">1</a>
<a href="#" class="dropdown-item">2</a>
<a href="#" class="dropdown-item">3</a>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">关于我们</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">联系我们</a>
</li>
</ul>
</div>
</body>
</html>
运行结果：
8. 动态选项卡（data-toggle=“tab”）
如果你要设置选项卡是动态可切换的，可以在每个链接上添加 data-toggle=“tab” 属性。 然后在每个选项对应的内容的上添加 .tab-pane 类。
如果你希望有淡入效果可以在 .tab-pane 后添加 .fade类:
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<!-- nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a href="#home" class="nav-link active" data-toggle="pill">首页</a>
</li>
<li class="nav-item">
<a href="#menu1" class="nav-link" data-toggle="pill">菜单1</a>
</li>
<li class="nav-item">
<a href="#menu2" class="nav-link" data-toggle="pill">菜单2</a>
</li>
</ul>
<!-- tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active">
<br>
我是首页
</div>
<div id="menu1" class="container tab-pane fade">
<br>
菜单一
</div>
<div id="menu2" class="container tab-pane fade">
<br>
菜单二
</div>
</div>
</div>
</body>
</html>
运行结果：
9. 胶囊状动态选项卡（data-toggle=“pill”）
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<!-- nav pills -->
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a href="#home" class="nav-link active" data-toggle="pill">首页</a>
</li>
<li class="nav-item">
<a href="#menu1" class="nav-link" data-toggle="pill">菜单一</a>
</li>
<li class="nav-item">
<a href="#menu2" class="nav-link" data-toggle="pill">菜单二</a>
</li>
</ul>
<!-- tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active">
<br>
<p>首页</p>
</div>
<div id="menu1" class="container tab-pane fade">
<br>
<p>菜单1</p>
</div>
<div id="menu2" class="container tab-pane fade">
<br>
<p>菜单2</p>
</div>
</div>
</div>
</body>
</html>
运行结果：
导航栏
1. 垂直导航栏
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<nav class="navbar bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">首页</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">关于我们</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">联系我们</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
运行结果：
2. 水平导航栏
我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。
导航栏上的选项可以使用 < ul > 元素并添加 class=“navbar-nav” 类。 然后在 < li > 元素上添加 .nav-item 类， < a > 元素上使用 .nav-link 类。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">首页</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">关于我们</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">联系我们</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
运行结果：
3. 不同颜色导航栏
提示: 对于暗色背景需要设置文本颜色为浅色的，对于浅色背景需要设置文本颜色为深色的。.navbar-light用于浅色背景色，.navbar-dark用于深色背景色。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<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>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<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>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<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>
<nav class="navbar navbar-expand-sm bg-success navbar-dark">
<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>
<nav class="navbar navbar-expand-sm bg-info navbar-dark">
<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>
<nav class="navbar navbar-expand-sm bg-warning navbar-dark">
<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>
<nav class="navbar navbar-expand-sm bg-danger navbar-dark">
<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>
<nav class="navbar navbar-expand-sm bg-secondary navbar-dark">
<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>
</div>
</body>
</html>
运行结果：
注：激活和禁用状态: 可以在 < a > 元素上添加 .active 类来高亮显示选中的选项。 .disabled 类用于设置该链接是不可点击的。
4. 品牌/Logo（.navbar-brand ）
.navbar-brand 类用于高亮显示品牌 / Logo。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand/logo -->
<a href="#" class="navbar-brand">Logo</a>
<!-- Link -->
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">首页</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">关于我们</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">联系我们</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
运行结果：
如果使用图片，可以使用 .navbar-brand 类来设置图片自适应导航栏。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand/logo -->
<a href="#" class="navbar-brand">
<img src="img/2.png" alt="logo" style="width: 150px;" >
</a>
<!-- Link -->
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">首页</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">关于我们</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">联系我们</a>
</li>
</ul>
</nav>
</div>
</body>
</html>
运行结果：
5. 折叠导航栏
通常，小屏幕上我们都会折叠导航栏，通过点击来显示导航选项。
要创建折叠导航栏，可以在按钮上添加 class=“navbar-toggler”, data-toggle=“collapse” 与 data-target="#thetarget" 类。然后在设置了 class=“collapse navbar-collapse” 类的 div 上包裹导航内容（链接）, div 元素上的 id 匹配按钮 data-target 的上指定的 id
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a href="#" class="navbar-brand">Navbar</a>
<button type="button" class="navbar-toggler" 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>
</body>
</html>
运行结果：
提示: 如果你删除 .navbar-expand-md 类，导航链接会一直隐藏，且切换按钮会一直显示。
6. 导航栏使用下拉菜单
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a href="#" class="navbar-brand">Logo</a>
<!-- Link -->
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Link 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" id="navbardrop" data-toggle="dropdown">
Dropdown link
</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">link 1</a>
<a href="#" class="dropdown-item">link 2</a>
<a href="#" class="dropdown-item">link 3</a>
</div>
</li>
</ul>
</nav>
</body>
</html>
运行结果：
7. 导航栏的表单与按钮
导航栏的表单 < form > 元素使用 class=“form-inline” 类来排版输入框与按钮。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline">
<input type="text" class="form-control" placeholder="Search" />
<button type="button" class="btn btn-success">Search</button>
</form>
</nav>
</body>
</html>
运行结果：
也可以使用其他的输入框类，如 .input-group-addon 类用于在输入框前添加小标签。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
<form class="form-inline">
<span class="input-group-append">@</span>
<input type="text" class="form-control" placeholder="Search" />
</form>
</nav>
</body>
</html>
运行结果：
8. 导航栏文本（.navbar-text ）
使用 .navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Link 1</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
</body>
</html>
运行结果：
9. 固定导航栏（ .fixed-top / .fixed-bottom）
导航栏可以固定在头部或者底部。使用 .fixed-top 类来实现导航栏固定在头部，使用 .fixed-bottom 类来实现导航栏固定在底部。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body {
height: 1500px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<a class="navbar-brand" href="#">Logo</a>
<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>
</ul>
</nav>
<div class="container-fluid" style="margin-top:80px">
<h1>滚动页面查看效果</h1>
</div>
</body>
</html>
运行结果：
面包屑导航
1. 简述
面包屑导航是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置，是在用户界面中的一种导航辅助。
Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中的 ::before 和 content 来添加，下面所示的 class 自动被添加：
.breadcrumb-item + .breadcrumb-item::before {
display: inline-block;
padding-right: 0.5rem;
color: #6c757d;
content: "/";
}
2. 实例
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ol class="breadcrumb">
<li class="breadcrumb-item active">首页</li>
</ol>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">首页</a></li>
<li class="breadcrumb-item active">简介</li>
</ol>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">首页</a></li>
<li class="breadcrumb-item"><a href="#">女装</a></li>
<li class="breadcrumb-item active">连衣裙</li>
</ol>
</body>
</html>
运行结果：
我们也可以不用列表形式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<nav class="breadcrumb">
<a class="breadcrumb-item" href="#">首页</a>
<a class="breadcrumb-item" href="#">女装</a>
<a class="breadcrumb-item" href="#">连衣裙</a>
<span class="breadcrumb-item active">蓝色</span>
</nav>
</body>
</html>
运行结果：
