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库（官网：） 二：页面中引入库 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>
