Bootstrap 图标菜单和按钮组件，五

一、小图标组件

具体图标样式class名称参考官网。

可配合 <span> 或 <i> 使用 ，也可配合 <button> 使用

<button class="btn btn-primary btn-lg">
   <span class="glyphicon glyphicon-bell"></span>
</button>

二、下拉菜单组件

<div class="dropdown">
      <button class="btn btn-default" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
      </button>
      
      <ul class="dropdown-menu dropdown-menu-right">
        <li class="dropdown-header">网站导航</li>
        <li class="divider"></li>
        <li><a href="#">首页</a></li> 
        <li><a href="#">资讯</a></li> 
        <li><a href="#">产品</a></li> 
        <li class="disabled"><a href="#">关于</a></li> 
      </ul>
</div>

1、下拉菜单必须有一个被点击的元素，可以是超链接，可以是图片或者button 按钮（多），按钮需要设置 data-toggle ="dropdown" 才能有效(相当于在 dropdown 处切换 class="open" )。

2、外边要有一个容器 .dropdown 包含被点击的元素和被触发的列表项（即菜单）

3、菜单部分，设置 class="dropdown-menu" 才能自动隐藏并添加固定样式

4、设置 class="caret" 表示箭头，可上可下。

.dropdown // 下拉菜单

.dropdown.open // 菜单列表项默认显示

.dropup // 上拉菜单

.dropdown-menu // 菜单列表项

.dropdown-menu-left // 菜单项目左对齐，默认为左

.dropdown-menu-right // 菜单项目右对齐

.dropdown-header // 网站导航，设置菜单标题，不要加超链接

.divider // 菜单分割线

.disabled // 菜单禁用项

三、按钮组组件

<div class="btn-toolbar">
      <div class="btn-group btn-group-lg">
        <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>

.btn-group // 多个按钮 集成在该容器里

.btn-toolbar // 多个按钮组 整合在该容器里，便于管理。

// 设置按钮组大小（从大到小）

.btn-group-lg

不设置

.btn-group-sm

.btn-group-xs

四、按钮式下拉菜单（嵌套一个分组）

<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 class="btn-group">
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
              下拉菜单
              <span class="caret"></span>
            </button>
            
            <ul class="dropdown-menu dropdown-menu-right">
              <li class="dropdown-header">网站导航</li>
              <li class="divider"></li>
              <li><a href="#">首页</a></li> 
              <li><a href="#">资讯</a></li> 
              <li><a href="#">产品</a></li> 
              <li class="disabled"><a href="#">关于</a></li> 
            </ul>
        </div>
      </div>
</div>

.btn-group // 嵌套一个分组，还用 .btn-group，而不是一个下拉菜单

.dropdown-toggle // 在 <button> 中添加类 dropdown-toggle , 增加了下拉菜单圆角样式

在 .btn-group 处替换类名，显示不同的效果

.btn-group-vertical // 设置按钮组垂直排列（竖着排）

.btn-group-justified // 设置两端对齐按钮组，使用的是 <a> 标签 ，如果需要使用 <button> 需要在标签外设置 div.btn-group

.btn-group.dropup // 向上弹出式

五、分裂式按钮下拉菜单

可以加 两个 <button> 使得按钮下拉菜单两个 button 分体式（中间有竖线隔开）显示。