1. Bootstrap框架概述
Bootstrap介绍
Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目，
Bootstrap由Twitter的设计师Mark Otto和Jacob Thornton合作开发
Bootstrap是为实现快速开发Web应用程序而设计的一套前端工具包
Bootstrap支持响应式布局，并且在V3版本之后坚持移动设备优先
Bootstrap的优点
使用Bootstrap之前：
命名：重复、复杂、无意义
样式：重复、冗余、不规范、不和谐
页面：错乱、不规范、不和谐
使用Bootstrap之后：
移动设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式
浏览器支持：所有的主流浏览器都支持Bootstrap
容易上手：只要具备HTML和CSS的基础知识，就可以学习和使用Bootstrap
响应式设计：Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机(响应式Web设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法)
其他优势：开源免费；提供了基于 Web 的定制；包含了功能强大的内置组件；为开发人员创建接口提供了一个简洁统一的解决方案
Bootstrap官网地址
Bootstrap下载
Bootstrap目录结构
bootstrap-3.3.7-dist/
├── css // CSS文件
│ ├── bootstrap-theme.css // Bootstrap主题样式文件
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css // 主题相关样式压缩文件
│ ├── bootstrap-theme.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css // 核心CSS样式压缩文件
│ └── bootstrap.min.css.map
├── fonts // 字体文件
│ ├── glyphicons-halflings-regular.eot
│ ├── glyphicons-halflings-regular.svg
│ ├── glyphicons-halflings-regular.ttf
│ ├── glyphicons-halflings-regular.woff
│ └── glyphicons-halflings-regular.woff2
└── js // JS文件
├── bootstrap.js
├── bootstrap.min.js // 核心JS压缩文件
└── npm.js
Bootstrap引入方式
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
2. Bootstrap样式概述
文档类型
Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类型
移动设备优先
在Bootstrap 2中，对框架中的某些关键部分增加了对移动设备友好的样式。而在Bootstrap 3中，重写了整个框架，使其一开始就是对移动设备友好的。不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。Bootstrap是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件
为了确保适当的绘制和触屏缩放，需要在head标签之中添加viewport元数据标签
<meta name="viewport" content="width=device-width, initial-scale=1">
在移动设备浏览器上，通过为视口(viewport)设置meta属性为user-scalable=no可以禁用其缩放(zooming)功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
全局显示、排版和链接
全局显示：
使用body {margin: 0;} 来移除body的边距
设置body的默认字体样式为"Helvetica Neue", Helvetica, Arial,sans-serif
设置文本的默认字体大小为14像素
设置默认的行高度为1.428571429
设置默认的文本颜色为#333333
设置默认的背景颜色为#FFFFFF
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
排版：
使用@font-family-base、@font-size-base和@line-height-base属性作为排版样式
链接样式：
通过属性@link-color设置全局链接的颜色
链接的默认样式： 当鼠标悬停在链接上，或者点击过的链接，颜色会被设置为#2a6496。同时，会呈现一条下划线。点击过的链接，会呈现一个颜色码为#333的细的虚线轮廓。另一条规则是设置轮廓为5像素宽，且对于基于webkit浏览器有一个-webkit-focus-ring-color的浏览器扩展。轮廓偏移设置为-2像素。
a:hover,a:focus {
color: #2a6496;
text-decoration: underline;
}
a:focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
这些样式都可以在scaffolding.less中找到
避免跨浏览器的不一致
Bootstrap使用Normalize来建立跨浏览器的一致性
Normalize.css是一个很小的CSS文件，在HTML元素的默认样式中提供了更好的跨浏览器一致性，由Nicolas Gallagher和Jonathan Neal维护的一个CSS 重置样式库
布局容器
3. Bootstrap全局CSS样式
栅格系统
描述：栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局
Bootstrap栅格系统的工作原理
row必须包含在.container或.container-fluid中，以便为其赋予合适的排列和内补
通过row在水平方向创建一组column
显示内容放在column中，column放在row中
col是预定义的类，可以快速创建栅格布局。格式是："col-xx-xx"
栅格系统中的列是通过指定1到12的值来表示其跨越的范围
col设置的值等于12时，排列铺满整个空间
col设置的值大于12时，多余的col会换行排列
col设置的值小于12时，从左往后排列，后面空出
栅格的类前缀
大屏幕([大显示器]≥1200px)：.col-lg-xx
中等屏幕([普通显示器]≥992px)：col-md-xx
小屏幕([平板]≥768px)：col-sm-xx
超小屏幕([手机]<768px)：col-xs-xx
列偏移
列嵌套
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的.row元素和一系列.col-sm-xx元素到已经存在的.col-sm-xx元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12个
列排序
.col-md-push-xx：向右侧移动(推)
.col-md-pull-xx：向左侧移动(拉)
排版
代码
内联代码
code标签：包裹内联样式的单行代码内容(需要把特殊符号使用特殊字符替换)
用户输入
代码块
pre标签：包裹多行代码块(需要注意将尖括号做转义处理)
.pre-scrollable：设置max-height为350px，并在垂直方向展示滚动条
变量
程序输出
表格
基本样式表格：为table标签添加.table类就可以为表格添加上基本样式
条纹状表格：添加.table-striped类
带边框的表格：添加.table-bordered类
紧缩表格：添加.table-condensed类
鼠标悬停：添加.table-hover类
状态类：
.active： 鼠标悬停在行或单元格上时所设置的颜色
.success：标识成功或积极的动作
.info：标识普通的提示信息或动作
.warning：标识警告或需要用户注意
.danger：标识危险或潜在的带来负面影响的动作
响应式表格：在table标签外层再套一层div标签，并添加.table-responsive类
表单
form标签通过多个div来布局，每一个div添加.form-group类，div中的每一个input添加.form-control类，并且和label结合使用，
内联表单：
为form标签添加.form-inline类，让内容左对齐
lable标签添加.sr-only类可以隐藏label标签的内容
label后可以使用一个div标签，并添加.input-group类，把input前后各添加一个div标签，并添加.input-group-addon类
水平排列表单：为form标签添加.form-horizontal类，并使用col-xx-xx容器布局的方式，为label标签添加.control-label类来实现
被支持的控件：
输入框(input)：包括大部分表单控件、文本输入域控件，还支持所有HTML5类型的输入控件：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color
文本域(textarea)：支持多行文本的表单控件，可根据需要改变rows属性
多选和单选按钮：
默认样式：
多选按钮：为外层的div标签添加.checkbox类，默认选中添加checked属性，如果设置为不可用添加.disabled类，并且input标签添加disbaled属性
单选按钮：为外层的div标签添加.radio类，默认选中添加checked属性，如果设置为不可用添加.disabled类，并且input标签添加disbaled属性
内联多选和单选按钮：
多选按钮：为label标签添加..checkbox-inline类
单选按钮：为label标签添加..radio-inline类
不带label文本的多选和单选按钮：在input标签中添加aria-label属性
下拉列表(select)：
单选：为select标签添加.form-control类
多选：在单选的基础上再为seelct标签添加multiple 属性
静态控件：添加.form-control-static类
禁用状态：
直接添加disabled属性
使用fieldset标签包起来，并添加disabled属性也可是实现禁用的效果
只读状态：直接添加readonly属性
Help text：显示提示或帮助信息，在input标签添加aria-describedby属性，并赋值helpBlock
校验状态：
.has-success：成功
.has-warning：警告
.has-error：错误
控件尺寸：
高度尺寸：
.input-lg：input添加之后，输入框变大
.input-sm：input添加之后，输入框变小
水平排列的表单组的尺寸：
.form-group-lg：元素和表单控件尺寸变大
.form-group-sm：元素和表单控件尺寸变小
调整列尺寸：使用栅格系统的列包裹住输入框或父元素标签的方式来设置
按钮
可作为按钮使用的标签或元素:
成为按钮：添加.btn，a标签还要添加role属性，并赋值button(role="button")
预定义样式：
.btn-default：默认样式
.btn-primary：首选项
.btn-success：成功
.btn btn-info：一般信息
.btn-warning：警告
.btn-danger：危险
.btn-link：普通链接
尺寸：
.btn-lg：大按钮
.btn-sm：小按钮
.btn-xs：超小尺寸按钮
块级按钮：添加.btn-block类，可以将其拉伸至父元素标签100%的宽度，成为块级元素
激活状态：添加.active类
禁用状态：
button标签添加disabled属性和disabled值实现
a标签添加.disabled类实现
图片
响应式图片：添加.img-responsive类；如果需要图片居中需要添加.center-block类
图片形状：为img标签添加类
img-rounded：圆角图片
img-circle：圆形图片
img-thumbnail：边框图片
辅助类
文本颜色：
.text-muted类
.text-primary类
.text-success类
.text-info类
.text-warning类
.text-danger类
背景颜色：
.bg-primary类
.bg-success类
.bg-info类
.bg-warning类
.bg-danger类
关闭按钮：添加.close类
三角符号：添加.caret类
快速浮动：
左浮动：添加.pull-left类
右浮动：添加.pull-right类
内容块居中：添加.center-block类
清除浮动：添加.clearfix类
显示内容：添加.show类
隐藏内容：添加.hidden类
图片替换：添加.text-hide类可以用来将元素的文本内容替换为一张背景图
响应式工具
.visible-xs-*：超小屏幕可见，其他隐藏(可以指定的css样式类型：block、inline、inline-block)
.visible-sm-*：小屏幕可见，其他隐藏(可以指定的css样式类型：block、inline、inline-block)
.visible-md-*：中等屏幕可见，其他隐藏(可以指定的css样式类型：block、inline、inline-block)
.visible-lg-*：大屏幕可见，其他隐藏(可以指定的css样式类型：block、inline、inline-block)
.hidden-xs：超小屏幕隐藏，其他可见
.hidden-sm：小屏幕隐藏，其他可见
.hidden-md：中等屏幕隐藏，其他可见
.hidden-lg：大屏幕隐藏，其他可见
4. 简单应用
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>day58</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<style>
body {
background-color: #EEEEEE;
}
.row .head {
height: 150px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="head"></div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<div class="row">
<div class="h3 col-md-offset-4 col-md-6">请登录</div>
</div>
<form action="" class="form-horizontal">
<div class="form-group">
<label for="email" class="col-md-3 control-label">邮箱</label>
<div class="col-md-7">
<input type="email" class="form-control" name="email" placeholder="Email">
<div class="text-danger"></div>
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-3 control-label">密码</label>
<div class="col-md-7">
<input type="password" class="form-control" name="password" placeholder="Password">
<div class="text-danger"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-9">
<div class="checkbox">
<label>
<input type="checkbox">记住我
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-9">
<label for="login"></label>
<input type="button" class="btn btn-primary col-md-9" value="登录">
</div>
</div>
</form>
</div>
</div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
function userLogin() {
$("#login").on("click", function () {
$(".form-control").each(function () {
$(this).on("focus", function () {
$(".text-danger").text("");
$(".form-group").removeClass("has-error");
});
var inputName = $(this).attr(\'name\');
var inputVal = $(this).val();
var textMsg = $(this).parent().prev().text();
if (inputVal.length === 0) {
$(this).next().text(textMsg + "不能为空");
$(this).parent().parent().addClass("has-error");
return false;
}
if (inputName === "email") {
var emailReg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/g;
if (!emailReg.test(inputVal)) {
$(this).next().text(textMsg + "格式不合法");
$(this).parent().parent().addClass("has-error");
return false;
}
}
if (inputName === "password") {
if (inputVal.length < 8) {
$(this).next().text(textMsg + "格式不合法");
$(this).parent().parent().addClass("has-error");
return false;
}
}
});
return false;
})
}
$(function () {
userLogin();
});
</script>
</body>
</html>
