新学期第一周学习周报

响应式布局

使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备

响应式布局容器

需要一个父级作为布局容器，来配合子元素实现变化效果

原理:利用媒体查询改变这个父级布局容器的大小，再改变子元素的大小（需要设置父级为居中）

响应式布局尺寸划分（使用媒体查询）
超小屏（手机） 100%（<768px）
小屏（平板） 750px 大于768px
中屏 电脑 970px 大于992px
大屏 1170px 大于1200px

Bootstrap前端开发框架

Bootstrap 是一种前端开发的框架，能使前端开发更加快捷

框架: 一套架构，他有一套比较完整的网页功能解决方案，而且控制权在框架本身。有预制样式库，组件，插件。使用者要按照框架所规定的某种规范进行开发。

偏向用于开发响应式项目，移动设备优先的web项目

Bootstrap的使用

没有学习js，只用样式库
由于控制权在框架本身，使用者要按照框架所规定的规范进行开发
使用:

1. 下载压缩包并解压
   在书写页面的文件夹里创建一个bootstrap的文件夹
   将解压之后的文件弄到bootstrap这个中
2. 创建html骨架
3. 引入bootstrap样式文件
4. 书写内容
   可以直接拿bootstrap预先定义好的样式来使用
   要修改bootstrap原先的样式要注意权重问题
   用好bootstrap的关键是知道它定义了那些样式，以及能实现什么效果

布局容器

bootstrap预先为页面和栅格系统提供了一个.container容器。bootstrap提供了两个这个作用的容器（下面记的都是类名）

1. .container类
   就是上面响应式布局记的原理
   自动有左右15px的padding

2. container-fluid
   流式布局容器 百分百宽度
   占据全部视口的容器
   适合于单独做移动开发

栅格系统

将页面布局划分成等宽的列，然后通过列数的定义来模块化页面布局

随着屏幕/视口的变化，系统会自动将container划分为12列

bootstrap里面cotainer宽度是固定的，但是不同屏幕下，container的宽度在那几个固定的值变化时，我们再划分12等份

利用这样，我们可以根据在不同屏幕尺寸下，元素所占的份数不同来做响应式页面

栅格系统的使用

通过一系列的行row和列column的组合来创建页面布局

1. 行（row） 必须放到container布局容器中

2. 要实现多个盒子对container的列的平均自动划分，我们得给盒子添加类前缀
   .col-xs-# 超小屏幕
   .col-sm-# 小屏幕
   .col-md-# 中等屏幕
   .col-lg-# 大屏幕
   #是该元素想要占得多少列

3. 在该行的盒子，#相加之和要等于12

   1. 小于12时 会自动将后面那一列空余出来
   2. 大于12时 会自动将最后一个盒子将被作为一个整体另起一行排列
   3. 等于12时 会填满整个container

4. 每一列都默认有左右15像素的padding

5. 可以同时为一个盒子指定多个屏幕类型的类名，一边划分份数
   eg:

6. 在应用时，元素之间有空白缝隙，不能设置margin值，只能设置padding值

列嵌套

栅格系统中container中的一行，（假设）有3个分别占4列的小盒子，这3个小盒子还会在自己内部划分出12列（类似于套娃）

列嵌套: 使用列嵌套将这个小盒子划分为两份时，还是使用类前缀给小盒子里面的小小盒子进行列的划分

并且每一个盒子（包括container）里面的每一行要用.row类名的盒子包起来
这样可以去掉父元素的padding值 并且高度和父级一样

代码示例:

列偏移

使用.col-md-offset-#类名可以将列向右侧偏移。实际上是通过使用该选择器为当前元素增加了左侧的边距（margin）

新版使用的是0ffest-md-

1. 后面跟的是偏移几份

2. 偏移的量和盒子所占的列数之和也要是12份
3. 可以实现盒子居中，两个盒子左右各一个

列排序

通过使用 .col-md-push-#和.col-md-pull-#类 来改变列的顺序
原理：将左边的盒子push推到右边去，将右边的盒子拉到左边来

1. #是所推或拉的列份数

响应式工具

.hidden-xs 只在超小屏上隐藏
.hidden-sm 小屏
.hidden-md 中屏
.hidden-lg 大屏
与之对应的:
.visible-xs 只在超小屏上显示
.visible-sm
.visible-md
.visible-lg