BootStrap表单控件之复选框checkbox和单选择按钮radio
作者：素颜猪 时间：2023-08-20 09:36:22
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，希望对大家有所帮助！
来源：http://suyanzhu.blog.51cto.com/8050189/1927530
标签：bootstrap,复选框,单选择按钮,表单控件
0
投稿猜你喜欢
python中实现字符串翻转的方法
2021-06-08 04:27:59
浅谈Python的条件判断语句if/else语句
2021-03-06 12:11:02
主页移动背景代码
2009-11-16 17:54:00
Python小白学习爬虫常用请求报头
2024-01-02 06:39:19
Python数据存储之 h5py详解
2023-09-18 00:04:48
使用Python创建websocket服务端并给出不同客户端的请求
2023-08-01 23:29:32
PyQt5+Pycharm安装和配置图文教程详解
2022-12-20 08:50:26
使用Post提交时须将空格转换成加号的解释
2023-07-02 05:18:19
《色彩解答》系列之二 色彩比例
2008-02-17 14:38:00
Django视图函数的具体使用
2023-07-25 11:02:54
Python使用Pickle库实现读写序列操作示例
2022-05-15 03:53:03
python中numpy.zeros(np.zeros)的使用方法
2023-10-08 17:40:07
Python Pandas 获取列匹配特定值的行的索引问题
2023-11-01 06:37:42
vuex中数据持久化插件vuex-persistedstate使用详解
2024-04-26 17:41:54
用SQL语句删除重复记录的四种方法
2011-05-03 09:25:00
c#连接mysql数据库的方法
2024-01-23 02:52:32
Mysql 查询数据库容量大小的方法步骤
2024-01-20 13:56:35
python实现超市管理系统(后台管理)
2022-08-17 06:50:22
IBatis.net连接MySql 问题与故障的解决方案
2011-06-02 09:38:00
python 搭建简单的http server,可直接post文件的实例
2021-08-25 15:07:39