1.响应式布局原理:通过媒体查询针对不同宽度设备进行布局和样式的设置 设备屏幕划分: <768px,超小屏幕,手机 768-992 px,小屏幕,平板 992-1200 px,pc端中等屏幕 ,>=1200px,pc端大屏幕
2.bootstrap框架 1.gulp压缩代码小工具 2.栅格系统:把container内容区域分成12份,栅格系统用于通过一系列的行row和列column的组合来创建布局页面,内容放入布局好的列里 超小屏幕<768px .container最大宽度 100% .con-xs-列数 小平设备(平板)>=768px, .container最大宽度750px .col-sm-份数 中等屏幕>=992px, .container最大宽度970px .col-md-份数 大屏幕>=1200px, .container最大宽度1170px .col-lg-份数 注意事项: (1) 行row必须放到container布局容器里面; (2) 实现平均划分需添加类前缀; (3) xs-extra small:超小;sm-small:小;md-medium:中等;lg-large:大; (4) 列和column大于12,多余的列所在的元素会被做为一个整体另起一行排列;列合column小于12,不足的部分会留下空白; (5) 每一列默认右左右15px的padding; (6) 可以同时为一列指定多个设备的类名,以便在不同的设备尺寸划分不同的分数 eg:class=“col-sm-6 col-md-9” 3.bootstrap列嵌套:在要嵌套的列里面写row,嵌套在列里,这样可以取消父元素的padding值,并且高度自动和父级高度一致 4.bootstrap列偏移:使用.col-md-offset-类可以将列向右侧偏移. 这些类实际上是通过使用选择器为当前元素增加了左侧的 边距(margin) 两边浮动效果: 偏移的份数=12-两个盒子的分数 居中效果:偏移的份数=12-中间盒子的分数-右侧空余分数 5.列排序 通过使用col-md-puah-*和col-md-pull-*类可以改变列的顺序 6.响应式工具: hidden-xs(超小屏隐藏)|sm(小屏隐藏)|md(中屏隐藏)|lg(大屏隐藏) 与之相反的是visible-xs|sm|md|lg 显示某个页面内容
