移动web bootstrap布局

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 显示某个页面内容