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 相关文章推荐
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
详解Angular路由之路由守卫
May 10 Javascript
js数据类型检测总结
Aug 05 Javascript
vue实现分页组件
Jun 16 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
js实现双色球效果
Aug 02 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
2016/06/02 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
详解vue.js的devtools安装
2017/05/26 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
Vue组件模板及组件互相引用代码实例
2020/03/11 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
Python使用pylab库实现画线功能的方法详解
2017/06/08 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
详解使用python绘制混淆矩阵(confusion_matrix)
2019/07/14 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
特步官方商城:Xtep
2017/03/21 全球购物
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
PHP面试题集
2016/12/18 面试题
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
博士导师推荐信
2015/03/25 职场文书
孙振耀退休感言
2015/08/01 职场文书
mysql幻读详解实例以及解决办法
2022/06/16 MySQL