Bootstrap

注意事项： 使用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栅格占位