|
今日所学内容 响应式布局 1响应式布局的开发原理 1.1就是使用媒体查询针对不同的宽度设备进行布局和样式的设置，从而适配不同设备的目的 设备划分情况 小于768px是超小屏设备（手机） 768px-992px之间的是小屏设备（平板） 992px-1200px之间的是中屏设备（桌面显示器） 大于1200px的是宽屏设备（大桌面显示器） 1.2响应式布局容器 响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。 父级容器版心尺寸划分 超小屏幕版心宽度：100% 小屏幕版心宽度：750px 中等屏幕版心宽度：970px大屏幕版心宽度：1170px也可以根据实际情况划分 bootstrap前端框架 bootstrap前端框架简介 标准化的html+css编码规范书写的框架提供了一套简介、直观、强大的组件,有自己的生态圈，更新迭代的速度比较快提高开发效率，让开发更简单 版本介绍 2.x.x:停止维护，兼容性比较好，代码不够简洁，功能也不是很强大。 3.x.x:目前使用最多的、最稳定的版本，但是他放弃了IE6和IE7，对IE8支持，但是界面效果不好，偏向于用于开发响应式布局、移动设备优先的web项目 4.x.x:目前的最新版本，使用的范围不是特别广，目前不是很流行。 bootstrap的栅格系统 概念bootstrap需要为页面内容和栅格系统包裹一个.container或者.container-fluid容器 .container类 响应式的布局容器 .container-fluid类 栅格系统介绍 系统会自动将屏幕分为最多12列的栅格 使用栅格系统的注意点 按照不同屏幕划分1-12等分（row）去除父容器左右12px 每一列默认有15px的左右内边距 栅格系统的参数 xs:extra small sm:small md:medium lg:large bootstrap栅格嵌套 栅格系统内置的栅格可以进行再次嵌套的操作，简单理解就是分好的栅格内可以再次进行栅格划分，但嵌套时，必须要先定义一个行（row）。 bootstrap栅格列偏移 可以使用.col-lg-offset- 的类可以将列向右侧进行偏移。其实偏移的原理是给当前元素增加了额左外边距 bootstrap栅格列排序 我们可以通过.col-lg-push- （将盒子向右推几份）和.col-lg-pull-（将盒子向左拉几份） 改变列的顺序 在不同的屏幕下元素的显示:.visible-在不同屏幕下控制元素的隐藏：hidden- 今日问题：无
| 
