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 判断checkbox是否选中的实现代码
Nov 23 Javascript
js跑步算法的实现代码
Dec 04 Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
Jquery实现自定义tooltip示例代码
Feb 12 Javascript
jQuery知识点整理
Jan 30 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 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
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
thinkPHP商城公告功能开发问题分析
2016/12/01 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
Python基础语法(Python基础知识点)
2016/02/28 Python
使用Python脚本实现批量网站存活检测遇到问题及解决方法
2016/10/11 Python
Python基于Pymssql模块实现连接SQL Server数据库的方法详解
2017/07/20 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
python用户管理系统的实例讲解
2017/12/23 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
pycharm 在windows上编辑代码用linux执行配置的方法
2018/10/27 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
python保存log日志,实现用log日志画图
2019/12/24 Python
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
简历中个人求职的自我评价模板
2013/11/29 职场文书
通信研究生自荐信
2014/02/01 职场文书
《都江堰》教学反思
2014/02/07 职场文书
安全教育实施方案
2014/03/02 职场文书
导游词格式
2015/02/13 职场文书
房租涨价通知
2015/04/23 职场文书
毕业班工作总结
2015/08/10 职场文书
《圆的面积》教学反思
2016/02/19 职场文书