<!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. 计算机二级-C语言-程序修改题-190113记录-对指定字符串的大小写变换处理。

    //给定程序中fun函数的功能是:将p所指的字符串中每个单词的最后一个字母改成大写.(这里的“单词”是指由空格隔开的字符串) //重难点:指针对数组的遍历.大小写转换的方法.第一种使用加减32 得到, ...

  2. LeetCode练题——88. Merge Sorted Array

    1.题目 88. Merge Sorted Array——Easy Given two sorted integer arrays nums1 and nums2, merge nums2 into  ...

  3. 域名和URL各部分组成

    什么是域名? 域名,是由一串用点分隔的名字组成的Internet上某一台计算机或计算机组的名称,用于在数据传 输时标识计算机的电子方位. IP地址是Internet主机的作为路由寻址用的数字型标识,人 ...

  4. 杨蓉庆201771010135《面向对象程序设计（java）》第一周学习总结

    第一部分:课程准备部分 填写课程学习 平台注册账号, 平台名称 注册账号 博客园:www.cnblogs.com 艾特大家 程序设计评测:https://pintia.cn/ 艾特你 代码托管平台:h ...

  5. Uncaught SyntaxError: Unexpected identifier 报错 import Vue from 'vue';

    一般情况是因为Webpack与webpack-dev-server版本不兼容导致. package.json { "name": "vue-loader-demo&quo ...

  6. WLC RTU license

    目前思科的某些WLC不是一定要license文件去安装,例如这里提到的RTU license. RTU:Right To Use Right to Use (RTU) licensing is a m ...

  7. 洛谷P1140 相似基因（线性DP)

    题目背景 大家都知道,基因可以看作一个碱基对序列.它包含了444种核苷酸,简记作A,C,G,TA,C,G,TA,C,G,T.生物学家正致力于寻找人类基因的功能,以利用于诊断疾病和发明药物. 在一个人类 ...

  8. 二十二、mysql 执行计划与存储引擎

    1.explain(执行计划)中涉及的各字段理解1.1) select_type列的取值及含义:    SIMPLE                 :简单的SELECT语句(不包括UNION操作或子 ...

  9. BinaryTree(二叉树)

    我认为二叉树的递归实现体现了递归思想的一些重要性质,如果对递归的理解不够的话,想利用递归来实现是很费劲的(实际上我现在都还有些懵...),虽然会用,但一些地方不能弄清楚原因. 经过几天的学习,看了许多 ...

  10. pycharm 右键无法显示unittest框架&&解决右键只有unittest 运行如何取消右键显示进行普通run

    上面是普通文件和unittest 导入的文件右键快捷键显示情况,可以看出两者快捷键都是ctr+shift+F10,如果你是右键模式想运行unitest,但是又不知道哪里配置unittest直接运行快捷 ...