Bootstrapbutton组
button组同意多个button被堆叠在同一行上。当你想要把button对齐在一起时,这就显得很实用。
基本button组
给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>
button工具栏
使用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>
调整button大小
给btn-group 加上.btn-group-lg,.btn-group-sm。.btn-group-xs能够调整整个button组的button大小
<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>
嵌套
能够在一个button组内嵌套还有一个button组。即,在一个 .btn-group 内嵌套还有一个 .btn-group 。
当下拉菜单与一系列button组合使用
时。就会用到这个。
<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之后,效果变成了上图所看到的。
垂直的button组
使用.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>
转载于:https://www.cnblogs.com/yutingliuyl/p/7050004.html
Bootstrapbutton组相关推荐
- 妙用postman系列——postman建组、分享
妙用postman系列--postman建组.分享 添加新的组和请求. 3.生成分享链接 4.导入分享链接
- C++ OJ 中多行数据输入(大小写转换、通过移位运算实现2的n次方、多组输入,每行输入数量不一样)
1. 多组输入,输出每行最大值 while(cin>>a>>b) 主要解决的是两个为一组的多组数据输入,当一次只输入一个数据时就用 while(cin>>a) 输入 ...
- Linux shell 学习笔记(5)— 文件权限(添加、修改、删除用户及创建、修改群组)
1. Linux的安全性 Linux 安全系统的核心是用户账户.每个能进入 Linux 系统的用户都会被分配唯一的用户账户.用户对系统中各种对象的访问权限取决于他们登录系统时用的账户. 用户权限是通过 ...
- Win10家庭版如何启用本地组策略
组策略对于优化和维护Windows系统来说十分重要.众所周知,Windows 10家庭版中并不包含组策略,对于使用家庭版Windows的朋友来说,十分不方便.小编将以Windows10家庭版为例,带大 ...
- LeetCode简单题之子数组最大平均数 I
题目 给你一个由 n 个元素组成的整数数组 nums 和一个整数 k . 请你找出平均数最大且 长度为 k 的连续子数组,并输出该最大平均数. 任何误差小于 10-5 的答案都将被视为正确答案. 示例 ...
- LeetCode中等题之特殊等价字符串组
题目 给你一个字符串数组 words. 一步操作中,你可以交换字符串 words[i] 的任意两个偶数下标对应的字符或任意两个奇数下标对应的字符. 对两个字符串 words[i] 和 words[j] ...
- LeetCode简单题之通过翻转子数组使两个数组相等
题目 给你两个长度相同的整数数组 target 和 arr . 每一步中,你可以选择 arr 的任意 非空子数组 并将它翻转.你可以执行此过程任意次. 如果你能让 arr 变得与 target 相同, ...
- 摄像头模组(CCM)与镀膜
摄像头模组(CCM)与镀膜 手机镜头是有颜色的,而且不同的手机镜头颜色是不同的,有的是红色,有的是蓝色,有的还是金色. 除了手机镜头外,平时用的数码相机镜头.望远镜.眼镜等的镜片都是有颜色的.这些颜色 ...
- 一个整型数组里除了两个数字之外,其他的数字都出现了两次
题目: 一个整型数组里除了两个数字之外,其他的数字都出现了两次 解答: 我们从头到尾异或数组中的每个数字,那么最终的结果是两个只出现一次数字的异或的结果,由于两个数字不一样,那么异或的结果肯定不为0, ...
最新文章
- 个人销售建筑服务器,建筑个人云服务器
- 弃用notepad++
- OpenLayers 3 之 地图样式(ol.style)详解
- Java并发编程-ReentrantLock源码分析
- 简陋版C语言仿真通讯录
- php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能
- 【Spring】Spring 关于 Redis 的序列化器
- 工作记录 反射
- 《阿甘正传》,看了很多遍,是否留意到这个镜头???
- 百年GE濒临破产,传奇霸业何以衰亡?
- Java中string,map,json之间的常用转换方法(json转map,map转json,json转string等)
- Eclipse主题设置
- 腾讯帮助警方破获 30+ 起吃鸡外挂案件;Java 领域的五大发展预测
- GitHub 微信公众号爬虫推荐
- ActivityManager Displayed 源码位置
- python 方向盘_码农:科目二(可以摸方向盘了)
- Magento compare products ajax
- Beyond Compare v3.3.13 中文版
- Uncaught Error: USERKEY_PLAT_NOMATCH 的原因和解决办法
- 存储备份一体机mysql代理_天融信备份存储一体机
热门文章
- Lambda表达式示例代码
- Linux进程间通信(匿名管道)
- loadrunner11基础使用
- 推挽输出和开漏输出_平台/输入amp;输出
- futuretask java 并发请求_Java并发机制(9)--Callable、Future、FutureTask的使用
- 零基础如何学习ui设计?
- 现在想转行学习前端,该怎么学才能最快入门
- 在web开发中,为什么前端比后端更得到转行程序员的青睐?
- 程序员吐槽:组里新来一个“加班狂”,可把大家害惨了
- 7-6 考试座位号 15 分 C语言代码,PAT Basic 1041. 考试座位号(15)(C语言实现)