1 <nav class="navbar navbar-expand-md bg-light nav-light">
2 <ul class="navbar-nav">
3 <li class="nav-item active"><a href="#" class="nav-link ">菜单一</a></li>
4 <li class="nav-item"><a href="#" class="nav-link">菜单二</a></li>
5 <li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li>
6 </ul>
7 </nav>
导航菜单可用样式：
.navbar-nav
应用于ul标签
.nav-item 、 .active
应用于li标签
.nav-link 、 .disabled
应用于a标签
1 <nav class="navbar navbar-expand-md bg-dark navbar-dark">
2 <!-- 品牌 -->
3 <a href="#" class="navbar-brand">品牌LOGO</a>
5 <!-- 菜单 -->
6 <ul class="navbar-nav">
7 <li class="nav-item active"><a href="#" class="nav-link">菜单一</a></li>
8 <li class="nav-item"><a href="#" class="nav-link">菜单二</a></li>
9 <li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li>
10 </ul>
11 </nav>
品牌可以是文字，也可以是图片。
四、导航文本类（.navbar-text），使用该类可以保证文字与导航样式统一：
1 <nav class="navbar navbar-expand-md bg-dark navbar-dark">
2 <!-- 品牌 -->
3 <a href="#" class="navbar-brand">品牌LOGO</a>
4 <!-- 菜单 -->
5 <ul class="navbar-nav">
6 <li class="nav-item active"><a href="#" class="nav-link">菜单一</a></li>
7 <li class="nav-item"><a href="#" class="nav-link">菜单二</a></li>
8 <li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li>
9 </ul>
10 <span class="navbar-text">这是一句文字</span>
11 </nav>
五、折叠导航：小屏幕上我们都会折叠导航栏，通过点击来显示导航选项：
1 <nav class="navbar navbar-expand-md bg-dark navbar-dark">
2 <!-- 品牌 -->
3 <a href="#" class="navbar-brand">品牌LOGO</a>
5 <!-- 定义折叠按钮 -->
6 <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-menu">
7 <span class="navbar-toggler-icon"></span>
8 </button>
10 <!-- 把菜单包含在容器内 -->
11 <div class="collapse navbar-collapse" id="nav-menu">
12 <ul class="navbar-nav">
13 <li class="nav-item active"><a href="#" class="nav-link">菜单一</a></li>
14 <li class="nav-item"><a href="#" class="nav-link">菜单二</a></li>
15 <li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li>
16 </ul>
17 </div>
18 </nav>
折叠导航注意事项：
1、定义折叠按钮时除了折叠的属性之外，还必须加上样式： .navbar-toggler
2、折叠按钮内加上折叠图标，样式： .navbar-toggler-icon
3、菜单要包含一个容器内，容器必须包含样式： .collapse 和 .navbar-collapse
六、导航内加表单时，一定要把表单加上内联样式（.form-inline）
