导入： <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css"> 移动设备优先： 为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。 <meta name="viewport" content="width=device-width, initial-scale=1"> 常用样式类 1. 容器 1. container 2. container-fluid 2. 栅格系统 把一行均分成最多12列 可以设置标签占多少列 1. row表示一行 2. col-xx-**表示一列 xx: 表示样式适用的屏幕尺寸 - xs 手机 - sm 平板 - md 桌面显示器 - lg 超大屏幕 **：表示占多少份 - 取值范围： 1~12 3. col-xx-offset-**: 表示左侧空几份！ 4. 列支持再嵌套（再写一行，分成12份） 5. 列排序 1. col-xx-push-* --> 往右推 2. col-xx-pull-* --> 往左拉 6.clearfix：如果同一行中的标签高度不同，加上这个属性可以以最高高度的标签为准统一各个标签的高度 3. 布局样式 4. 表格 5. 表单 6. 按钮 7. 图片 8. 辅助类 1. 文本颜色 2. 背景颜色 3. 快速浮动 4. 清除浮动 #--登录验证简单实例 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="X-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.css"> <title>Title</title> <style> body{ background-color: #dddddd; } .login-box { margin-top: 50px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-4 login-box"> <form> <h2 class="text-center">请登录</h2> <div class="form-group"> <label for="exampleInputEmail1">用户名</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> <span></span> </div> <div class="form-group"> <label for="exampleInputPassword1">密码</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> <span></span> </div> <div class="checkbox"> <label> <input type="checkbox"> 记住我 </label> </div> <button type="button" class="btn btn-default" id="b1">提交</button> </form> </div> </div> </div> <script src="../JQtest/jquery-3.4.1.min.js"></script> <script> $("#b1").click(function () { $("input:not([type='checkbox'])").each(function () { if($(this).val().length === 0){ var keyWord=$(this).prev().text(); $(this).next().text(keyWord+"不能为空"); $(this).parent().addClass("has-error"); } }); }); //获取焦点，输入的时候输入框不变成警告色 $("input:not([type='checkbox'])").focus(function () { $(this).next().text(""); $(this).parent().removeClass("has-error"); }); </script> </body> </html>