响应式布局—阿里佰秀
响应式开发原理
使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的
| 设备划分 | 尺寸区间 | 设置宽度 | 列前缀 |
|---|---|---|---|
| 超小屏幕（手机） | <768px | 100% | .col-xs- |
| 小屏设备（平板） | >=768px ~ < 992px | 750px | .col-sm- |
| 中等屏幕（桌面） | >=992px ~ < 1200px | 970px | .col-md- |
| 宽屏设备（大桌面） | >=1200px | 1170px | .col-lg-3 |
- 响应式需要一个父级作为布局容器，来配合自己元素来实现变化效果，原理就是在不同的屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排布方式和大小，从而实现在不同页面看到不同的页面布局和样式变化
@media screen and (max-width:767px) {//小屏设备下的布局为100%
.container {
width: 100%;
}
}
@media screen and (min-width:768px) {//中屏设备下的
.container {
width: 750px;
}
}
Bootstarp框架
简介
前端开发框架—基于HTML、CSS、JS的，简洁灵活，使得WEB开发更加快捷
-
框架：一套架构，完整网页功能解决方案，有预制样式库，组件和插件
-
优点：标准化的编码规范，提供了一套简介直观强悍的组件，不断更新迭代，提高了开发效率
-
四部曲：1、创建文件夹结构2、html骨架3、引入相关文件样式4、书写内容
-
是通过类名直接进行使用，如果要增加自己样式，就是用style直接进行适当修改
container-fluid类流式布局容器，百分百宽度，单独做移动开发
布局容器
需要为页面内容和栅格系统包裹一个.container容器，提供了两类
-
container类
- 响应式容器固定宽度
- 大中小屏设置固定数值px
-
container-fluid类
- 流式布局容器，百分百宽度
- 占据全部视口容器，使用制作移动端页面开发
- 一直保持和父级容器宽度一样
栅格系统
-
将页面布局划分为等宽的列，通过列数的定义来模块化页面布局，系统统一划分12列
-
现有行再有列,列的具体划分需要加入列前缀，.col-lg-3（12份中每一列占几等份）
- 列份数相加应该等于12.列刚好等于12则占满整个container，如果不够则会有空白，如果列份数相加超过了12，多余的那一列会另起一行显示
- 也可以给同时加“class= col-lg-3 col-md-4”
-
在每一列都有左右15px的padding值，原理是给了33.3%宽度距离进行了左浮动，如果直接给这个＋margin边框就会存在溢出掉下来，我们就要在列中再增加一个盒子然后设置它的padding
-
列嵌套问题
- 直接在列中放入两个盒子就存在不能顶格显示的问题
- 如果我们给列之前再加一个行row的盒子就可以取消父元素的padding，而且高度会自觉和父高度一样
-
列偏移问题
-
为了实现里面内容可以左右分别分布，将右边盒子进行右偏移，就可以把空白部分的内容放在中间显示出来
-
col-md-offset-4来实现右侧偏移，左盒子加了margin值
-
-
列排序问题
- col-lg-push-8 右边盒子推过来 col-lg-pull-4 左边盒子拉过来
-
列隐藏显示问题
- hidden-xs/sm/md/lg 不同情况下可以进行内容的隐藏
- visible-xs/sm/md/lg 不同情况下进行内容的显示
实例练习
屏幕划分
- 中屏幕和大屏幕布局是一致的，只需要采用col-md就可以了，是大于等于970以上的
- 缩小发现小屏幕的样式发生了改变，设置为col-sm
- 超小屏幕下的样式也发生了改变，所以需要设置为col-xs
container宽度修改
- 修改单独在css文件中进行样式!important
布局
- 在需要变化不同样式的地方进行col-sm/xs属性class的添加来实现不同情况下的显示