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 相关文章推荐
JS 进度条效果实现代码整理
May 21 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
jQuery上传多张图片带进度条样式(DEMO)
Mar 02 Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 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
探讨方法的重写(覆载)详解
2013/06/08 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
14款NodeJS Web框架推荐
2014/07/11 NodeJs
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
对angular4子路由&amp;辅助路由详解
2018/10/09 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
vue 使用lodash实现对象数组深拷贝操作
2020/09/10 Javascript
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
pandas实现excel中的数据透视表和Vlookup函数功能代码
2020/02/14 Python
python实现打砖块游戏
2020/02/25 Python
浅谈Python中的继承
2020/06/19 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
Java提供了哪些企业应用编程接口
2015/02/13 面试题
C#中的验证控件有几种
2014/03/08 面试题
解除劳动合同协议书
2014/04/14 职场文书
群教班子对照检查材料
2014/08/26 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL