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 相关文章推荐
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
Jquery实现仿腾讯微博发表广播
Nov 17 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
AngularJS Select(选择框)使用详解
Jan 18 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
微信小程序实现手势图案锁屏功能
Jan 30 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
详解React的回调渲染模式
Sep 10 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获取photoshop写入图片文字信息的方法
2015/03/31 PHP
PHP获取表单数据与HTML嵌入PHP脚本的实现
2017/02/09 PHP
简单实现php上传文件功能
2017/09/21 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
form.submit()不能提交表单的原因分析
2014/10/23 Javascript
node.js中的fs.statSync方法使用说明
2014/12/16 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
2016/04/18 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
Vue2 SSR渲染根据不同页面修改 meta
2017/11/20 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
Python基础语法(Python基础知识点)
2016/02/28 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
Python正则表达式非贪婪、多行匹配功能示例
2017/08/08 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
Pytorch to(device)用法
2020/01/08 Python
tensorflow如何继续训练之前保存的模型实例
2020/01/21 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
python批量生成条形码的示例
2020/10/10 Python
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
青年创业培训欢迎词
2014/01/08 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
保护环境倡议书300字
2014/05/19 职场文书
国庆促销活动总结
2014/08/29 职场文书
遗失说明具结保证书
2015/02/26 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android
使用Python开发冰球小游戏
2022/04/30 Python