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 Undefined,Null类型和NaN值区别
Oct 22 Javascript
JS 类型转换常见方法小结
May 31 Javascript
更优雅的事件触发兼容
Oct 24 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
JavaScript数据结构链表知识详解
Nov 21 Javascript
微信小程序 解决swiper不显示图片的方法
Jan 04 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
JavaScript中的LHS和RHS分析详情
Apr 06 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简单判断文本编码的方法
2015/07/30 PHP
PHP rmdir()函数的用法总结
2019/07/02 PHP
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
jQuery编写网页版2048小游戏
2017/01/06 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
js实现鼠标拖曳效果
2020/12/30 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
python爬虫要用到的库总结
2020/07/28 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
会计毕业生求职简历的自我评价
2013/10/20 职场文书
名人演讲稿范文
2013/12/28 职场文书
校园安全广播稿
2014/02/08 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
勇敢的心观后感
2015/06/09 职场文书
婚宴父母致辞
2015/07/27 职场文书
详解Python中的for循环
2022/04/30 Python