Bootstrap源码解读按钮（5）
源码解读Bootstrap按钮
按钮组
按钮组和下拉菜单组件一样，需要依赖于bootstrap.js。使用“btn-group”的容器，把多个按钮放到这个容器中。例如：<divclass="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”中，例如：
<divclass="btn-toolbar"> <divclass="btn-group"> … </div> <divclass="btn-group"> … </div> </div>
实现原理主要是让容器的多个分组“btn-group”元素进行浮动，组与组之间保持5px的左外距，并且在”btn-toolbar”上清除浮动。源码如下：
.btn-toolbar{
margin-left:-5px;
}
.btn-toolbar.btn-group,
.btn-toolbar.input-group{
float:left;
}
.btn-toolbar>.btn,
.btn-toolbar>.btn-group,
.btn-toolbar>.input-group{
margin-left:5px;
}
.btn-toolbar:before,
.btn-toolbar:after{
display:table;
content:"";
}
.btn-toolbar:after{
clear:both;
}
在“.btn-group”类名上追加对应的类名，就可以得到不同大小的按钮组：
.btn-group-lg:大按钮组
.btn-group-sm:小按钮组
.btn-group-xs:超小按钮组
实现源码如下：
.btn-lg,
.btn-group-lg>.btn{
padding:10px16px;
font-size:18px;
line-height:1.33;
border-radius:6px;
}
.btn-sm,
.btn-group-sm>.btn{
padding:5px10px;
font-size:12px;
line-height:1.5;
border-radius:3px;
}
.btn-xs,
.btn-group-xs>.btn{
padding:1px5px;
font-size:12px;
line-height:1.5;
border-radius:3px;
}
嵌套分组
我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果。使用的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级。例如：
<divclass="btn-group"> <buttonclass="btnbtn-default"type="button">首页</button> <buttonclass="btnbtn-default"type="button">产品展示</button> <buttonclass="btnbtn-default"type="button">案例分析</button> <buttonclass="btnbtn-default"type="button">联系我们</button> <divclass="btn-group"> <buttonclass="btnbtn-defaultdropdown-toggle"data-toggle="dropdown"type="button">关于我们<spanclass="caret"></span></button> <ulclass="dropdown-menu"> <li><ahref="##">公司简介</a></li> <li><ahref="##">企业文化</a></li> <li><ahref="##">组织结构</a></li> <li><ahref="##">客服服务</a></li> </ul> </div> </div>
实现源码如下：
.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.dropdown-toggle:active,
.btn-group.open.dropdown-toggle{
outline:0;
}
.btn-group>.btn+.dropdown-toggle{
padding-right:8px;
padding-left:8px;
}
.btn-group>.btn-lg+.dropdown-toggle{
padding-right:12px;
padding-left:12px;
}
.btn-group.open.dropdown-toggle{
-webkit-box-shadow:inset03px5pxrgba(0,0,0,.125);
box-shadow:inset03px5pxrgba(0,0,0,.125);
}
.btn-group.open.dropdown-toggle.btn-link{
-webkit-box-shadow:none;
box-shadow:none;
}
垂直分组
如果我们要垂直分组，我们只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可。
实现源码如下：
.btn-group-vertical>.btn,
.btn-group-vertical>.btn-group,
.btn-group-vertical>.btn-group>.btn{
display:block;
float:none;
width:100%;
max-width:100%;
}
.btn-group-vertical>.btn-group>.btn{
float:none;
}
.btn-group-vertical>.btn+.btn,
.btn-group-vertical>.btn+.btn-group,
.btn-group-vertical>.btn-group+.btn,
.btn-group-vertical>.btn-group+.btn-group{
margin-top:-1px;
margin-left:0;
}
.btn-group-vertical>.btn:not(:first-child):not(:last-child){
border-radius:0;
}
.btn-group-vertical>.btn:first-child:not(:last-child){
border-top-right-radius:4px;
border-bottom-right-radius:0;
border-bottom-left-radius:0;
}
.btn-group-vertical>.btn:last-child:not(:first-child){
border-top-left-radius:0;
border-top-right-radius:0;
border-bottom-left-radius:4px;
}
.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn{
border-radius:0;
}
.btn-group-vertical>.btn-group:first-child:not(:last-child)>.btn:last-child,
.btn-group-vertical>.btn-group:first-child:not(:last-child)>.dropdown-toggle{
border-bottom-right-radius:0;
border-bottom-left-radius:0;
}
.btn-group-vertical>.btn-group:last-child:not(:first-child)>.btn:first-child{
border-top-left-radius:0;
border-top-right-radius:0;
}
等分按钮
等分按钮也叫自适应分组按钮，在按钮组“btn-group”上追加一个“btn-group-justified”类名即可。不过在制作等分按钮组时，尽量使用<a>标签元素来制作按钮，因为使用<button>标签元素时，使用display:table在部分浏览器下支持并不友好。
等分按钮实现原理是把“btn-group-justified”模拟成表格（display:table），而且把里面的按钮模拟成表格单元格（display:table-cell）。实现源码如下：
.btn-group-justified{
display:table;
width:100%;
table-layout:fixed;
border-collapse:separate;
}
.btn-group-justified>.btn,
.btn-group-justified>.btn-group{
display:table-cell;
float:none;
width:1%;
}
.btn-group-justified>.btn-group.btn{
width:100%;
}
按钮下拉菜单
按钮下拉菜单其实在介绍嵌套分组的时候已经用过了，它和下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮（.btn）样式效果，把外部容器“div.dropdown”换成了“div.btn-group”。实现源码如下：
.btn-group.dropdown-toggle:active,
.btn-group.open.dropdown-toggle{
outline:0;
}
.btn-group>.btn+.dropdown-toggle{
padding-right:8px;
padding-left:8px;
}
.btn-group>.btn-lg+.dropdown-toggle{
padding-right:12px;
padding-left:12px;
}
.btn-group.open.dropdown-toggle{
-webkit-box-shadow:inset03px5pxrgba(0,0,0,.125);
box-shadow:inset03px5pxrgba(0,0,0,.125);
}
.btn-group.open.dropdown-toggle.btn-link{
-webkit-box-shadow:none;
box-shadow:none;
}
按钮的向上向下三角形
要在按钮上加一个向下的三角形，可以在<button>标签中添加一个<spanclass="caret"></span>来实现效果。
这个三角形的实现源码如下：
.caret{
display:inline-block;
width:0;
height:0;
margin-left:2px;
vertical-align:middle;
border-top:4pxsolid;
border-right:4pxsolidtransparent;
border-left:4pxsolidtransparent;
}
在按钮中的三角形“caret”实现源码如下：
.btn.caret{
margin-left:0;
}
.btn-lg.caret{
border-width:5px5px0;
border-bottom-width:0;
}
.dropup.btn-lg.caret{
border-width:05px5px;
}
如果需要向上的三角形，在刚才的基础上追加“dropup”类名即可。实现源码如下：
.dropup.caret,
.navbar-fixed-bottom.dropdown.caret{
content:"";
border-top:0;
border-bottom:4pxsolid;
}
向上弹起的下拉菜单
在“btn-group”或“dropdown”上添加类名“dropup”即可。实现源码如下：
.dropup.dropdown-menu,
.navbar-fixed-bottom.dropdown.dropdown-menu{
top:auto;
bottom:100%;
margin-bottom:1px;
}
主要就是将“dropdown-menu”的top值变成了auto，而把bottom值换成了100%。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。