Bootstrap入门、CSS样式【栅格系统】
目录：
一：WWW：What、Why、Where
二：环境安装
三：Bootstrap CSS
3.1：概览
3.2：栅格格式
一：WWW：What、Why、Where
1.1：What?
Bootstrap是一个建立在一个页面，可以在三个中断(PC、平板、手机)上完美战士的响应式前端框架
1.2：Why？
a：响应式设计
b：移动设备有限
c：浏览器支持
d：容易上手
1.2：Where？
企业网站、博客、网站后台之类的网（注意：非电商(电商网站分类很多)）
二：环境安装
分两步：
一：下载Bootstrap库（官网：Bootstrap中文网）
二：页面中引入库
1：bootstrap.min.css：Bootstrap核心样式【添加到head标签中】
2：jquery-3.3.1.js：jQuery库【注意：必须在Bootstrap核心库引入之前引入jQuery库】
3：bootstrap.min.js：Bootstrap核心库
三：Bootstrap CSS
3.1：概览
a:H5文档类型:<!DOCTYPE html>
b:移动设备优先:在head中添加：
<meta name="viewport" content="width=device-width,initial-scale=1.0">
c:布局容器:
c1:固定容器：【class=”container”】
c2:流动容器：【class=”container-fluid”】
3.2：栅格格式
就是网格，格子每行最多12个格子，如果想要再多可以使用栅格嵌套
a:演示Bootstrap网格系统
<div class="row">
<div class="col-lg-1 b">1</div>
<div class="col-lg-1 b">2</div>
<div class="col-lg-1 b">3</div>
<div class="col-lg-1 b">4</div>
<div class="col-lg-1 b">5</div>
<div class="col-lg-1 b">6</div>
<div class="col-lg-1 b">7</div>
<div class="col-lg-1 b">8</div>
<div class="col-lg-1 b">9</div>
<div class="col-lg-1 b">10</div>
<div class="col-lg-1 b">11</div>
<div class="col-lg-1 b">12</div>
</div>b:演示列偏移 offset
<div class="row">
<div class="col-lg-4 col-lg-offset-4 b">1</div>
</div>
现在一行有一个盒子，这个盒子占了4个格子。如果我们想让这个盒子居中，占在第5个格子开始。就是以上代码
col-lg-offset-4
表示偏移格子，4表示偏移四个格子
<div class="row">
div class="col-lg-4 col-lg-offset-5 b">1</div>
<div class="col-lg-4 col b">2</div>
</div>
如果像这种有两个盒子，第一个盒子偏移就会把第二个盒子往后面挤c:演示栅格系统嵌套(某列中嵌套栅格)
现在需要再第二个盒子内再添加三个盒子，每个盒子占4个该怎么写
<div class="row">
<div class="col-lg-4 col-lg-offset-4 b">1</div>
<div class="col-lg-4 col b">
<div class="row">
<div class="col-lg-4 b">1</div>
<div class="col-lg-4 b">2</div>
<div class="col-lg-4 b">3</div>
</div>
</div>
</div>
第二个盒子里面嵌套了三个盒子，每个盒子占了四个格子d:交换位置
<div class="row">
<div class="col-lg-4 col-lg-push-8 b">1</div>
<div class="col-lg-4 b">2</div>
<div class="col-lg-4 col-lg-pull-8 b">3</div>
</div>