Bootstrap 组件之按钮(二)

网友投稿 187 2023-07-17


Bootstrap 组件之按钮(二)

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

按钮组

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

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

按钮元素.btn

按钮工具栏

.btn-toolbar>.btn-group

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

按钮尺寸

.btn-group-*(lg/md/sm/xs)

.btn-group-*>.btn {padding/font-size/border-radius}

按钮嵌套

.btn-group嵌套.btn-group

按钮组垂直排列

.btn-group-vertical

...

按钮组两端对齐

表现为填满父元素宽度

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

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

按钮式下拉菜单

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

依赖下拉菜单插件

单按钮下拉菜单

button

分裂式按钮下拉菜单

按钮下拉菜单尺寸

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

向上弹出菜单

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

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


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:实例解析Java程序中正则表达式的贪婪模式匹配
下一篇:J2SE基础之在Eclipse中运行hello world
相关文章

 发表评论

暂时没有评论,来抢沙发吧~