<!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. Activiti工作流学习之概述(一)

    一.工作流介绍 我第一次听到这个词,是蒙逼的,再看百度百度,更傻眼了,完全说的不像人话啊,举几个生活中的例子,就明白多了比如:请假.报销等等,如果文字太过抽象,请看图: 二.工作流引擎 Process ...

  2. disconf---分布式配置管理平台的搭建(windows版本)

    本人由刚开始接触博客,难免会有不足和错误,写博客只是记录本人在学习和工作的过程中的成长,如有不足,欢迎各位指正,谢谢~ 一.废话不多说,直接进入正题: ①获取github代码 https://gith ...

  3. php引入html页面 css报错 404

    php引入html页面 css报错 404, html页面内 有css, 有一样 是这么写的 结果就报错了, 原来是 -moz这一句,在这句前面随便加一句别的样式就可以....

  4. 计算机二级-C语言-程序修改题-190113记录-对指定字符串的大小写变换处理。

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

  5. Java入门笔记 03-面向对象(下)

    介绍:除了前面介绍的关于类.对象的基本语法之外,下面继续介绍Java面向对象的特性. 一. 包装类: 从JDK 1.5以后,Java就提供了自动装箱和自动拆箱操作,即: 自动装箱:将一个基本类型的变量 ...

  6. Django框架之模板语言特殊标记(将后端的数据显示到前端)

    后端代码 def GetMain(request): return render( request, "main.html", { "user1":" ...

  7. 连接mysql,oracle的命令 以及导入sql文件

    Oracle 1,sqlplus  username/password 导入: 2,@后面跟着sql文件的路径,回车,导入数据 @D:/test.sql; 导入完毕,输入commit; MySQL: ...

  8. ANSYS 非线性材料模型简介1 ---常用弹塑性模型

    目录 1. 材料非线性 2. 三个准则 2.1 屈服准则 2.2 流动准则 2.3 强化准则 3. 常用弹塑性模型 3.1 双线性等向强化 3.2 多线性等向强化 3.3 非线性等向强化 3.4 双线 ...

  9. 2.4G芯片

    一 南京中科微: Si24R1GFSK无线收发芯片    Si24R1专为低功耗无线通信应用场合设计.工作频率为2400MHz-2525MHz,共有126个1MHz带宽的信道:典型应用:有源RFID. ...

  10. The Captain 题解

    20200216题目题解 这是一篇题解祭题解记,但一共就一道题目.(ROS菜大了) 题目如下: The Captain 给定平面上的n个点,定义(x1,y1)到(x2,y2)的费用为min(|x1-x ...