一，Bootstrap介绍
Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。
它是为实现快速开发Web应用程序而设计的一套前端工具包。
它支持响应式布局，并且在V3版本之后坚持移动设备优先。
二，为什么要使用Bootstrap？
在Bootstrap出现之前：
命名：重复、复杂、无意义（想个名字费劲）
样式：重复、冗余、不规范、不和谐
页面：错乱、不规范、不和谐
在使用Bootstrap之后： 各种命名都统一并且规范化。 页面风格统一，画面和谐。
三，Bootstrap下载
我们使用V3版本的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的某些组件依赖于jQuery，所以请确保下载对应版本的jQuery文件，来保证Bootstrap相关组件运行正常。
五，Bootstrap 概览
概览：https://v3.bootcss.com/css/
1，HTML5 文档类型
使用 Bootstrap 需要将页面设置为 HTML5 文档类型。
在项目中的每一页都要参照下面的格式进行设置。
<!DOCTYPE html> <html lang="zh-CN"> ... </html>
2，移动设备优先
Bootstrap 将对移动的设备样式融合进了框架，而不是增加一个文件。所以，Bootstrap是移动设备优先
2.1，自动适当的适应移动设备
自动适当的 绘制 和 触屏缩放 需要在 <head> 中添加 viewport 元数据标签
<meta name="viewport" content="width=device-width, initial-scale=1">
2.2，在移动设备上禁用其缩放(zooming)功能
通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能
更具自己的情况而定！！禁用缩放功能后，用户只能滚动屏幕，让网页看上去更像原生应用的感觉。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
3，网页样式重置（normalize.css）
各种不同的浏览器的有些默认样式不同，对网页产生影响
3.1，以前手写重置
在 <head> 中加入
<style>
*{
margin:0;
}
</style
3.2，这里用 normalize.css
介绍：为了增强跨浏览器表现的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。
使用：在 BootCDN 网，搜索 normalize 复制 link 标签放入<head> 中；搜索 ：https://www.bootcdn.cn/normalize/
4，布局容器
介绍：Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding（盒子的属性） 等属性的原因，这两种 容器类不能互相嵌套。
4.1，.container 类用于固定宽度并支持响应式布局的容器(效果：网页两边留一定空间)
<div class="container">
需要此效果的标签都放入这里
</div>
4.2，.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。(效果：网页两边不留空间，有盒子内边距)
<div class="container-fluid">
需要此效果的标签
</div>
5，栅格系统
介绍：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。
即：将一行最多分为12列的布局
使用：“行(row)” 必须是包含在.container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
5.1，简单的划分列
<div class="container">
<div class="row">
<div class="col-md-1">占1列</div>
<div class="col-md-10">占10列</div>
<div class="col-md-1">占1列</div>
</div>
</div>
5.2，移动端与pc端分开设置不同排列
<div class="container">
<div class="row">
<div class="col-md-1 col-xs-4">PC占1列,移动4列</div>
<div class="col-md-10 col-xs-4">PC占10列,移动4列</div>
<div class="col-md-1 col-xs-4">PC占1列,移动4列</div>
</div>
</div>
6，媒体查询
同过 @media 查询所在媒体的屏幕大小
6.1，设定在指定大小的屏幕内的显示效果
<!DOCTYPE html> <html lang="en"> <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>媒体查询</title> <style> .c { height: 100px; width: 100px; } .c1 { background-color: red; } /*当打开网页的设备是一个显示器设备， 并且显示器的宽度小于400px时， 使用下面的样式覆盖*/ @media screen and (max- 400px) { .c1 { background-color: green; } } </style> </head> <body> <div class="c c1"></div> </body> <html>
6.2，栅格系统的分割列的分界点
在栅格系统中，我们在 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值。
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min- @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min- @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min- @screen-lg-min) { ... }
我们偶尔也会在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。
@media (max- @screen-xs-max) { ... }
@media (min- @screen-sm-min) and (max- @screen-sm-max) { ... }
@media (min- @screen-md-min) and (max- @screen-md-max) { ... }
@media (min- @screen-lg-min) { ... }
min ：最小屏幕大小 max ： 最大屏幕大小
6.3，通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C | ||
.container 最大宽度 |
None （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列（column）数 | 12 | |||
| 最大列（column）宽 | 自动 | ~62px | ~81px | ~97px |
| 槽（gutter）宽 | 30px （每列左右均有 15px） | |||
| 可嵌套 | 是 | |||
| 偏移（Offsets） | 是 | |||
| 列排序 | 是 | |||