## 小图标组件 Bootstrap 提供了免费的 263 个小图标（数了n次）。 **部分图标**  可以使用`<i>`或`<span>`标签来配合使用，具体如下： **使用小图标** ~~~html <span class="glyphicon glyphicon-lock"></span> <i class="glyphicon glyphicon-lock"></i> ~~~ **也可以结合按钮** ~~~html <button class="btn btn-primary btn-xs"> <span class="glyphicon glyphicon-lock"></span> </button> ~~~ ## 下拉菜单组件 下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。 **基本格式** ~~~html <div class="dropdown open"> <button class="btn btn-default" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu "> <li class="dropdown-header">下拉标题</li> <li><a href="#">首页</a></li> <li class="divider"> <li><a href="#">资讯</a></li> <li><a href="#">产品</a></li> <li class="disabled"><a href="#">关于</a></li> </ul> </div> ~~~ 按钮和菜单需要包裹在`.dropdown` 的容器里，而作为被点击的元素按钮需要设置`data-toggle="dropdown"`才能有效。对于菜单部分，设置 `class="dropdown-menu"`才能自动隐藏并添加固定样式。设置 `class="caret"`表示箭头，可上可下。 **设置向上触发** ~~~html <div class=”dropup”> ~~~ **菜单项居右对齐，默认值是`dropdown-menu-left`** ~~~html <ul class="dropdown-menu dropdown-menu-right"> ~~~ **设置菜单的标题，不要加超链接** ~~~html <li class="dropdown-header">下拉标题</li> ~~~ **设置菜单的分割线** ~~~html <li class="divider"></li> ~~~ **设置菜单的禁用项** ~~~html <li class="disabled"><a href="#">关于</a></li> ~~~ **让菜单默认显示** ~~~html <div class="dropdown open"> ~~~ ## 按钮组组件 按钮组就是多个按钮集成在一个容器里形成独有的效果。 **基本格式** ~~~html <div class="btn-group"> <button class="btn btn-default">左 </button> <button class="btn btn-default">中 </button> <button class="btn btn-default">右 </button> </div> ~~~ **将多个按钮组整合起来便于管理** ~~~html <div class="btn-toolbar"> <div class="btn-group"> <button class="btn btn-default">左 </button> <button class="btn btn-default">中 </button> <button class="btn btn-default">右 </button> </div> <div class="btn-group"> <button class="btn btn-default">左 </button> <button class="btn btn-default">中 </button> <button class="btn btn-default">右 </button> </div> <div class="btn-group"> <button class="btn btn-default">左 </button> <button class="btn btn-default">中 </button> <button class="btn btn-default">右 </button> </div> </div> ~~~ **嵌套一个分组，比如下拉菜单** ~~~html <div class="btn-group"> <button class="btn btn-default">左 </button> <button class="btn btn-default">中 </button> <button class="btn btn-default">右 </button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="dropdown-header">下拉标题</li> <li><a href="#">首页</a></li> <li class="divider"> <li><a href="#">资讯</a></li> <li><a href="#">产品</a></li> <li class="disabled"><a href="#"> 关于</a></li> </ul> </div> </div> ~~~ **设置按钮组垂直排列** ~~~html <div class="btn-group-vertical"></div> ~~~ **如果需要使用`<button>`标签，则需要对每个按钮进行群组** ~~~html <div class="btn-group-justified"> <div class="btn-group"> <button class="btn btn-default">左</button> </div> <div class="btn-group"> <button class="btn btn-default">左</button> </div> <div class="btn-group"> <button class="btn btn-default">左</button> </div> </div> ~~~