Bootstrap 组件之按钮二

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark otto和Jacob Thornton合作开发,是一个CSS/HTML框架。

.btn-group>.btn : 一组.btn按钮包裹在.btn-group

外包元素.btn-group {position/display/}

按钮元素.btn

rush:js;">

按钮工具栏

.btn-toolbar>.btn-group

外包元素.btn-toolbar {margin-left}

rush:js;">

按钮尺寸

.btn-group-*(lg/md/sm/xs) .btn-group-*>.btn {padding/font-size/border-radius}

rush:js;">

按钮嵌套

.btn-group嵌套.btn-group

rush:js;">

项目一
• 项目二

按钮组垂直排列

.btn-group-vertical

rush:js;">

按钮组两端对齐

表现为填满父元素宽度

缺陷：因margin不支持display:table-cell;会出现双边框的效果

需要按钮嵌套.btn-group-justified {display/width/float}

rush:js;">

item1
• item2

菜单

外包元素类.btn-group {display/position}

依赖下拉菜单插件

单按钮下拉菜单

rush:vb;">

分裂式按钮下拉菜单

rush:js;">

按钮下拉菜单尺寸

控制大小.btn-*:.btn-lg/btn-sm/btn-xs {padding/font-size/border-radius}

rush:js;">

向上弹出菜单

控制弹出方向.dropup: .dropup.drop-menu {bottom/margin-bottom}

rush:js;">

以上所述是小编给大家介绍的Bootstrap 组件(二)之按钮的相关知识，希望对大家有所帮助！

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：BootstrapTable与KnockoutJS相结合下一篇：Bootstrap组件(一)之菜单