2019-11-19总结BootStrap

设计响应式布局结构
不可以使用绝对宽度布局，也就是说Css代码不能指定像素宽度。
（错误）width:940px;
（正确）width:100%;或者width：auto;
（错误）网页字体使用绝对大小（px）
（正确））网页字体使用相对大小（em）
流体布局是响应式设计中的一个重要方面
流体布局要求页面中各个区块的位置是浮动的，不是固定不变的
例如
.main{
float:right;
Width:70%;
}
.leftBar{
float:left;
Width:25%;
}
Float:
两个元素如果并列显示不下，后面的元素会自动在前面元素的下方显示。
而不会出现水平方向的overflow(溢出)
避免了水平滚动条的出现。
页面布局结构的响应式调整一般可以使用独立的样式表

#wrapper
#content
#sidebar
#nav

Ipad 独有的orientation属性
Orientation的值：
Landscape(横屏)
Portraint（竖屏）
对于其他可以转屏的设备如iPhone 可以使用max-device-width或者min-device-width实现

所有的主流浏览器都支持Media queries 包括IE9
对于老式浏览器(IE6,IE7,IE8)可以考虑css3-mediaqueries.js

响应式Web设计：
同比例缩放尺寸
调整页面结构布局
页面中的文字信息不能简单地同比例缩小

Visibility:hidden:视觉上不做呈现
Display:none ：设置整块内容是否需要被输出

媒介查询（P37）
触屏设备（P38）手指点击就是click行为

BootStrap固定栅格和流式栅格（p53）
堆叠和水平排列是栅格系统中列的两种基本布局方式（p54 内容不全）
堆叠布局：手机和平板设备
水平排列布局;桌面及以上

Col-md-2

Col-sm-2(堆叠改变为水平)
Col-xs-2(堆叠改变为水平 超级小屏幕)

.clearfix 设置第一列单行显示（不知道有什么作用 P56）

列偏移：offset可以将列偏移到右侧（P57）
Offset偏移宽度需要和col宽度进行合并计算（都要有）
列嵌套:一行三列（就是我们平常用到的）
列排序:push和pull相关类实现