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

2019-11-19 16:31:11

字体：大中小

来源：转载

供稿：网友

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

上一篇：vue实现app页面切换动画效果实例

下一篇：JavaScript设置名字输入不合法的实现方法