初学Bootstrap，制作响应式布局

Bootstrap是目前比较受欢迎的前端框架。它是基于 HTML、CSS、JAVASCRIPT 的，简洁灵活。因为在前几个月的学习中有了解到Bootstrap，并且当时就使用Bootstrap制作了简单的响应式布局。最近又接触到，所以还是打算写下这篇文章，算是记录一下Bootstrap的学习过程。（这也是下定决心第一次发布博客，比较小白。）

一、响应式布局

就是分别为不同的屏幕分辨率定义布局，页面元素宽度随着窗口调整而自动适配。每个屏幕分辨率下面会有一个布局样式，可以对元素位置和大小进行改变。

二、Bootstrap框架

1、Bootstrap的引用方式

可以去官网下载安装包->Bootstrap v3，然后放在自己的项目路径下进行引用。

也可以直接引用菜鸟教程的在线资源链接。

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> 
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

这里我是用的线上链接。（因为是早之前写的，所以Bootstrap不是最新版本）

2、Bootstrap断点

在Bootstrap中有一个概念，断点。断点是在Bootstrap中布局如何响应跨设备或屏幕大小变化的触发器。分类如下图

 3、Bootstrap容器

container容器是窗口布局的最基本元素，所有样式都定义在.container或.container-fluid容器之中 是启用整个栅格系统必不可少的前置条件。

Bootstrap原生带三种container宽度规范：

.container，居中，适配不同的端的 max-width 尺寸。

.container-fluid，全屏，适配屏幕的 width: 100% 尺寸。

.container-{断点规格}（见下表，如.container-sm), 在指定规格断上width: 100% 尺寸。

 4、栅格系统

栅格系统是通过一系列的行（row）与列（column）的组合来创建页面的布局，设置的内容就可以放在这些创建好的布局中 。

通过定义容器的大小，平分为12份。

简单的例子如下：

<div class="container">
	<div class="row">
  		<div class="col-md-8">这里占8份</div>
  		<div class="col-md-4">这里占4份</div>
	</div>
</div>

要想同时控制大屏幕、中等屏幕、小屏幕每行（row）的列数不同。可以在class中添加每个断点占的份数，如下：

<div class="container">
	<div class="row">
  		<div class="col-md-3 col-sm-6">中等屏幕时占3份，小屏幕时占6份</div>
  		<div class="col-md-3 col-sm-6">。。。</div>
        <div class="col-md-3 col-sm-6">。。。</div>
        <div class="col-md-3 col-sm-6">。。。</div>
	</div>
</div>

因此在小屏幕时，就会变成两行，每行两列元素。

有了以上的知识，就可以基于Bootstrap编写一个简单的响应式布局。下面是我制作的一个页面，纯粹作为展示，是静态页面，写得不精细，请见谅。

 小屏幕下：