Bootstrap按钮组件详解
发布时间：2020-12-18 00:56:37 所属栏目：安全 来源：网络整理
导读：按钮组和下拉菜单组件一样，需要依赖于button.js插件才能正常运作。 结构方面：使用一个类名为btn-group的容器，把多个按钮放在这个容器中。 按钮组也是一个独立的组件，所以可以找到相应的源码文件： Less：buttons.less Sass:_buttons.scss Css:Bootstrap.
|
按钮组和下拉菜单组件一样，需要依赖于button.js插件才能正常运作。 结构方面：使用一个类名为btn-group的容器，把多个按钮放在这个容器中。 按钮组也是一个独立的组件，所以可以找到相应的源码文件： Less：buttons.less Sass:_buttons.scss Css:Bootstrap.css 3131行~3291行
…
CSS: .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、最后一个按钮只留右上角和右下角为圆角 源码： .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;
}
按钮组工具栏 在富文本编辑器中，将按钮组分组排列在一起，比如说复制，剪切，粘贴一组，左对齐，中间对齐，右对齐和两端对齐一组，这时需要用到bootstrap框架按钮工具栏btn-toolbar 原理：主要是让容器的多个分组.btn-group元素进行浮动，并且组与组之间保持5px的左外距 .btn,.btn-toolbar > .btn-group,.btn-toolbar > .input-group {
margin-left: 5px;
}
注意在btn-toolbar上清除浮动 示例: 按钮嵌套分组 很多时候，我们把下拉菜单很普通的按钮组排列在一起，实现类似于导航菜单的效果：
使用的时候只需将之前制作下拉菜单的dropdown容器的类名换成btn-group，并且和普通的按钮放在同一级： 按钮垂直分组 只需把水平分组的类名.btn-group换成.btn-group-vertical即可。 等分按钮又称为自适应分组按钮： 整个按钮组的宽度是容器的100%，而按钮组里面的每个按钮平分整个容器的宽度，例如一个按钮组里有五个按钮，每个按钮是容器宽度的20%；一个按钮组里有四个按钮，每个按钮是容器宽度的25%； 实现方法：只需要在按钮组.btn-group 上追加一个类名.btn-group-justified 把.btn-group-justified模拟成表格（display：table），并且把里面的按钮模板模拟成表格单元格（display：table-cell）。 注意：在制作等分按钮组时，尽量使用标签来制作按钮，因为使用button标签元素时，使用display：table在部分浏览器下支持并不友好 编程之家推荐阅读：以上所述是小编给大家介绍的Bootstrap按钮组件，希望对大家有所帮助！ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
