Bootstrap按钮组
发布时间:2020-12-17 21:01:16 所属栏目:安全 来源:网络整理
导读:按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时,这就显得非常有用。 基本按钮组 给div加上class .btn-group !DOCTYPE htmlhtmlhead meta charset = "utf-8" titledemo/title link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel
按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时,这就显得非常有用。 基本按钮组
给div加上class .btn-group <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>demo</title> <link href="bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> body{padding: 20px;} </style> </head> <body> <div class="btn-group"> <button class="btn btn-primary">按钮1</button> <button class="btn btn-primary">按钮2</button> <button class="btn btn-primary">按钮3</button> <button class="btn btn-primary">按钮4</button> <button class="btn btn-=primary">按钮5</button> </div> </body> </html> 按钮工具栏使用class .btn-toolbar和 .btn-group <body> <div class="btn-toolbar"> <div class="btn-group"> <button class="btn btn-primary">按钮1</button> <button class="btn btn-primary">按钮2</button> <button class="btn btn-primary">按钮3</button> <button class="btn btn-primary">按钮4</button> <button class="btn btn-primary">按钮5</button> </div> <div class="btn-group"> <button class="btn btn-primary">按钮1</button> <button class="btn btn-primary">按钮2</button> <button class="btn btn-primary">按钮3</button> <button class="btn btn-primary">按钮4</button> <button class="btn btn-primary">按钮5</button> </div> <div class="btn-group"> <button class="btn btn-primary">按钮1</button> <button class="btn btn-primary">按钮2</button> <button class="btn btn-primary">按钮3</button> <button class="btn btn-primary">按钮4</button> <button class="btn btn-primary">按钮5</button> </div> </div> </body>
可以看出每一个按钮组之间都有一点空隙
.btn-toolbar>.btn-group
?{
? ??margin-left:?5px;
}
调整按钮大小给btn-group 加上.btn-group-lg,.btn-group-sm,.btn-group-xs可以调整整个按钮组的按钮大小 <body> <div class="btn-toolbar"> <div class="btn-group btn-group-lg"> <button class="btn btn-primary">按钮1</button> <button class="btn btn-primary">按钮2</button> <button class="btn btn-primary">按钮3</button> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下列 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">下拉链接 1</a></li> <li><a href="#">下拉链接 2</a></li> </ul> </div> </div> </div> </body> 嵌套可以在一个按钮组内嵌套另一个按钮组,即,在一个? .btn-group?内嵌套另一个?.btn-group?。当下拉菜单与一系列按钮组合使用时,就会用到这个。 <body> <div class="btn-toolbar"> <div class="btn-group btn-group-lg"> <button class="btn btn-primary">按钮1</button> <button class="btn btn-primary">按钮2</button> <button class="btn btn-primary">按钮3</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下列 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">下拉链接 1</a></li> <li><a href="#">下拉链接 2</a></li> </ul> </div> </div> </body> 感觉嵌套并没有什么作用,于是去掉btn-group,显示效果变成如下。 审查元素,发现.dropdown-menu使用的是绝对定位,而.btn-group是相对定位,因为就不难理解为什么我们去掉嵌套的 btn-group之后,效果变成了上图所示。
垂直的按钮组使用.btn-group-vertical<body> <div class="btn-toolbar"> <div class="btn-group btn-group-lg"> <button class="btn btn-primary">按钮1</button> <button class="btn btn-primary">按钮2</button> <button class="btn btn-primary">按钮3</button> </div> <div class="btn-group"> <button class="btn btn-primary">按钮1</button> <button class="btn btn-primary">按钮2</button> <button class="btn btn-primary">按钮3</button> </div> <div class="btn-group btn-group-lg btn-group-vertical"> <button class="btn btn-primary">按钮1</button> <button class="btn btn-primary">按钮2</button> <button class="btn btn-primary">按钮3</button> </div> </div> </body> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
- Angular:如何使用RXJS 6调用finally()
- bash – 从Cron执行时,AWS API工具“未找到命令”
- angularjs – localStorage vs sessionStorage和
- 如何使用Angular2中的Observable Map函数将Http
- AngularJs之Scope作用域
- scala – 从表中访问数据库列名?
- 基于Metronic的Bootstrap开发框架经验总结(6)-
- angularjs – 使用$http发送带角度的multipart/f
- ntp – 如何配置Unix系统在TAI时间运行?
- php 安装imap报错“configure: error: utf8_mime
热点阅读