导航栏(navbar) - bootStrap4常用CSS笔记
导航栏：navbar
导航栏容器可以包含以下几个常用组成：
1、品牌LOGO（.navbar-brand ）
2、导航菜单（.navbar-nav）
3、导航文本（.navbar-text）
4、折叠导航按钮（.navbar-toggle）
5、表单（.form-inline）
一、导航容器一般使用nav标签来定义：
<nav class="navbar">...</nav>
导航容器可用样式：
| .navbar | 导航栏基础样式 |
| .navbar-expand-{sm | md | xl | lg} | 响应式导航，大屏幕水平铺开，小屏幕垂直堆叠 |
| .flex-top | 导航栏一直在顶部 |
| .flex-bottom | 导航栏一直在顶部 |
| .bg-{primary | secondary | success | info | danger | warning | dark | light} | 导航栏的背景颜色 |
| .navbar-dark | 导航配色方案。深色背景，加此样式可以突显文字 |
| .navbar-light | 导航配色方案。浅色背景，加此样式可突显文字 |
二、导航菜单一般使用ul、li来定义：
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标签 |
三、导航栏中加品牌元素（.navbar-brand）:
1 <nav class="navbar navbar-expand-md bg-dark navbar-dark"> 2 <!-- 品牌 --> 3 <a href="#" class="navbar-brand">品牌LOGO</a> 4 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> 4 5 <!-- 定义折叠按钮 --> 6 <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-menu"> 7 <span class="navbar-toggler-icon"></span> 8 </button> 9 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）
