Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师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"> <li><a>项目一</a></li> <li><a>项目二</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"> <li><a>item1</a></li> <li><a>item2</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"> <li><a href="">item1</a></li> <li><a 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"> <li><a href="">item1</a></li> <li><a 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"> <li><a href="">item1</a></li> <li><a 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"> <li><a href="">item1</a></li> <li><a href="">item2</a></li> </ul> </div>
以上所述是小编给大家介绍的Bootstrap 组件(二)之按钮的相关知识,希望对大家有所帮助!
标签:
bootstrap组件
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“Bootstrap 组件之按钮(二)”评论...
更新动态
2024年11月15日
2024年11月15日
- 丁红《女儿情》[DTS-WAV]
- 陈惠婷.2017-Voyager3【亚神音乐】【FLAC分轨】
- 群星.2001-华纳歌声魅影【华纳】【WAV+CUE】
- 张雨生.2016-雨后星空2CD【丰华】【WAV+CUE】
- 李雨寰《Break Free》[FLAC/分轨][533MB]
- 廖也欧《面朝大海》[320K/MP3][18.35MB]
- 廖也欧《面朝大海》[Hi-Res][24bit 48kHz][FLAC/分轨][170.14MB]
- s13T1夺冠五人名单都有谁 s13T1夺冠五人名单一览
- 英雄联盟T1战队队长都有谁 T1战队所有队长介绍
- skt历届战队成员都有哪些 skt历届战队成员名单盘点
- 妙音唱片《大热唱片3》[WAV+CUE]
- 费玉清《跟着地球旋转》滚石时代经典复刻[正版原抓WAV+CUE]
- 罗文甄妮-射雕英雄传(AMCD)(限量版)[WAV+CUE]
- 《巫师4》定档2025再添佐证:参演人员曝光 老将回归
- 辣眼睛 美女COS《黑神话:悟空》比基尼版金池长老