编程 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 相关文章推荐

javascript AOP 实现ajax回调函数使用比较方便

Nov 20 Javascript

五个jQuery图片画廊插件推荐

May 12 Javascript

悬浮广告方法日常收集整理

Mar 18 Javascript

原生js实现可拖动的登录框效果

Jan 21 Javascript

jQuery输入框密码的显示隐藏【代码分享】

Apr 29 jQuery

JS鼠标滚动分页效果示例

Jul 05 Javascript

vue仿淘宝订单状态的tab切换效果

Jun 23 Javascript

angularjs 获取默认选中的单选按钮的value方法

Feb 28 Javascript

在vue中created、mounted等方法使用小结

Jul 21 Javascript

基于JS实现计算24点算法代码实例解析

Jul 23 Javascript

Js利用正则表达式去除字符串的中括号

Nov 23 Javascript

Vue实现摇一摇功能(兼容ios13.3以上)

Jan 26 Vue.js

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