下面要学习响应式布局啦,加油,马上就要结束了,狠想开启js了.
响应式布局
响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的....响应式布局容器
响应式需要一个父级作为布局容器,来配合子级元素来实现变化效果....bootstrap提供了一套响应式,移动设备优先的流式栅格系统,随着屏幕或视口的尺寸的增加,系统会自动最多分为12列....-4">右侧
看看效果如何:
当然一个盒子在中间居中也可以
列排序
通过使用.col-md-push-* 和 .col-md-pull-* 就可以很容易的改变列的顺序...尝试将刚刚弄到两侧的盒子交换位置.
响应式工具
为了加快对移动设备友好的页面开发工作,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容.