Bootstrap源码解读按钮（5）

源码解读Bootstrap按钮

按钮组

按钮组和下拉菜单组件一样，需要依赖于bootstrap.js。使用“btn-group”的容器，把多个按钮放到这个容器中。例如：<div class="btn-group">...</div>
“btn-group”容器里除了可以使用<button>元素之外，还可以使用其他标签元素，比如<a>标签。不过这里面的标签元素需要带有类名“.btn”。

实现源码如下：

.btn-group,.btn-group-vertical { position: relative; display: inline-block; vertical-align: middle;}.btn-group > .btn,.btn-group-vertical > .btn { position: relative; float: left;}.btn-group > .btn:hover,.btn-group-vertical > .btn:hover,.btn-group > .btn:focus,.btn-group-vertical > .btn:focus,.btn-group > .btn:active,.btn-group-vertical > .btn:active,.btn-group > .btn.active,.btn-group-vertical > .btn.active { z-index: 2;}.btn-group > .btn:focus,.btn-group-vertical > .btn:focus { outline: none;}.btn-group .btn + .btn,.btn-group .btn + .btn-group,.btn-group .btn-group + .btn,.btn-group .btn-group + .btn-group { margin-left: -1px;}

按钮组四个角都是圆角，除了第一个和最后一个具有边上的圆角之外，其他的按钮没有圆角。他的实现方法如下：
1. 默认所有按钮都有圆角
2. 除第一个按钮和最后一个按钮（下拉按钮除外），其他的按钮都取消圆角效果
3. 第一个按钮只留左上角和左下角是圆角
4. 最后一个按钮只留右上角和右下角是圆角
实现源码如下：

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0;}.btn-group > .btn:first-child { margin-left: 0;}.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0; border-bottom-right-radius: 0;}.btn-group > .btn:last-child:not(:first-child),.btn-group > .dropdown-toggle:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0;}.btn-group > .btn-group { float: left;}.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0;}.btn-group > .btn-group:first-child> .btn:last-child,.btn-group > .btn-group:first-child> .dropdown-toggle { border-top-right-radius: 0; border-bottom-right-radius: 0;}.btn-group > .btn-group:last-child> .btn:first-child { border-top-left-radius: 0; border-bottom-left-radius: 0;}

按钮工具栏

要实现按钮工具栏的效果，可以将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中，例如：

<div class="btn-toolbar"> <div class="btn-group"> … </div> <div class="btn-group"> … </div></div>

实现原理主要是让容器的多个分组“btn-group”元素进行浮动，组与组之间保持5px的左外距，并且在”btn-toolbar”上清除浮动。源码如下：