利用Bootstrap做响应式内部采取的是一种叫做栅格系统的方式。
栅格系统：英文名girdsystems,又称网格系统，它是指将页面布局划分成等宽的列，然后通过列数的定义来模块化页面布局。
与rem划分等份数不同的是：rem响应式布局中是将整个屏幕划分成若干等分，而栅格系统是将页面内容(container)划分成若干等份。
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。
Bootstrap里面的container宽度是固定的，但是不同屏幕下，container的宽度不一样，我们再把container划分为12等份。
Bootstrap也采用了normalize.css的初始化，以后在引用Bootstrap的时候就不再需要另外引入normalize.css文件。
https://v3.bootcss.com/css/
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
体会Bootstrap中文网：https://www.bootcss.com/ 的以下部分的伸缩布局：
举例1：
<body>
<div class="container">
<p> 当孩子的份数相加等于12 则孩子可以占满整个container宽度</p>
<div class="row">
<!-- 3+3+3+3=12 -->
<div class="col-lg-3">1</div>
<div class="col-lg-3">2</div>
<div class="col-lg-3">3</div>
<div class="col-lg-3">4</div>
</div>
<div class="row">
<!-- 6+2+2+2=12 -->
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
</div>
<p> 当孩子的份数相加小于12 则孩子可以占不满整个container宽度</p>
<div class="row">
<!-- 6+2+2+1=11 -->
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-1">4</div>
</div>
<p>当孩子的份数相加大于12 则多出的那一列另起一行显示</p>
<div class="row">
<!-- 6+2+2+3=13 -->
<div class="col-lg-6">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-3">4</div>
</div>
</div>
</body><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 要求当前页面使用IE浏览器最高版本的内核来渲染 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--[if lt IE 9]>
解决ie9以下浏览器对html5新增标签不识别，并导致css不起作用的问题
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
解决ie9以下浏览器对css3 Media Query 的不识别问题
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- 一定不要忘记引入bootstrap的样式文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<title>Document</title>
<style>
[class^="col"] {
border: 1px solid #ccc;
}
</style>
</head>下次看第10节
原文：https://www.cnblogs.com/deer-cen/p/12158319.html