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实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
Javascript之String对象详解
Jun 08 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
Angular实现响应式表单
Aug 04 Javascript
JavaScript 通过Ajax 动态加载CheckBox复选框
Aug 31 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
生产制造追溯系统之再说条码打印
Jun 03 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 过滤危险html代码
2009/06/29 PHP
PHP+memcache实现消息队列案例分享
2014/05/21 PHP
php使用mysqli向数据库添加数据的方法
2015/03/20 PHP
PHP多态代码实例
2015/06/26 PHP
详解php实现页面静态化原理
2017/06/21 PHP
PHP与以太坊交互详解
2018/08/24 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
js下写一个事件队列操作函数
2010/07/19 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
python读写csv文件方法详细总结
2019/07/05 Python
python循环输出三角形图案的例子
2019/11/22 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
python中pickle模块浅析
2020/12/29 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
九年级英语教学反思
2014/01/31 职场文书
人力资源部门的主要职能
2014/02/22 职场文书
公司节能减排倡议书
2014/05/14 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
论文评审意见
2015/06/05 职场文书
聘任书的格式及模板
2019/10/28 职场文书