移动web之响应式布局开发、BootstrapB前端开发框架

响应式布局

响应式布局容器

	响应式需要一个父级作为布局容器
	原理，在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，
	从而实现不同屏幕下，看到不同的页面布局和样式变化
	平时响应式尺寸划分
	超小屏幕（手机小于768px）设置宽度100%
	小屏幕（平板，大于等于768px）设置宽度为750px
	中等屏幕（桌面显示器，大于等于992px）设置宽度为970px
	大屏幕（大桌面显示器，大于等于1200px）设置宽度为1170px

Bootstrap前端开发框架

布局容器

	Bootstrap需要为页面内容和栅格系统包裹一个.container容器，
	有两大类
	第一类是 .container类
	固定屏幕宽度：
	超小屏幕设备 手机 (<768px)
	小屏幕设备 平板 (≥768px)
	中等屏幕设备 桌面 (≥992px)
	大屏幕设备 桌面 (≥1200px)

	第二类是 .container-fluid类
	流式布局容器 百分百宽度
	占据全部视口（viewport）容器
	适合于单独做移动端开发

栅格系统

列偏移与列排序

		列偏移
		.col-lg-offset-* 类可以将列向右偏移，实际是给元素增加左外边距
		列排序
		.col-lg-push-*和.col-lg-pull-*类可以改变列的顺序
		.col-lg-push向右推，.col-lg-pull 向左推

响应式工具