源码解读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”。实现源码如下：
rush:js;">
.btn-group .dropdown-toggle:active,.125);
Box-shadow: inset 0 3px 5px rgba(0,.125);
}
.btn-group.open .dropdown-toggle.btn-link {
-webkit-Box-shadow: none;
Box-shadow: none;
}
按钮的向上向下三角形
要在按钮上加一个向下的三角形，可以在
rush:css;">
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
在按钮中的三角形“caret”实现源码如下：
rush:css;">
.btn .caret {
margin-left: 0;
}
.btn-lg .caret {
border-width: 5px 5px 0;
border-bottom-width: 0;
}
.dropup .btn-lg .caret {
border-width: 0 5px 5px;
}
如果需要向上的三角形，在刚才的基础上追加“dropup”类名即可。实现源码如下：
rush:css;">
.dropup .caret,.navbar-fixed-bottom .dropdown .caret {
content: "";
border-top: 0;
border-bottom: 4px solid;
}
向上弹起的下拉菜单
在“btn-group”或“dropdown”上添加类名“dropup”即可。实现源码如下：
rush:css;">
.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu {
top: auto;
bottom: 100%;
margin-bottom: 1px;
}
主要就是将“dropdown-menu”的top值变成了auto，而把bottom值换成了100%。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
