BootStrap表单控件之复选框checkbox和单选择按钮radio


Posted in Javascript onMay 23, 2017

1.运行效果如图所示

BootStrap表单控件之复选框checkbox和单选择按钮radio

2.实现代码如下

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>表单控件——复选框checkbox和单选择按钮radio</title>
 <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
 <link rel="stylesheet" 
 href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" 
 integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
 crossorigin="anonymous">
 <!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
 <link rel="stylesheet" 
 href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="external nofollow" 
 integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" 
 crossorigin="anonymous">
</head>
<body>
 <form role="form">
  <h3>示例</h3>
  <div class="checkbox">
   <label for="">
    <input type="checkbox">记住密码
   </label>
  </div>
  <div class="radio">
   <label for="">
    <input type="radio" name="optionsRadios" id="optionsRadios1" 
    value="love" checked>喜欢
   </label>
  </div>
  <div class="radio">
   <label for="">
    <input type="radio" name="optionsRadios" id="optionsRadios2" 
    value="hate">不喜欢
   </label>
  </div>
 </form>
 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" 
 integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" 
 crossorigin="anonymous"></script>
</body>
</html>

以上所述是小编给大家介绍的BootStrap表单控件之复选框checkbox和单选择按钮radio,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery提交form表单时禁止重复提交的方法
Feb 13 Javascript
JS版的date函数(和PHP的date函数一样)
May 12 Javascript
js表单验证实例讲解
Mar 31 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
移动端界面的适配
Jan 11 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 Javascript
vue-for循环嵌套操作示例
Jan 28 Javascript
JS实现4位随机验证码
Oct 19 Javascript
JS实现购物车基本功能
Nov 08 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 #Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 #Javascript
微信小程序request出现400的问题解决办法
May 23 #Javascript
Bootstrap响应式表格详解
May 23 #Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 #Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 #Javascript
详解vue嵌套路由-params传递参数
May 23 #Javascript
You might like
解析php中static,const与define的使用区别
2013/06/18 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
Python中几种导入模块的方式总结
2017/04/27 Python
使用Django Form解决表单数据无法动态刷新的两种方法
2017/07/14 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
质检员岗位职责
2013/12/17 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
汽车运用工程专业求职信
2014/06/18 职场文书
2015年副班长工作总结
2015/05/15 职场文书
感恩老师主题班会
2015/08/12 职场文书
车位出租协议书范本
2016/03/19 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS