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系列:按钮组相关推荐
- Bootstrap3 按钮组插件
按钮组 将按钮组放在特定的容器中,不必编写JavaScript代码,就可以让按钮组具有HTML的复选框(checkbox)或单选框(radio)的效果. 1)复选按钮组 复选按钮组是类似于复选框的一组 ...
- Bootstrap3基础 btn-group-vertical 按钮组(横着、竖着排列)
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- Bootstrap系列之按钮组(Button group)
文章の目录 1.基本示例 2.按钮工具栏 3.Sizing 4.嵌套 5.Vertical variation 写在最后 将一系列按钮与按钮组一起放在一行中,并使用JavaScript增强它们的功能. ...
- Bootstrap两端对齐的按钮组
两端对齐的按钮组 Bootstrap3两端对齐的按钮组可以将一组按钮拉长为相同的尺寸,并让整个按钮组填满父元素的宽度.对于按钮组中的按钮式下拉菜单也同样适用. 如果按钮组中的按钮是 <a> ...
- Bootstrap禁用某个按钮组
禁用某个按钮组 某些特殊情况下,可能需要垂直分组的按钮效果.这也很简单,只需把 .btn-group类换成.btn-group-vertical类,就可以让按钮组中的按钮堆叠排列.堆叠排列的按钮组中, ...
- Bootstrap按钮组嵌套
按钮组嵌套 按钮组允许嵌套,即可以在一个.btn-group中嵌套另一个.btn-group.比如,当你想给按钮组中的某一个按钮添加下拉菜单时,就会用到这种嵌套结构.如: <div class= ...
- Bootstrap按钮组中按钮的尺寸
按钮的尺寸 在按钮组中,你可以为每个按钮应用按钮的尺寸类,如 .btn-lg..btn-sm或.btn-xs ,来调整按钮的大小. 考虑到这种方式比较麻烦,Bootstrap专门为按钮组提供了额外的尺 ...
- Bootstrap创建按钮组
按钮组 在实际应用中,单个按钮有时候并不能满足我们的业务需求,常常需要将多个按钮组合在一起使用,形成一个页面组件,比如富文本编辑器中的一组小图标按钮等. 创建按钮组 要创建按钮组,只需把相关的链接或按 ...
- 微信小程序 自定义单选复选按钮组的实现(用于实现购物车产品列表功能)
(一)单选按钮组 模型图如下: index.js Page({data: {parameter: [{ id: 1, name: '银色' }, { id: 2, name: '白色' },{ id: ...
最新文章
- 更换VC后DDC提示证书不可用
- 设置窗口大小后无法滚动_新款奥迪A6L更换变速器机电单元后无法完成油冷却阀基本设置...
- python【力扣LeetCode算法题库】300 最长上升子序列(动态规划)
- 通信网络基础期末复习-第一章和第二章-概论和端到端的传输协议
- svm的一些理解(网上收集)
- C++STL常用排序算法
- 手动安装 SAP Spartacus 3.3.0版本并启用服务器端渲染 SSR
- EasyMock教程–入门
- android 换行模式,Android进阶之自定义View(1)实现可换行的TextView
- 希望博客园可以开个邮件列表
- AngularJs学习笔记0——前言
- 工科数学分析之数学感悟
- cisco路由器RIP基础配置命令
- 暴力破解之NTscan
- thinkpad T410i 安装XP时用的一些连接
- 监控之美——Prometheus云原生监控
- 关于Cat,同轴,光纤等以太网电缆的所有信息
- 【es】es界面化管理工具cerebro的安装和使用
- 论文撰写八大技巧与八大心得,一文读懂
- 算法实现数字编号翻译为英文