Bootstrap按钮组
2016-01-05 21:18
671 查看
按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时,这就显得非常有用。
基本按钮组
给div加上class .btn-group
可以看出每一个按钮组之间都有一点空隙
.btn-toolbar>.btn-group {
margin-left: 5px;
}
时,就会用到这个。
感觉嵌套并没有什么作用,于是去掉btn-group,显示效果变成如下。
审查元素,发现.dropdown-menu使用的是绝对定位,而.btn-group是相对定位,因为就不难理解为什么我们去掉嵌套的
btn-group之后,效果变成了上图所示。
基本按钮组
给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>
相关文章推荐
- bootstrap图片轮播+导航栏效果
- JS组件系列——Bootstrap Select2组件使用小结
- Bootstrap3 框架下 使用 Bootstrap-table 结合 Bootstrap- file input 上传文件 并显示进度条
- 深入理解BootStrap -- 按钮6
- bootstrap fileinput 文件上传
- 深入理解BootStrap -- 表单5
- bootstrap学习笔记--bootstrap概览
- bootstrap datepicker 属性设置 以及方法和事件
- bootstrap学习笔记--bootstrap安装环境
- 深入理解BootStrap -- 表格4
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
- 深入理解BootStrap -- 基础排版3
- 15 个最好的 Bootstrap 设计工具推荐
- BootStrap中的button使用
- 深入理解BootStrap -- 简单入门2
- 深入理解BootStrap -- 学习从现在开始1
- Bootstrap学习笔记之整体架构
- bootstrap响应式布局简单实例
- html5 bootstrap的名单管理(重构之前)
- Bootstrap中的网格系统