BootStrap

敏捷响应式框架，自带了多种样式，利用栅格系统对不同分辨率的的设备进行适配。

引入文件

  <head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">//声明文档兼容模式，表示使用IE浏览器最新模式
  <meta name="viewport" content="width=device-width,initial-scale=1，user-scale=no">//设置视口宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>,设置移动用户是否可以缩放网页yes/no
  <link href="bootstrap.css" rel="stylesheet">
  </head>
  <script src="jquery.js" />//jquery文件
  <script src="bootstrap.js" />//jquery文件

创建栅格系统，顶级需要被类为container或container-fluid包裹的div

  <div class="container"></div>//固定宽度
  <div class="container-fluid"></div>//全屏

创建行
```
  <div class="row"></div>
```
注意每行最多分配12列
创建列
```
  <div class="col-xs-12 col-sm-6 col-md-8" hidden-lg></div>
```
以下的数字代表列的权重，创建列分别为改列分配好各种比例的类来适配不同设备

1. 类col-xs-数字(超小屏幕 手机 <768px)
2. col-sm-数字(小屏幕 平板 >=768px)
3. col-md-数字(中等屏幕 显示器 >=992px)
4. col-lg-数字(>=1200px)
5. hidden-lg 宽度为lg时隐藏

引入

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">//声明文档兼容模式，表示使用IE浏览器最新模式
    <meta name="viewport" content="width=device-width,initial-scale=1，user-scale=no">//设置视口宽度(值为设备的理想宽度)，页面初始缩放值<理想宽度/可见宽度>,设置移动用户是否可以缩放网页yes/no
    <link href="bootstrap.css" rel="stylesheet">
</head>
<script src="jquery.js" />//jquery文件
<script src="bootstrap.js" />//jquery文件

//所有内容必须被以下两个div包裹，这两者不可嵌套
<div class="container"></div>//固定宽度
<div class="container-fluid"></div>//全屏

viewport

概念

设备屏幕上能用来显示网页的哪一块区域,因为像素问题，所以这块区域的大小一般会固定住，所以网页有可能超出这块区域，也可能小于这块区域，当设置好视口宽度时，网页会按比例放入这块区域中

自带样式

bootstrap样式快速入门

栅格系统

BootStrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口的尺寸的增加，系统会分配最多12列。

栅格系统需要预先将所有网页元素分成多个块，再将每个块使用类col-xs-数字(超小屏幕手机 <768px),col-sm-数字(小屏幕平板 >=768px),col-md-数字(中等屏幕显示器 >=992px)，col-lg-数字(>=1200px) 定义好在不同宽度时占用的大小

//举例
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-8"></div>
    <div class="col-xs-6 col-md-4"></div>
</div>
//以上代码将决定 在xs模式下第一个div占一行占一行,第二个占第二行一半，sm模式下两个div对半分占一行，md模式下两个div占一行，比例为2:1

//偏移 col-ma-offset-3 偏移三个
//visible-xs-*//<768显示其余隐藏，类似还有sm,md,lg，*代表block,inline,inline-block
//hidden-xs//隐藏xs 以此类推sm,md,lg