在使用Bootstrap框架中的下拉菜单组件时，其结构运用的正确与否非常的重要，如果结构和类名未使用正确，直接影响组件是否能正常运用
使用方法
（1）使用一个名为“dropdown”的容器包裹了整个下拉菜单元素
（2）使用了一个\
（3）在button标签内可以添加一个类名为 caret 的span标签，效果是会在button中添加一小三角；
（4）下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”；
（5）Bootstrap框架中下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“dropdown-menu-right”类名。1
2
3
4
5
6
7
8<div class=“dropdown”>
<button class=“btn btn-default dropdown-toggle” data-toggle=“dropdown”>下拉菜单
<span class=“caret”></span>
</button>
<ul class=“dropdown-menu”>
<li><a href=“##”>按钮下拉菜单项</a></li>
<li><a href=“##”>按钮下拉菜单项</a></li>
</div>
按钮下拉菜单
按钮下拉菜单仅从外观上看和下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮（.btn）样式效果。简单点说就是点击一个按钮，会显示隐藏的下拉菜单。
按钮下拉菜单其实就是普通的下拉菜单，只不过把“<a>”标签元素换成了“<button>”标签元素。唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”
有的时候我们的下拉菜单会向上弹起，这个时候我们的三角方向需要朝上显示；
实现方法：需要在“.btn-group”类上追加“dropup”类名（这也是做向上弹起下拉菜单要用的类名）。
菜单的细节修改
1.下拉分隔线
在Bootstrap框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的<li>，并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能；
通过添加“divider”可以将下拉菜单分组，为了让这个分组更明显，还可以给每个组添加一个头部（标题）
给li添加dropdown-header类
2.下拉菜单的状态
li添加.active
li添加.disabled
导航菜单的效果
使用的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<div class=“ban-group”>
<button class=“btnbtn-default” type=“button”>首页</button>
<button class=“btnbtn-default” type=“button”>产品展示</button>
<button class=“btnbtn-default” type=“button”>案例分析</button>
<button class=“btnbtn-default” type=“button”>联系我们</button>
<div class=“ban-group”>
<button class=“btnbtn-default dropdown-toggle” data-toggle=“dropdown” type=“button”>关于我们<span class=“caret”></span></button>
<ul class=“dropdown-menu”>
<li><a href=“##”>公司简介</a></li>
<li><a href=“##”>企业文化</a></li>
<li><a href=“##”>组织结构</a></li>
<li><a href=“##”>客服服务</a></li>
</ul>
</div>
</div>
菜单样式
btn-group-vertical
垂直分组：把水平分组的“ban-group”类名换成“ban-group-vertical”即可
btn-group-justifie
等分按钮也常被称为是自适应分组按钮，实现方法就是在按钮组“btn-group”上追加一个“btn-group-justified”类名
注意：每组按钮都要加上btn-group的类