一、下拉菜单
构成一：容器
向上容器 - div.class = dropdown
向下容器 - div.class = dropup
特殊容器 - div.class = btn-group
构成二：按钮btn类元素
点击的button框需要添加 data-toggle=“dropdown” 的JS监听。
button[data-toggle=‘dropdown’]
构成三：下拉菜单
1.下拉菜单 - ul.class= dropdown
2.下拉标题 - li.class = dropdown-menu
3.下拉分割 - li.class = divider
4.下拉禁用 - li.class = disabled
整体对齐使用： 容器属性class添加 —> pull-right、pull-left
下拉菜单换位： 下拉菜单class添加 —> dropdown-menu-[left|right]
<div class="dropdown">
<button href="#" class="btn" data-toggle="dropdown">
下拉菜单 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="alert-danger">背景色，字体色</li>
<li><a href="#">选项3</a></li>
<li><a href="javascript：void(0);">选项4</a></li>
<li class="divider">分割线</li>
<li class="dropdown-header">选项标题1/li>
<li><a href="#">选项8</a></li>
<li class="disabled"><a href="">选项9</a></li>
</ul>
</div>
二、按钮菜单
1.单按钮下拉菜单：
组成：按钮组 { 按钮+下拉菜单 }；
.btn-group>button.btn+ul.dropdown-menu
2.分裂按钮式菜单：
组成：按钮组 { 按钮(带文字) + 按钮(带符号) }；】
.btn-group>button.btn(点这里)+（button.btn>.span.符号类型）
3.上弹式按钮菜单：
组成： div.class = .btn-group.dropup
4.尺寸：就是前面学的按钮的大小尺寸的尺寸添加到按钮上即可。
- btn-lg
- 默认
- btn-sm
- btn-xs
三、标签页
1.普通标签页
基类 - ul.nav.nav-tabs
2.胶囊式标签页
基类 - ul.nav.nav-pills
3.导航栏排列方向
默认排列 - 水平不均分
垂直排列 - 添加.nav-stacked
水平均分 - 添加.nav-justified
4.带下拉的标签页、带下拉的胶囊式标签页
组成：.dropdown + 按钮[data-toggle=‘dropdown’] + dropdown-menu
dropdown == 将其中的li标签添加此类
四、导航条
1.组成
整体：
基类 - navbar navbar-default
头部：
基类 - navbar-header
隐藏按钮样式 - navbar-toggle collapsed
隐藏按钮属性 - [data-toggle = ‘collapse’]
隐藏按钮目标 - [data-toggle = ‘#目标id’ ]
品牌或者首页 - a.navbar-brand
主体：
基类 - collapse navbar-collapse + [id=“自定义”]
2.自适应主体：
1.导航标签 - .nav.navbar-nav
2.导航表单 - .form.navbar-form
3.导航按钮 - button.btn.navbar-btn
4.导航文本 - .navbar-text
5.导航链接 - .navbar-link
6.导航排列 - .navbar-left、.navbar-right
(推荐设置在自适应主体中)
3.固定导航栏：
固定顶部 - .navbar-fiexd-top
固定底部 - .navbar-fiexd-buttom
静止顶部 - .navbar-static-top
4.导航栏颜色：
颜色反转 - .navbar-inverse
结言（一定要看）
最后：因为实际上Bootstrap的JS不怎么常用、他写出来的效果其实我们用Jquery就可以写出来了。并且Bootstrap的JS组件拥有一大堆的Bug因此并不是非常的推荐学习。有兴趣的可以去了解一下国产的前端框架Layui；