bootstrap--响应式布局（栅格系统）

bootstrap框架-推特公司：开源、移动优先（首先考虑的是移动端设备的兼容性）的前端框架（规定）

--------------实现多终端的页面适配

有两部分的代码：源代码和编译后的代码

bootstrap如果引用的方式：

1. 下载引入到站点文件夹
2. 使用CDN:引入了网站上的样式（bootstrap是基于jquery的，所以要先引用jquery 在css）

栅格系统

很类似我们前面接触的表格

先划分行，然后对每一行划分列（在划分列的时候对单元格进行合并，合并若干个单元格，所以列宽是由合并多少个单元格来决定的）

第一步：放在 .container 容器里面

第二步：div.row 划分行（当前行默认的情况是12列）

 第三步：其他列的划分（单元格的合并）可以设置div,col-md-8 div.col-md-4 (划分左宽右窄)

col（划分当前的列）-md（设备的尺寸 表示中等设备）-8（表示当前列合并几个单元格）

	<div class="row">
		<div class="col-md-8"></div>
		<div class="col-md-4"></div>
	</div>

还有设备的尺寸

xs超小屏

sm小屏

md中屏

ld大屏

小屏幕的时候 占据了整个宽度 右侧的只能到下一行显示

<div class="row">
		<div class="col-md-8 col-sm-12" ></div>
		<div class="col-md-4 col-sm-8"></div>
	</div>