编程 Javascript

BootStrap表单控件之复选框checkbox和单选择按钮radio

Posted in Javascript onMay 23, 2017

1.运行效果如图所示

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，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

BootStrap表单控件之复选框checkbox和单选择按钮radio

- Author -

素颜猪

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Ext面向对象开发实践（续）

Nov 18 Javascript

JavaScript 高级语法介绍

Jun 15 Javascript

javascript form 验证函数弹出对话框形式

Jun 23 Javascript

javascript 流畅动画实现原理

Sep 08 Javascript

jQuery.buildFragment使用方法及思路分析

Jan 07 Javascript

window.open 以post方式传递参数示例代码

Feb 27 Javascript

easyui combobox开启搜索自动完成功能的实例代码

Nov 08 Javascript

初探JavaScript 面向对象(推荐)

Sep 03 Javascript

Angular实现点击按钮控制隐藏和显示功能示例

Dec 29 Javascript

微信小程序http连接访问解决方案的示例

Nov 05 Javascript

原生JS检测CSS3动画是否结束的方法详解

Jan 27 Javascript

vue中移动端调取本地的复制的文本方式

Jul 18 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