注意事项： 使用Bootstrap的时候不要让自己的名字与Bootstrap的类名冲突。
1、viewport
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
设置viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
2、Bootstrap的栅格系统
栅格系统即运用固定的格子设计版面布局
1）、container
container容器是窗口布局的最基本元素，所有样式都定义在.container或.container-fulid容器之中-- 这是启用整个栅格系统必不可少的前置条件。
.container实现固定的宽度并居中呈现，.container-fluid实现全宽度，并和其它网格实现对齐
2）、row、column
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，页面内容就可以放入这些创建好的布局中
行(.row)是列(.col-*)的横向组合和父容器
网页呈现的内容必须放置在列(.col-*)中，而且只有列可以是行的直接子元素，否则都是不可以在.col-*以上添加呈现内容
3）、栅格选项
Bootstrap使用ems或rems来定义大多数属性的规格大小、px用于全局层面网格断点和容器宽度（因为浏览器和设备的宽度是以像素px为单位，且不会随字体大小而变化）
总共有五个栅格等级，每个响应式分界点隔出一个等级：特小.col（<576px）、小.col-sm-*（≥576px）、中.col-md-*（≥768px）、大.col-lg-*（≥992px）、特大.col-xl-*（≥1200px）
如果只定义一个屏幕规格即可向上覆盖所有设备，向下如果没有定义则默认为12栅格占位
原文：https://www.cnblogs.com/Python1/p/9152599.html