复选框（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. Linux服务之 Nginx安装

    安装包下载: 链接:https://pan.baidu.com/s/1yna9nvT_9iYw4_0uVQRgFw 提取码:nurm yum -y install gcc automake autoc ...

  2. POJ1023 The Fun Number System

    题目来源:http://poj.org/problem?id=1023 题目大意: 有一种有趣的数字系统.类似于我们熟知的二进制,区别是每一位的权重有正有负.(低位至高位编号0->k,第i位的权 ...

  3. 08.Spring Bean 解析 - BeanDefinitionDocumentReader

    基本概念 BeanDefinitionDocumentReader ,该类的作用有两个,完成 BeanDefinition 的解析和注册 . 解析:其实是解析 Ddocument 的内容并将其添加到  ...

  4. Regionals 2014 >> Asia - Taichung 7003 - A Balance Game on Trees 树形DP +　二维费用背包

    https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_probl ...

  5. JAVA多线程面试题目

    1,java中有几种方法可以实现一个线程? 答:在Java中实现一个线程有两种方法,第一是实现Runnable接口实现它的run()方法,第二种是继承Thread类,覆盖它的run()方法.这两种方法 ...

  6. 用boost模块加速你的drupal站

    boost模块可以对 html, xml, ajax, css,  javascript进行缓存,极大提升游客访问的速度,几乎可以和静态页面媲美.下载boost http://drupal.org/p ...

  7. pat1097. Deduplication on a Linked List (25)

    1097. Deduplication on a Linked List (25) 时间限制 300 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 ...

  8. Swift网络库Alamofire的导入

    一.手动导入 1, 官网下载 Alamofire 2, 解压下载的文件 放入工程的顶层目录下 3, 打开工程 Add Files 4, 选中项目 TARGETS > General > E ...

  9. spring ehcache 使用详解

    Spring 整合 Ehcache 管理缓存详解  yellowbutterfly 前言 Ehcache 是一个成熟的缓存框架,你可以直接使用它来管理你的缓存. Spring 提供了对缓存功能的抽象: ...

  10. javascript Boolean

    Boolean 对象表示两个值:true 或 false 创建Boolean对象的语法 new Boolean(value)  //构造函数 Boolean(value; //转换函数 参数 参数va ...