移动布局第七天 BootStrap布局

1.响应式布局

​ 在PC端、iPad端、移动端都可以显示 页面的布局随着页面的变化而变化

​ 响应式布局原理：通过媒体查询实现

​ 响应式布局容器：需要一个父级做为布局容器，配合子元素实现变化

2.BootStrap

​ 基于html、css、js的框架

3.BootStrap使用

​ 通过类名控制，就是他自己官网的类名不能动

​ （1）创建文件夹结构 项目中添加一个bootstrap文件夹，官网下载bootstrap，解压 生产环境的是代码编译压缩过后的

​ （2）创建html骨架结构

​ （3）引入相关样式文件 link引入css文件

​ （4）书写内容 利用层叠如果想修改样式，要再加一个类名，用那个类名写

​ 表格和表单、按钮和字体图标引入直接按文档引入，如果想修改样式就直接改代码

4.BootStrap布局容器

​ （1）container类 包含页面内容和栅格系统

​ 大屏（>=1200px）宽度1170px 中屏（>=992px）宽度970px

​ 小屏（>=768px）宽度750px 超小屏（100%）都生效

​ （2）container-fluid 流式布局容器

​ 占据全部视口 适合单独做移动端

5.BootStrap栅格系统

​ 通过行与列的组合实现 把container最多划分成12列

​ 使用步骤：（1）写container类

​ （2）设置行元素 作用：抵消15px的padding值

​ （3）设置列元素 大屏：col-lg-数字 中屏：col-md-数字 小屏：col-sm-数字 超小屏：col-xs-数字

​ 数字是占的份数 可以多写，不是只固定一个

​ 嵌套的话也要加一个row，要不就是好几个padding值叠加

6.列嵌套

​ 最好加一个行，消除父元素的padding值，高度自动和父元素一样高

​ 以后如果想用padding值当间隙，由于有背景色，加一个div子盒子解决，把背景色给到子盒子