Bootstrap3系列:按钮组
1. 基本实例
1.1 示例代码
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
.btn-group中包含多个.btn
1.2 示例效果
2. 按钮工具栏
2.1 示例代码
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-step-backward"></span>
</button>
<button type="button" class="btn btn-default"">
<span class="glyphicon glyphicon-backward"></span>
</button>
</div>
<div class="btn-group">
<span class="btn btn-default"">1</span>
<span class="btn btn-default"">2</span>
<span class="btn btn-default"">...</span>
<span class="btn btn-default"">9</span>
<span class="btn btn-default"">10</span>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default"">
<span class="glyphicon glyphicon-forward"></span>
</button>
<button type="button" class="btn btn-default"">
<span class="glyphicon glyphicon-step-forward"></span>
</button>
</div>
</div>
一个.btn-toolbar中包含多个.btn-group
2.2 示例效果
3. 大小
在.btn-group上添加.btn-group-*设置按钮组中的每个按钮。
3.1 示例代码
3.2 示例效果
4. 嵌套
下拉菜单混合到一系列按钮中,把 .btn-group 放入另一个 .btn-group 中。
4.1 示例代码
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group">
<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>
4.2 示例效果
5. 垂直排列
.btn-group-vertical设计垂直排列的按钮组
5.1 示例代码
<div class="btn-group-vertical">
<button type="button" class="btn btn-default">Top</button>
<button type="button" class="btn btn-default">Center</button>
<button type="button" class="btn btn-default">Bottom</button>
</div>
5.2 示例效果
6. 两端对齐排列的按钮组
.btn-group.btn-group-justified 中包裹一系列.btn元素
6.1 示例代码
<ul class="btn-group btn-group-justified">
<li class="btn btn-default">Left</li>
<li class="btn btn-default">Middle</li>
<li class="btn btn-default">Right</li>
</ul>
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
6.2 示例效果
Bootstrap3系列:按钮组的更多相关文章
- Bootstrap系列 -- 29. 按钮组
单个按钮在Web页面中的运用有时候并不能满足我们的业务需求,常常会看到将多个按钮组合在一起使用,比如富文本编辑器里的一组小图标按钮等 按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常 ...
- Bootstrap3基础 btn-group-vertical 按钮组(横着、竖着排列)
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- Bootstrap<基础十三> 按钮组
按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.你可以通过Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为. ...
- Bootstrap历练实例:垂直的按钮组
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- bootstrap 按钮组的嵌套
您可以在一个按钮组内嵌套另一个按钮组,即,在一个 .btn-group 内嵌套另一个 .btn-group .当您想让下拉菜单与一系列按钮组合使用时,就会用到这个. 实例: <!DOCTYPE ...
- Bootstrap历练实例:按钮组大小
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap历练实例:基本按钮组
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- bootstrap按钮组
种类 -a, input , button 块级 btn-block 按钮组 btn-group btn-group-justified btn-group-vertical </div ...
- VC++ 动态生成 成组的 RadioButton 按钮组
先说一下 静态创建的方法: 单选按钮也属于CButton类,但由于单选按钮总是成组使用的,所以它在制作和使用上与普通按钮有一定区别.假设有三个单选按钮组成一组,初始时,第一个单选按钮处于选中状态.我们 ...
随机推荐
- js-静态、原型、实例属性
本篇来说一下js中的属性: 1.静态属性 2.原型属性 3.实例属性 静态属性: function klass(){} var obj=new klass(); klass.count=0; klas ...
- [APUE]进程控制(上)
一.进程标识 进程ID 0是调度进程,常常被称为交换进程(swapper).该进程并不执行任何磁盘上的程序--它是内核的一部分,因此也被称为系统进程.进程ID 1是init进程,在自举(bootstr ...
- 初步认识TDD
TDD,测试驱动开发(Test Driven Development)是极限编程中倡导的程序开发方法,以其倡导先写测试程序,然后编码实现其功能得名.本文将对TDD有一个较为系统的认识. 基础属性 ...
- webapp应用--模拟电子书翻页效果
前言: 现在移动互联网发展火热,手机上网的用户越来越多,甚至大有超过pc访问的趋势.所以,用web程序做出仿原生效果的移动应用,也变得越来越流行了.这种程序也就是我们常说的单页应用程序,它也有一个英文 ...
- XSS分析及预防
XSS(Cross Site Scripting),又称跨站脚本,XSS的重点不在于跨站点,而是在于脚本的执行.在WEB前端应用日益发展的今天,XSS漏洞尤其容易被开发人员忽视,最终可能造成对个人信息 ...
- CentOS7使用firewalld打开关闭防火墙与端口(转载)
1.firewalld的基本使用 启动: systemctl start firewalld 查看状态: systemctl status firewalld 停止: systemctl disabl ...
- WEB安全隐患
org.apache.commons.lang.StringEscapeUtils 进行输入框内容处理 [StringEscapeUtils.escapeSql(str);StringEscapeUt ...
- 参数探测(Parameter Sniffing)影响存储过程执行效率解决方案
如果SQL query中有参数,SQL Server 会创建一个参数嗅探进程以提高执行性能.该计划通常是最好的并被保存以重复利用.只是偶尔,不会选择最优的执行计划而影响执行效率. SQL Server ...
- NodeJS使用mysql
1.环境准备 手动添加数据库依赖: 在package.json的dependencies中新增, "mysql" : "latest", { "nam ...
- (转载)linux下各个文件夹的作用
linux下的文件结构,看看每个文件夹都是干吗用的/bin 二进制可执行命令 /dev 设备特殊文件 /etc 系统管理和配置文件 /etc/rc.d 启动的配置文件和脚本 /home 用户主目录的基 ...