当前阅读教程:Bootstrap4教程 > Bootstrap 复选框(checkbox) | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: Bootstrap textarea | 下一篇: Bootstrap 单选框(Radio) |
复选框用于让用户从一系列预设置的选项中进行选择,可以选一个或多个。 以下实例包含了三个选项。最后一个是禁用的: 实例 <div> <label> <input type="checkbox" value="">Option 1 </label> </div> <div> <label> <input type="checkbox" value="">Option 2 </label> </div> <div class="form-check disabled"> <label> <input type="checkbox" value="" disabled>Option 3 </label> </div> 完整代码 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例(小白教程网 2d5.net)</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div> <h2>表单控件: checkbox</h2> <p>以下实例包含了三个选项。最后一个是禁用的:</p> <form> <div> <label> <input type="checkbox" value="">Option 1 </label> </div> <div> <label> <input type="checkbox" value="">Option 2 </label> </div> <div class="form-check disabled"> <label> <input type="checkbox" value="" disabled>Option 3 </label> </div> </form> </div> </body> </html> 效果图 使用 .form-check-inline 类可以让选项显示在同一行上: 实例 <div class="form-check form-check-inline"> <label> <input type="checkbox" value="">Option 1 </label> </div> <div class="form-check form-check-inline"> <label> <input type="checkbox" value="">Option 2 </label> </div> <div class="form-check form-check-inline disabled"> <label> <input type="checkbox" value="" disabled>Option 3 </label> </div> 完整代码 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例(小白教程网 2d5.net)</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div> <h2>表单控件: checkbox</h2> <p>以下实例包含了三个选项。最后一个是禁用的,使用 .form-check-inline 类可以让选项显示在同一行上:</p> <form> <div class="form-check form-check-inline"> <label> <input type="checkbox" value="">Option 1 </label> </div> <div class="form-check form-check-inline"> <label> <input type="checkbox" value="">Option 2 </label> </div> <div class="form-check form-check-inline disabled"> <label> <input type="checkbox" value="" disabled>Option 3 </label> </div> </form> </div> </body> </html> 效果图 |
|
上一篇: Bootstrap textarea | 下一篇: Bootstrap 单选框(Radio) |