《Bootstrap 组件之按钮(二)_.docx》由会员分享，可在线阅读，更多相关《Bootstrap 组件之按钮(二)_.docx（7页珍藏版）》请在三一文库上搜索。
1、Bootstrap 组件之按钮(二)_ Bootstrap是_推出的一个用于前端开发的开源工具包。本文给大家介绍Bootstrap 组件之按钮的相关学问，感爱好的伴侣一起学习吧 Bootstrap是_推出的一个用于前端开发的开源工具包。它由_的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。 按钮组 .btn-group.btn : 一组.btn按钮包裹在.btn-group 外包元素.btn-group position/display/ 按钮元素.btn div class=btn-group role=group button type=but
2、ton class=btn btn-defaultleft/button button type=button class=btn btn-defaultmiddle/button button type=button class=btn btn-defaultright/button /div 按钮工具栏 .btn-toolbar.btn-group 外包元素.btn-toolbar margin-left div class=btn-toolbar role=toolbar div class=btn-group role=group./div div class=btn-group ro
3、le=group./div div class=btn-group role=group./div /div 按钮尺寸 .btn-group-*(lg/md/sm/xs) .btn-group-*.btn padding/font-size/border-radius div class=btn-group bt-group-* button class=btn btn-defaultleft/button button class=btn btn-defaultmiddle/button button class=btn btn-defaultright/button /div 按钮嵌套 .
4、btn-group嵌套.btn-group div class=btn-group role=btn-group button class=btn btn-default按钮1/button button class=btn btn-default按钮2/button div class=btn-group role=btn-group button class=btn btn-default dropdown-toggle data-toggle=dropdown下拉 span class=caret/span /button ul class=dropdown-menu lia项目一/a/
5、li lia项目二/a/li /ul /div /div 按钮组垂直排列 .btn-group-vertical div class=btn-group-vertical role=btn-group . /div 按钮组两端对齐 表现为填满父元素宽度 缺陷：因margin不支持display:table-cell;会消失双边框的效果 需要按钮嵌套.btn-group-justified display/width/float div class=btn-group btn-group-justified role=group div class=btn-group role=group bu
6、tton class=btn btn-defaultleft/button /div div class=btn-group role=group button class=btn btn-defaultleft/button /div div class=btn-group role=group button class=btn btn-default dropdown-toggle data-toggle=dropdownright span class=caret/span/button ul class=dropdown-menu liaitem1/a/li liaitem2/a/li
7、 /ul /div /div 按钮式下拉菜单 外包元素类.btn-group display/position 依靠下拉菜单插件 单按钮下拉菜单 div class=btn-group role=group button class=btn btn-default dropdown-toggle data-toggle=dropdown button span class=caret/span /button ul class=dropdown-menu lia href=item1/a/li lia href=item2/a/li /ul /div 分裂式按钮下拉菜单 div class=b
8、tn-group button class=btn btn-defaultbutton/button button class=btn btn-default dropdown-toggle data-toggle=dropdownspan class=caret/span/button ul class=dropdown-menu lia href=item1/a/li lia href=item2/a/li /ul /div 按钮下拉菜单尺寸 掌握大小.btn-*:.btn-lg/btn-sm/btn-xs padding/font-size/border-radius div class
9、=btn-group button class=btn btn-default dropdown-toggle btn-* data-toggle=dropdownbutton span class=caret/span/button ul class=dropdown-menu lia href=item1/a/li lia href=item2/a/li /ul /div 向上弹出菜单 掌握弹出方向.dropup: .dropup.drop-menu bottom/margin-bottom div class=btn-group dropup button class=btn btn-default dropdown-toggle btn-lg data-toggle=dropdownbutton span class=caret/span/button ul class=dropdown-menu lia href=item1/a/li lia href=item2/a/li /ul /div 以上所述是我给大家介绍的Bootstrap 组件(二)之按钮的相关学问，盼望对大家有所关心！ .