1.普通下拉菜单

<div class="dropdown"> <button type="button" class="btn btn-danger" data-toggle="dropdown" ><!--data-toggle="dropdown"使点击展示下拉菜单--> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"> <!--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>

2.下拉菜单添加分割线

直接在普通下拉菜单的ul下li标签添加<li class="divider"></li>如下：

<ul class="dropdown-menu"> <li><a href="#">文件</a></li> <li class="divider"></li> <li><a href="#">文件</a></li> <li class="divider"></li> <li><a href="#">文件</a></li> <li class="divider"></li> <li><a href="#">文件</a></li> </ul>

3.按钮组

3.1 水平方向

默认就是水平方向排列。

<div class="btn-group"> <button type="button" class="btn btn-default">按钮组</button> <button type="button" class="btn btn-default">按钮组</button> <button type="button" class="btn btn-default">按钮组</button> </div>

3.2 垂直方向

给按钮组添加类btn-group-vertical如下：

<div class="btn-group-vertical"> <button type="button" class="btn btn-default">按钮组</button> <button type="button" class="btn btn-default">按钮组</button> <button type="button" class="btn btn-default">按钮组</button> </div>

3.3自适应占满容器

占满col-md-6这列。要给按钮组的类添加btn-group-justified

<div class="row"> <div class="col-sm-6"> <div class="btn-group btn-group-justified"> <div class="btn-group"> <button type="button" class="btn btn-default">按钮组</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">按钮组</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">按钮组</button> </div> </div> </div> </div>