Bootstrap 组件之按钮(二)_.docx

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="button" class="btn btn-default"left/button button type="button" class="btn btn-default"middle/button button type="button" class="btn btn-default"right/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" role="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-default"left/button button class="btn btn-default"middle/button button class="btn btn-default"right/button /div 按钮嵌套 .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/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" button class="btn btn-default"left/button /div div class="btn-group" role="group" button class="btn btn-default"left/button /div div class="btn-group" role="group" button class="btn btn-default dropdown-toggle" data-toggle="dropdown"right span class="caret"/span/button ul class="dropdown-menu" liaitem1/a/li liaitem2/a/li /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="btn-group" button class="btn btn-default"button/button button class="btn btn-default dropdown-toggle" data-toggle="dropdown"span 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="btn-group" button class="btn btn-default dropdown-toggle btn-*" 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 向上弹出菜单 掌握弹出方向.dropup: .dropup.drop-menu bottom/margin-bottom div class="btn-group dropup" button class="btn btn-default dropdown-toggle btn-lg" 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 以上所述是我给大家介绍的Bootstrap 组件(二)之按钮的相关学问，盼望对大家有所关心！ .