<!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. P3368 (模板)树状数组2

    借这个题学新姿势,这个题需要利用差分才能AC,普通树状树有3个点过不了. 差分原理(参考题解区大佬): 一个例子,一组数据 $ a[] = { 1, 5, 4, 2, 3 } $,差分后得到 $ b[ ...

  2. Node.js 服务端处理图片

    Node 服务端处理图片 服务端进行图片处理是很常见的需求,但是Node在这一块相对来说比较薄弱.找了几个比较常见的模块来解决问题. gm GraphicsMagick for node 使用Open ...

  3. SqlHelper类编写前奏:DataReader关闭链接出现问题

    SqlHelper是一个执行数据库操作的助手类,但是当我们没学过DataSet之前,要想使用using搭配SqlConnection和SqlCommand写出一个真正独立的SqlHelper都是不太可 ...

  4. webpack-bundle-analyzer插件的使用方式

    第一步: npm install --save-dev webpack-bundle-analyzer 第二步: 在build/webpack.prod.config.js中的module.expor ...

  5. 加密设备NAT对IPSec的影响

    加密设备NAT对IPSec VPN的影响:我们先配置好经典的IPSec VPN,然后在R3上做PAT看会对IPSec VPN产生什么影响(不会对有隧道的IPSec VPN技术产生影响). 现在默认配置 ...

  6. python集合操作方法详解

    前言 说集合之前,我们先说一个小例子,假设某公司有五个人喜欢打篮球,五个人喜欢打游戏,问即打游戏有打篮球的人都有哪些? play_basketball = ['a','b','c','d','e'] ...

  7. python浅析格式化输出和深浅copy

    一,格式化输出 今天主要想记录一下关于格式化输出的例子,然后结合了自己的理解,分析如下: 格式是 :百分号+占位符 主要有三种使用形式:%s  (其中s表示string)表示字符串 %d  (其中d表 ...

  8. 字符流---Day32

    时隔多久,我又回来写博客了,最近忙于两个课设,五周,搞得头发都不知道掉了多少根了,还没成为程序员就开始掉了,等我成为一名程序员的时候岂不是要秃头了,IT界的人会不会帮我当成大佬了,哈哈哈哈,希望我以后 ...

  9. 记一次RocketMQ源码导入IDEA过程

    首先,下载源码,可以官网下载source包,也可以从GitHub上直接拉下来导入IDEA.如果是官网下载的source zip包,直接作为当前project的module导入,这里不赘述太多,只强调一 ...

  10. teraterm中状态框statusbox

    ;Author : Bing ;Date : 1/17/2019;Usage: modify log drictory according to actual drictorylogfile=&quo ...