Bootstrap按钮组
来源:互联网 发布:淘宝上的主板能买吗 编辑:程序博客网 时间:2024/05/29 19:19
按钮组允许多个按钮被堆叠在同一行上。当你想要把按钮对齐在一起时,这就显得非常有用。
基本按钮组
给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>
0 0
- bootstrap按钮组
- BootStrap按钮组
- Bootstrap学习:按钮组
- Bootstrap按钮组
- Bootstrap 按钮组
- Bootstrap按钮组
- Bootstrap按钮组
- bootstrap按钮组
- Bootstrap按钮组
- bootstrap-按钮组
- bootstrap按钮组样式
- bootstrap --下拉组件 按钮组 按钮工具栏
- bootstrap的按钮和按钮群组
- Bootstrap组件之按钮组
- bootstrap按钮组(一)
- bootstrap按钮组(二)
- bootstrap 导航 -按钮组导航
- Bootstrap—使用按钮组
- sklearn knn与kmeans
- c语言学习----运算篇
- Android与Asp.net webApi参数传递
- s5pv210 的定时器
- 二叉树层序遍历
- Bootstrap按钮组
- poj 3463(次短路径)
- react-native图片组件的使用
- 5-15 计算圆周率
- Shell的系统变量
- Redis源码解析:02链表
- MyBatis_入门程序
- 自定义View笔记(一)
- 程序猿2015总结