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 相关文章推荐
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
JS实现上下左右对称的九九乘法表
Feb 22 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
详解javascript 变量提升(Hoisting)
Mar 12 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 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
基于mysql的论坛(6)
2006/10/09 PHP
用PHP+MySQL搭建聊天室功能实例代码
2012/08/20 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
JSON语法五大要素图文介绍
2012/12/04 Javascript
JavaScript中“+”的陷阱深刻理解
2012/12/04 Javascript
纯js网页画板(Graphics)类简介及实现代码
2012/12/24 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
2015/08/21 NodeJs
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
React组件对子组件children进行加强的方法
2019/06/23 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
vue实践---vue不依赖外部资源实现简单多语操作
2020/09/21 Javascript
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
详解python 中in 的 用法
2019/12/12 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
Python排序函数的使用方法详解
2020/12/11 Python
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
远程教育心得体会
2014/01/03 职场文书
酒店总经理助理岗位职责
2014/02/01 职场文书
会计求职信怎么写
2015/03/20 职场文书
接待员岗位职责范本
2015/04/15 职场文书
科技馆观后感
2015/06/08 职场文书
电影雨中的树观后感
2015/06/15 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python