<!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语言】输入5个整数并按输入顺序逆序输出

    #include <stdio.h> int main() { ],i; printf("请输入5个整数:\n"); ;i<;i++) scanf("% ...

  2. 解决1130-host'192.168.2.137'is not allowed to connect to this mysql server报错问题

    连接数据库服务器出现1130-host'192.168.2.137'is not allowed to connect to this mysql server错误, 这个问题是因为在数据库服务器中的 ...

  3. Python基础（一） Python3环境搭建

    转载清注明原文地址,谢谢. OS:Windows 10 第一步,从Python官方下载安装包 Windows端下载地址:https://www.python.org/downloads/windows ...

  4. 关于SQL

    set nocount on 作用 阻止在结果集中返回显示受t-sql语句影响的行计数信息 set nocount on 不返回计数,set nocount off 返回计数 即使当set nocou ...

  5. UIView的API

    - (instancetype)initWithFrame:(CGRect)frame; 使用指定的框架矩形初始化并返回新分配的视图对象. - (instancetype)initWithCoder: ...

  6. Python中的lambda函数介绍

    Lambda函数,即Lambda 表达式(lambda expression),是一个匿名函数(不存在函数名的函数),Lambda表达式基于数学中的λ演算得名,直接对应于其中的lambda抽象(lam ...

  7. Spring Boot 使用 CXF 调用 WebService 服务

    上一张我们讲到 Spring Boot 开发 WebService 服务,本章研究基于 CXF 调用 WebService.另外本来想写一篇 xfire 作为 client 端来调用 webservi ...

  8. ANSYS布尔运算APDL

    目录 1.交运算 2.加运算 3.减运算 4.分割 5. 搭接 6. 互分 6.粘结 1.交运算 交运算的结果是由每个初始图元的共同部分,形成一个新的图元. 命令 功能 备注 LINL 线与线的交 A ...

  9. Qt实现通用模板单例

    #include <QAtomicPointer> #include <QMutex> #include <memory> using namespace std; ...

  10. php 算法知识 猴子选大王

    一群猴子排成一圈,按1,2,...,n依次编号. 然后从第1只开始数,数到第m只,把它踢出圈, 从它后面再开始数,再数到第m只,在把它踢出去..., 如此不停的进行下去,直到最后只剩下一只猴子为止,那 ...