<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Bootstrap 实例 - 复选框和单选按钮</title>

        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    </head>

    <body>

        <label for="name">默认的复选框和单选按钮的实例</label>

        <div class="checkbox">

            <label><input type="checkbox" value="">选项 1</label>

        </div>

        <div class="checkbox">

            <label><input type="checkbox" value="">选项 2</label>

        </div>

        <div class="radio">

            <label>

                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 选项 1

            </label>

        </div>

        <div class="radio">

            <label>

                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">选项 2 - 选择它将会取消选择选项 1

            </label>

        </div>

        <label for="name">内联的复选框和单选按钮的实例</label>

        <div>

            <label class="checkbox-inline">

                <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1

            </label>

            <label class="checkbox-inline">

                <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2

            </label>

            <label class="checkbox-inline">

                <input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3

            </label>

            <label class="radio-inline">

                <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 选项 1

            </label>

            <label class="radio-inline">

                <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 选项 2

            </label>

        </div>

    </body>

</html>

吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：复选框（Checkbox）和单选框（Radio）的更多相关文章

  1. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：表单帮助文本

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：表单控件大小

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：表单控件状态

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：水平表单

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：内联表单

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：静态控件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：选择框（Select）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单：文本框（Textarea）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. iOS 开发之函数式编程思想（Functional Programming）

    函数式编程(Functional Programming), 函数式编程强调的函数:1.不依赖外部状态:2.不改变外部状态. 函数式编程可解决线程安全问题,每一个函数都是线程安全的. 时间状态:变量一 ...

  2. 今天启动项目的时候报了一个错MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk.

    从报错信息看应该是内存问题导致不能持久化到硬盘,在网上找到了一个解决方法: Redis被配置为保存数据库快照,但它目前不能持久化到硬盘.用来修改集合数据的命令不能用.请查看Redis日志的详细错误信息 ...

  3. redis场景分析的很到位

    链接:http://www.zhihu.com/question/19829601/answer/88069207来源:知乎 1. MySql+Memcached架构的问题 实际MySQL是适合进行海 ...

  4. 数据结构--Java语言描述

    本篇文章是为了记录自己在学习数据结构时的笔记,会对常见的数据结构做基本的介绍以及使用Java语言进行实现.包括 动态数组 栈 队列 链表 二分搜索树 优先队列和堆 线段树 Trie树 并查集 AVL树 ...

  5. 抽取JDBC工具类

    package com.wbytts.util; import java.io.IOException; import java.io.InputStream; import java.sql.Con ...

  6. win10使用L2TP连接失败，报远程服务器未响应错误解决办法，亲测可用！

    报错如下: 原因是L2TP连接需要IPSec加密,远程服务器未响应说明IPSec加密被禁用了,需要在注册表启用它,具体步骤如下: 1.以管理员账号身份打开CMD,win10 是 win+x键 2.找到 ...

  7. mqtt开源服务器 EMQX ，客户端MQTTX5.0，使用指南

    服务器 EMQX 官网: https://docs.emqx.io/broker/v3/cn/getstarted.html#mqtt-clients 一.安装启动 # 各平台下载https://ww ...

  8. wx小程序笔记

    目录 p18 事件绑定1 p19 事件绑定2 btn p20+ view 相关,wxss,less,css 零基础玩转微信小程序[黑马程序员] https://www.bilibili.com/vid ...

  9. VUE 鼠标右键自定义

    需要在区域内右击自定义菜单的DIV绑定contextmenu右击事件 <div   style="width:100% ; z-index: inherit;position: rel ...

  10. 操作系统OS - 常见系统的调度算法

    https://en.wikipedia.org/wiki/Scheduling_(computing) 在wiki的下面可以找到