用bootstrap做响应式网站

对bootstrap来说总共有五种设备，这种区分由设备的宽度决定，
四个分界点（576px，768px，992px，1200px）
特小.col、小.col-sm-、中.col-md-、大.col-lg-、特大.col-xl-
现实中常用的设备一般只有两种，一种手机，小于576px的超小屏幕（.col-），另一种是大于1200px的台式电脑（.col-xl-），在写普通的响应式网站时用两类属性.col和.col-sm就可以了。这是由于栅格断点的媒体查询基于宽度的最小值，意味着它们应用到某一等级以及这一等级之上的所有（如.col-sm-4的的定义可以在小型、中型、宽、超宽设备上呈现，但不适用于能在超小型.col-上呈现）。

实践中，一个<div class="col"></div>或<div class="col-N"></div>代表手机断点
类后面的数字用于表明定义div空间想要占用列的数量，每行最多有12列。

水平堆砌：
使用单一的.col-sm-*类方法，可以创建一个基本的网格系统
随着屏幕变窄成为超小屏幕.col-后，自动成为每列一行（默认等于.col-12）。

混合布局：
类似flex布局，一个div.row之内col-8\col-5\col-4会展示在两行上。（单独使用不带数字的.col会导致一些意料之外的结果）。相关话题：列换行：如果在一行内子DIV定义的栅格总数超过12列，BootStrap会在保留列完整的前提下，将无法平行布局的多余列，重置到下一行，并占用一个完整的新行。（一般换行推荐使用添加多个row来完成）