Bootstrap 组件之按钮（二）

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。

按钮组

.btn-group>.btn : 一组.btn按钮包裹在.btn-group

外包元素.btn-group {position/display/}

按钮元素.btn

<div class="btn-group" role="group"><button type="button" class="btn btn-default">left</button><button type="button" class="btn btn-default">middle</button><button type="button" class="btn btn-default">right</button></div> 

按钮工具栏

.btn-toolbar>.btn-group

外包元素.btn-toolbar {margin-left}

<div class="btn-toolbar" role="toolbar"><div class="btn-group" role="group">...</div><div class="btn-group" role="group">...</div><div class="btn-group" role="group">...</div></div> 

按钮尺寸

.btn-group-*(lg/md/sm/xs)
.btn-group-*>.btn {padding/font-size/border-radius}

<div class="btn-group bt-group-*"><button class="btn btn-default">left</button><button class="btn btn-default">middle</button><button class="btn btn-default">right</button></div> 

按钮嵌套

.btn-group嵌套.btn-group

<div class="btn-group" role="btn-group"><button class="btn btn-default">按钮1</button><button class="btn btn-default">按钮2</button><div class="btn-group" role="btn-group"><button class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉 <span class="caret"></span></button><ul class="dropdown-menu"><li><a>项目一</a></li><li><a>项目二</a></li></ul></div></div> 

按钮组垂直排列

.btn-group-vertical

<div class="btn-group-vertical" role="btn-group">...</div> 

按钮组两端对齐

表现为填满父元素宽度

缺陷：因margin不支持display:table-cell;会出现双边框的效果

需要按钮嵌套.btn-group-justified {display/width/float}

<div class="btn-group btn-group-justified" role="group"><div class="btn-group" role="group"><button class="btn btn-default">left</button></div><div class="btn-group" role="group"><button class="btn btn-default">left</button></div><div class="btn-group" role="group"><button class="btn btn-default dropdown-toggle" data-toggle="dropdown">right <span class="caret"></span></button><ul class="dropdown-menu"><li><a>item1</a></li><li><a>item2</a></li></ul></div></div>