导入：
<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>
