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栅格占位

 

3、媒体查询

针对不同媒体类型可以定制不同的样式规则

 

媒体查询可用于检测很多事情，例如：
viewport(视窗) 的宽度与高度
设备的宽度与高度
朝向 (智能手机横屏，竖屏) 。
分辨率

 

1）、媒体查询操作方式

多媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的CSS被应用，如果表达式结果为假，媒体查询内的CSS将被忽略。

 

2）、媒体查询结构

以@media开头来表示这是一条媒体查询语句；
紧跟在@media后面的是一个或者多个表达式，可以判别为真或假；
必须以媒体类型（如：screen）作为第一个表达式；
and、or、not是关键字，表示有多个表达式，screen是第一个表达式，and、or、not后为另一个表达式；
前缀min-表示“至少”，即“大于等于”的意思；前缀max-表示“至多”，即“小于等于”的意思；

 

实例：

@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}