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 相关文章推荐
qTip 基于JQuery的Tooltip插件[兼容性好]
Sep 01 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
javascript实现判断鼠标的状态
Jul 10 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
详解node和ES6的模块导出与导入
Feb 19 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
解析array splice的移除数组中指定键的值,返回一个新的数组
2013/07/02 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
javascript 特殊字符串
2009/02/25 Javascript
Js 中debug方式
2010/02/07 Javascript
Jquery 表格合并的问题分享
2011/09/17 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
js生成随机数的过程解析
2015/11/24 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
jquery自定义显示消息数量
2017/12/19 jQuery
vue watch自动检测数据变化实时渲染的方法
2018/01/16 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
原生js调用json方法总结
2018/02/22 Javascript
Javascript 编码约定(编码规范)
2018/03/11 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
在Python中移动目录结构的方法
2016/01/31 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
浅析Python函数式编程
2018/10/06 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
python实现单链表的方法示例
2019/09/03 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
python离线安装外部依赖包的实现
2020/02/13 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
自愿离婚协议书范文2014
2014/10/12 职场文书
计划生育汇报材料
2014/12/26 职场文书
2015质检员个人年终工作总结
2015/10/23 职场文书
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android
Python jiaba库的使用详解
2021/11/23 Python
利用Python实现Picgo图床工具
2021/11/23 Python