复选框（Checkbox）

您可以创建复选框按钮 组，并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框按钮组的切换。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bootstrap 历练实例 - 按钮（Button）插件复选框</title>
<meta charset="utf-8" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<script src="jQuery/jquery-2.1.4.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container"style="padding:20px">
<div class="btn-group"data-toggle="buttons">
<label class="btn btn-success"><input type="checkbox" />选项1</label>
<label class="btn btn-primary"><input type="checkbox" />选项2</label>
<label class="btn btn-info"><input type="checkbox" />选项3</label>
</div>
</div>
</body>
</html>

Bootstrap 历练实例 - 按钮（Button）插件复选框的更多相关文章

  1. Bootstrap历练实例：popover插件中的方法

    方法 下面是一些弹出框(Popover)插件中有用的方法: 方法 描述 实例 Options: .popover(options) 向元素集合附加弹出框句柄. $().popover(options) ...

  2. [SAP ABAP开发技术总结]选择屏幕——按钮、单选复选框

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  3. 关于SWT常用组件(按钮,复选框,单选框(Button类))

    Button是SWT中最常用的组件.Button类的继承关系图: Button类的构造方法是newe Button(Composite parent,int style)它有两个参数: 第一个参数:是 ...

  4. Android布局——单复选框（今天上课的内容总结下）

    怎么感觉最近补充的都是监听器的内容,今天学长提了一个新的监听器,看起来很牛批(因为很长) // 添加文本更改的监听器, TextWatcher是监听器的回调接口 text.addTextChanged ...

  5. 关于QT Graphics View开启OpenGL渲染后复选框、微调框等无法正常显示的问题

    之前学习QT Graphics View框架,除了基本的图元外,还可以通过QGraphicsProxyWidget类添加QT的基本Widget(如按钮.复选框.单选框等),常使用的场景类接口如下: Q ...

  6. Ionic Js四：复选框

    ionic 复选框(checkbox)与普通的 HTML 复选框没什么区别,以下实例演示了 ionic 复选框 ion-checkbox 的应用. <ion-checkbox ng-model= ...

  7. 纯css3实现美化复选框和手风琴效果（详细）

    关键技术点和原理: 原理就是把 checkbox或 radio 给隐藏掉   ,然后给选框 绑定一个label标签. 然后用label标签作为容器,在里面放一个:before或一个after 用bef ...

  8. Bootstrap历练实例：按钮(Button)插件单个切换

    单个切换 如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle="button" 作为其属性即可,如下面实例所 ...

  9. bootstrap历练实例：复选框或单选按钮作为输入框组的前缀或后缀

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

随机推荐

  1. thinkphp5控制器访问转换问题

    假设定义了HelloWorld控制器 url访问地址就是:http://localhost/index.php/index/hello_world,与此同时view目录下的模板文件夹要命名为hello ...

  2. noi省选 [九省联考2018]一双木棋题解（状压dp）

    比浙江简单多了........ 题目转送:https://www.luogu.org/problemnew/show/P4363 分析: 我们注意到n和m都很小,考虑一下状压dp. 显然,棋子摆成的形 ...

  3. UVALive 7511 L - Multiplication Table 数学模拟题，暴力

    给定一副表,问其是否合法. 思路:当全部是?的时候,是合法的. 如果不是,那么,就找到一个数字,把它拆成若干个a*b的形式,去判断其它点是否合法即可. 拆分数字的时候,只需要枚举到sqrt(n),因为 ...

  4. (转)Bash Shell常用快捷键

    Bash Shell常用快捷键 原文:https://github.com/hokein/Wiki/wiki/Bash-Shell%E5%B8%B8%E7%94%A8%E5%BF%AB%E6%8D%B ...

  5. DM设备的创建与管理

    DM(Device Mapper)即设备映射(逻辑设备). MD和DM是Linux内核上2种工作机制(实现逻辑设备)不同的模块. Physical Volume(PV): 物理卷         底层 ...

  6. Oracle权限管理

    一)用户Oracle中的用户分为二大类1)Oracle数据库服务器创建时,由系统自动创建的用户,叫系统用户,如sys.2)利用系统用户创建的用户,叫普通用户,如scott,hr,c##tiger,zh ...

  7. prototype 以及 constructor 属性的理解

    1 为什么 xx.constructor.prototype 可以访问到当前对象的原型. 'str'.constructor.prototype      'str'.constructor 指向当前 ...

  8. 自定义控件使用GDI+绘制旋转Label文字

    http://www.cnblogs.com/CUIT-DX037/ 1.添加用户控件: 2.添加代码: public partial class UcLabel : UserControl { pu ...

  9. 构建第一个Spring Boot2.0应用之集成mybatis、Druid（七）

    一.环境: IDE:IntelliJ IDEA 2017.1.1 JDK:1.8.0_161 Maven:3.3.9 springboot:2.0.2.RELEASE 二.说明:      本文综合之 ...

  10. git学习(一)

    提:       远程的主机名(远程仓库服务器名):  origin   本地的主分支: master(本地master分支)      远程的主分支: maste(远程仓库的master分支) gi ...