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可以右对齐触发器。
| 备注 |
|---|
.dropdown 类不是必须的，可以被 .dropup、btn-group 等类似的容器类代替，只要实现相对定位即可，.dropdown 仅仅是可读性的加强。 |
三、按钮组
所谓按钮组，就是把多个按钮水平或者垂直排列，整个组合形成一个整体，可以有整体的圆角，类似分割的胶囊形外观。
按钮组由.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。 - 插入元素可以为单选或者复选框。
| 注意事项 |
|---|
1、不支持 <select> 和 <textarea>标签。2、一侧只能添加一个 .input-group-addon或者 .input-group-btn。3、不支持多个 input。4、不能和其它结构平级混用，必须嵌套。 5、如果有 tooltip或者popover时，必须设置 container: 'body' 参数，为的是避免意外的副作用（例如，工具提示或弹出框被激活后，可能会让当前元素变得更宽或/和变得失去其圆角）。 |
网友评论