Bootstrap3 按钮组插件
按钮组
将按钮组放在特定的容器中,不必编写JavaScript代码,就可以让按钮组具有HTML的复选框(checkbox)或单选框(radio)的效果。
1)复选按钮组
复选按钮组是类似于复选框的一组按钮,用户可以选择按钮组中的多个按钮。要添加这个功能,只需给 .btn-group 的按钮组容器添加 data-toggle="buttons " 属性,并将一组包含复选框的 <label> 元素放入容器中即可:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="checkbox" autocomplete="off" checked>Checkbox 1(pre-checked)
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">Checkbox 2
</label>
<label class="btn btn-primary">
<input type="checkbox" autocomplete="off">Checkbox 3
</label>
</div>
复选按钮组跟HTML中的复选框使用方法相同,单击按钮组中的某个按钮,按钮将被选中,再次单击,将取消选中。被选中的按钮以深色背景显示,取消选中的按钮以默认的浅色背景显示。效果如图 4‑17所示:
图4-17 复选按钮组
2)单选按钮组
单选按钮组是类似于单选框的一组按钮,用户每次只能选择按钮组中的一个按钮。要添加这个功能,只需给 .btn-group 的按钮组容器添加 data-toggle="buttons-radio" 属性,并将一组包含单选按钮的 <label> 元素放入容器中即可:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>
单选按钮组跟HTML中的单选框使用方法相同,单击按钮组中的某个按钮,该按钮将被选中,其它按钮将取消选中。被选中的按钮以深色背景显示,取消选中的按钮以默认的浅色背景显示。效果如图 4‑18所示:
图4-18 单选按钮组
关于作者
歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。
Bootstrap3 按钮组插件相关推荐
- Bootstrap3基础 btn-group-vertical 按钮组(横着、竖着排列)
内容 参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
- Bootstrap3系列:按钮组
1. 基本实例 1.1 示例代码 <div class="btn-group"><button type="button" class=&qu ...
- Bootstrap3 按钮状态提示
按钮 Bootstrap中的按钮插件(button.js)被赋予多种功能,如为工具条之类的组件赋予状态提示功能.状态切换功能.或者按钮组的功能. 在页面多次加载之间,Firefox 仍然保持表单控件的 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:按钮组
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>B ...
- Bootstrap 按钮组
按钮组允许多个按钮被堆叠在同一行上.当你想要把按钮对齐在一起时,这就显得非常有用.您可以通过 Bootstrap 按钮(Button) 插件 添加可选的 JavaScript 单选框和复选框样式行为. ...
- Bootstrap组件_按钮组
按钮组通过按钮组容器把一组按钮放在同一行里.通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为.<!DOCTYPE html> <html lang="en&qu ...
- class触发后让另一个class加样式_Bootstrap的按钮组样式
将一系列的.btn包裹在.btn-group内,并使用我们提供的插件,可以实现选择按钮.选取块状区的行为功能. <div class="row mt-5 d-block"&g ...
- Bootstrap两端对齐的按钮组
两端对齐的按钮组 Bootstrap3两端对齐的按钮组可以将一组按钮拉长为相同的尺寸,并让整个按钮组填满父元素的宽度.对于按钮组中的按钮式下拉菜单也同样适用. 如果按钮组中的按钮是 <a> ...
- Bootstrap禁用某个按钮组
禁用某个按钮组 某些特殊情况下,可能需要垂直分组的按钮效果.这也很简单,只需把 .btn-group类换成.btn-group-vertical类,就可以让按钮组中的按钮堆叠排列.堆叠排列的按钮组中, ...
最新文章
- 为图片添加半透明遮罩效果
- LAMP搭建phpMyadmin管理平台以及wordpress个人博客系统
- SAP MM UB类型STO不能转供应商寄售库存?
- Jmeter常见问题(转)
- asyncio协程与并发
- how is our class instance registered - thanks to AnnotationConfigWebApplicationC
- Cocos2d-JS v3.0 alpha
- 欧洲与北美5G开战,最后的赢家却是高通?
- linux运维常见英文报错中文翻译(菜鸟必知)
- oracle错误输出,oracle – SQL小提琴输出错误
- php refresh blank,php – Laravel Blank白页
- vss2005版本库迁移
- oracle查参数,各种oracle参数查询语句
- AForge处理视频和拍照(暂时没有音频)
- 5.13 综合案例2.0-火焰检测系统(2.2版本接口有更新)
- SpringOne 2017重要公告
- QT控件之QComboBox(下拉框相关)
- PHP用什么标签方便,PHP_用途相似的标签:acronym与abbr,有的时候为了方便传阅或者记 - phpStudy...
- 1.488Mpps是如何计算出来的
- Linux软件手动添加到桌面或启动栏