博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Bootstrapbutton组
阅读量:6150 次
发布时间:2019-06-21

本文共 2042 字,大约阅读时间需要 6 分钟。

button组同意多个button被堆叠在同一行上。当你想要把button对齐在一起时,这就显得很实用。

基本button组

给div加上class .btn-group

    
demo

button工具栏

使用class .btn-toolbar和 .btn-group

    

能够看出每个button组之间都有一点空隙
.btn-toolbar>.btn-group
 {
    margin-left: 5px;
}

调整button大小

给btn-group 加上.btn-group-lg,.btn-group-sm。.btn-group-xs能够调整整个button组的button大小

    

嵌套

能够在一个button组内嵌套还有一个button组。即,在一个 
.btn-group 内嵌套还有一个 .btn-group 

当下拉菜单与一系列button组合使用

时。就会用到这个。

    

感觉嵌套并没有什么作用,于是去掉btn-group,显示效果变成例如以下。

审查元素。发现.dropdown-menu使用的是绝对定位,而.btn-group是相对定位,由于就不难理解为什么我们去掉嵌套的

btn-group之后,效果变成了上图所看到的。

垂直的button组

使用.btn-group-vertical

    

你可能感兴趣的文章
libjingle翻译之《Important Concepts(重要概念)之Transports, Channels, and Connections(传输、通道、链接)》...
查看>>
ASP.NET MVC Model元数据及其定制: Model元数据的定制
查看>>
Veeam任命新的中国区总经理 坚信可用性领域大有可为
查看>>
蓝牙曝出高危漏洞 你该怎么办?
查看>>
用Libaad2来进行AAC解码
查看>>
它改变了整个扫地机器人行业,如今被全面收购
查看>>
Compile FreeCAD on Windows
查看>>
如何更高效地使用 OkHttp
查看>>
外媒:那些最易受到攻击的常见设备
查看>>
助阵智能化环境监控 长虹佳华推CHEWS无线管理解决方案
查看>>
007的建议 让你的企业像军情六处一样安全
查看>>
互联网分析师:5G距离我们还有多远?
查看>>
5款便捷的App帮你预定出租车
查看>>
物联网发展的六大智能化前景
查看>>
Wi-Fi新标准HaLow正面挑战ZigBee、Z-Wave
查看>>
SAP携手阿里云 年内即将推出三款云产品
查看>>
互联网+智慧城市 开启智慧生活
查看>>
藏在高端智能手机芯片里的“外交官”:射频前端
查看>>
高盛AI生态报告:美国仍是主导,中国正高速成长
查看>>
云存储使存储容量前所未有,起点是达PB级
查看>>