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 相关文章推荐
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
JS短路原理的应用示例 精简代码的途径
Dec 13 Javascript
Jquery api 速查表分享
Jan 12 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
Feb 16 Javascript
理解javascript正则表达式
Mar 08 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
js实现简单的计算器功能
Jan 16 Javascript
JS排序之选择排序详解
Apr 08 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 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 从数据库提取二进制图片的处理代码
2009/09/09 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
PHP基于phpqrcode类生成二维码的方法示例详解
2020/08/07 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
JQuery 弹出框定位实现方法
2010/12/02 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
详细讲解Python中的文件I/O操作
2015/05/24 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
python双向链表原理与实现方法详解
2019/12/03 Python
Python+OpenCV图像处理——打印图片属性、设置存储路径、调用摄像头
2020/10/22 Python
Django利用elasticsearch(搜索引擎)实现搜索功能
2020/11/26 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
node中使用shell脚本的方法步骤
2021/03/23 Javascript
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
法律工作求职自荐信
2013/10/31 职场文书
工作自我评价分享
2013/12/01 职场文书
财政专业求职信范文
2014/02/19 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
2014年个人师德工作总结
2014/12/04 职场文书
初中同学会致辞
2015/08/01 职场文书
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫