<!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. 【IO多路复用】

    " 目录 一.IO模型介绍 二.阻塞IO(blocking IO) 三.非阻塞IO(non-blocking IO) 四.多路复用IO(IO multiplexing) 五.异步IO(Asy ...

  2. 基于MHA的MYSQL高可用方案

    一.MHA 简介 MHA (Master High Availability )目前在 MySQL 高可用方面是一个相对成熟的解决方案,它由日本 DeNA 公司的 youshimaton 员工(现就职 ...

  3. 计算机二级-C语言-对结构体数据进行求平均值。对结构体数据进行比较处理。

    //函数fun的功能是:计算形参x所指数组中N个数的平均值(规定所有数均为正数),作为函数返回,并将大于平均值的数放在形参y所指数组中,在主函数中输出. //重难点:对结构体数据进行求平均值. #in ...

  4. leetCode练题——27. Remove Element

    1.题目 27. Remove Element——Easy Given an array nums and a value val, remove all instances of that valu ...

  5. 「CF1142B」Lynyrd Skynyrd

    传送门 Luogu 解题思路 发现一个性质: 对于排列的任何一个循环位移,排列中的同一个数的前驱肯定是不变的. 而且,如果一个排列的循环位移是某一个区间的子序列,那么这个循环位移的结尾的 \(n-1\ ...

  6. Python - 关于属性访问的优先级，属性访问顺序，python attributel lookup，类和实例访问属性的顺序

    object.__getattribute__(self, name) 类中的数据描述符 object.__dict__.get(name) 自身属性字典 object.__class__.__dic ...

  7. sklearn笔记：决策树

    概述 sklearn中决策树的类都在 tree 这个模块下.这个模块总共包含五个类: tree.DecisionTreeClassifier:分类树 tree.DecisionTreeRegresso ...

  8. Linux 目录结构与目录操作

    目录结构 Linux的文件系统是采用级层式的树状目录结构,在此结构中的最上层是根目录"/",然后再次目录下再创建其他目录 在Linux系统中,一切皆文件 常见目录作用 / : 所有 ...

  9. JAVA分级测试——选课系统（补发）

    博客园似乎上传图片多了之后会出现各种问题,所以只能直接上代码了 <!DOCTYPE HTML> <html lang="zh"> <head> ...

  10. js里常见的三种请求方式$.ajax、$.post、$.get分析

    $.post和$.get是$.ajax的一种特殊情况: $.post和$.get请求都是异步请求,回调函数里写return来返回值是无意义的, 回调函数里对外部变量进行赋值也是无意义的. 即使是$.a ...