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编写一个简单的响应式布局。下面是我制作的一个页面，纯粹作为展示，是静态页面，写得不精细，请见谅。
?小屏幕下：
