源码解读Bootstrap按钮
按钮组
按钮组和下拉菜单组件一样,需要依赖于bootstrap.js。使用“btn-group”的容器,把多个按钮放到这个容器中。例如:
“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: inset 0 3px 5px rgba(0,.125);
Box-shadow: inset 0 3px 5px rgba(0,.125);
}
.btn-group.open .dropdown-toggle.btn-link {
-webkit-Box-shadow: none;
Box-shadow: none;
}
垂直分组
如果我们要垂直分组,我们只需要把水平分组的“btn-group”类名换成“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”类名即可。不过在制作等分按钮组时,尽量使用标签元素来制作按钮,因为使用
.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”。实现源码如下:
Box-shadow: inset 0 3px 5px rgba(0,.125);
}
.btn-group.open .dropdown-toggle.btn-link {
-webkit-Box-shadow: none;
Box-shadow: none;
}
按钮的向上向下三角形
要在按钮上加一个向下的三角形,可以在
在按钮中的三角形“caret”实现源码如下:
如果需要向上的三角形,在刚才的基础上追加“dropup”类名即可。实现源码如下:
向上弹起的下拉菜单
在“btn-group”或“dropdown”上添加类名“dropup”即可。实现源码如下:
主要就是将“dropdown-menu”的top值变成了auto,而把bottom值换成了100%。