bootstrap 的组件和基本样式相比，大都是细节修饰性的，使用背景、边框、圆角、分隔线、组合、图标、颜色、大小、阴影进行更精细的修饰，以符合各种情形，丰富了表现能力，让页面从简单的布局过渡到有设计感，让用户能更友好的观感去使用界面。
运用这些组件进行组合，使用页面具有一定级别的艺术性，标准性，而且不用过多的使用自定义样式，就可以获得一个脱离简陋、枯燥的页面，所以说在使用过程中，要善于使用组件，不要拘泥与基本样式的排版，而要选择合适的组件去表现页面内容，使用页面生动、严谨，脱离word文档的感觉。

一、下拉菜单

下拉菜单的基本结构为 .dropdown>([data-toggle="dropdown"]+.dropdown-menu)
也是一个容器，嵌套一个触发器和一个列表。

• 容器 .dropdown 仅仅是定义一个相对定位，保证菜单弹出位置的正确性，其命名起到一个可读性，可以用其它有相对定位的元素代替。

• 触发器 ([data-toggle="dropdown"] 由一个属性指定，一般会加上 .dropdown-toggle 类来左浮动，元素大都使用 .btn。
  使用 button.btn.btn-default 得到一个有边框的按钮式触发器，使用 span.btn 或者 a.btn 或者 .btn.btn-link 得到一个简单文本的触发器。

• 菜单使用 .dropdown-menu 类来添加绝对定位、阴影、最小宽度的修饰，一般使用 <ul> 元素来保持内边距。

• 右侧小箭头在基本样式中定义过，使用一个 <span class="caret"></span> 标签。
  

  下拉菜单

• 可以使用图标组件对菜单项进行修饰，因为左边距过大，可以自定义一个样式进行左移。

    .dropdown-menu .glyphicon{
      left: -5px;
    }

二、菜单项修饰

标准的菜单项是由 li>a 构成，bootstrap 提供了标题、分隔线、禁用这几个更细致的修饰。

• 定义标题项， 在菜单项 <li> 上添加 .dropdown-header 类，标签不再需要 <a>标签，直接是文本内容，呈现为着色#777，大小为12px的不换行文本。
• 定义分隔条, <li> 上添加 .divider 类， 定义一个高度为1px的浅色分隔条，上下有9px的间隔。
• 禁用菜单项，只要在 <li> 上添加 .disable 类， 呈现为#777灰色文本，但js操作必须自行判断。
• 把 .dropdown 容器修改为 .dropup, 或者其它相对定位容器添加 .dropup, 菜单会向上弹出，而且 span.caret 箭头符号会自动向上。
  
  image.png
• 对菜单 .dropdown-menu 添加 .dropdown-menu-right 可以右对齐触发器。

三、按钮组

所谓按钮组，就是把多个按钮水平或者垂直排列，整个组合形成一个整体，可以有整体的圆角，类似分割的胶囊形外观。
按钮组由 .btn-group>.btn*n 构成
多个按钮组可以组合成一个工具栏 .btn-toolbar, 形成多个胶囊组排列的样式。
大多数时候，按钮组是和下拉菜单配合形成一个功能强大的工具栏或者按钮组。

按钮组

    <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-success">倍速</button>
            <button class="btn btn-primary">录制</button>
          </div>        
    </div>

• 按钮组.btn-group是相对定位的内联块，并控制中间按钮的取消圆角。
• 工具栏 .btn-toolbar 抵消按钮组有可能的5px内补，其它只起到一个结构化整体的作用。
• 按钮的大小.btn-group-lg,.btn-group-sm,.btn-group-xs可以直接一次性添加到按钮组上，调节整个按钮组的大小。
• 垂直按钮组 .btn-group-vertical 内联块，取代.btn-group，它会定义内部按钮左浮动，块级化，形成了垂直排列样式。
  分列式按钮下拉菜单(右侧带单独下拉小按钮的)不支持这种方式
  
  垂直按钮组

四、按钮组与下拉菜单组合

• 把下拉菜单添加到按钮上很简单，只要把原来的按钮位置添加一个按钮组，做为下拉菜单的容器，然后原来的按钮移动到下拉菜单的触发器就可以了，结构为 .btn-group>(.btn+.dropdown-menu)。

image.png

  <div class="btn-group">
      <button class="btn btn-success">倍速</button>
      <button class="btn btn-primary">录制</button>
      <div class="btn-group">
          <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">清晰度
              <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a href="#">高清</a></li>
            <li><a href="#">流畅</a></li>
            <li><a href="#">2G网络</a></li>
          </ul>
      </div>
    </div> 

• 注意按钮要添加 .dropdown-toggle 类，否则圆角会有问题。

• 同样支持垂直方式排列

  
  
  image.png

• 两端对齐的按钮组， 指的是整个按钮组水平方向填满父元素宽度，然后按钮宽度一致的布局，对 .btn-group 元素再添加一个 .btn-group-justified类就可以了。
  需要注意的是，如果使用 <a>标签做为按钮的承载，可以直接实现功能，如果是<button>标签，必须在外部再包一层 .btn-group元素，整个外观是使用 table-cell 实现的。

image.png

• 分裂式按钮下拉菜单， 也就是按钮右侧添加一个小按钮，两个按钮组成一组，只有小按钮是菜单的触发器。实现很简单，就是在触发器上再添加一个按钮，把原来按钮的文本移到前面按钮就可以。
  注意分裂式按钮组不支持两端对齐与垂直排列!

     <div class="btn-group">
          <button class="btn btn-primary">清晰度</button>
          <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
              <span class="caret"></span>
          </button>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">高清</a></li>
            <li><a href="#">流畅</a></li>
            <li><a href="#">2G网络</a></li>
          </ul>
      </div>

image.png

五、输入框组

在输入框前后添加 span.input-group-addon, 构成类似按钮组的胶囊外观，前后可以添加文本、图标。

• 容器使用 div.input-group，插入内容使用span.input-group-addon。
• 可以添加按钮，此时插入块要修改为 span.input-group-btn，而且按钮好象会比输入框矮1px, 自行手动修复。可以添加多个按钮在div.input-group-btn块中。

    .input-group-btn .btn{
      padding-bottom: 7px;
    }

• 也可以添加下拉菜单或者分裂式按钮下拉菜单，和添加按钮一样处理即可。

  
  
  image.png
• 可以在组上添加尺寸类 .input-group-lg, .input-group-sm。
• 插入元素可以为单选或者复选框。