就业班移动web第七天

一、媒体查询

根据设备的变化，设置差异式布局！
开发写法：
@media （媒体特性-一般写max-min宽度）{
选择器 { 样式
}
}

二、bootstrap（UI框架）

一、使用方法：

1.去bootstrap官网下载文件，把需要的css和js文件引入到项目代码中！
注意：css用link引入，js在body用<script>标签引入 ！js顺序：先用jq.js，后用bootstrap.js
2.你需要什么组件就去复制什么组件！也可以定制化，定制化需要重新下载覆盖之前的bootstrap文件
【 container 是bootstrap提供的版心的类名】
【container-fluid 是bootstrap提供的通栏的类名】
【row 是bootstrap提供给版心或者通栏使用的，目的就是为了清除设置好的内边距 】

二、bootstrap栅格系统

a栅格化是指将整个网页的宽度分成若干等份
BootStrap3默认将网页分成12等份
写法：class=" col-尺寸-*"

1. .col-xs-* 这是超小屏幕类（<768px），类似手机等设备。
2. .col-sm-* 这是小屏幕设备类（≥768px且<992px），类似平板设备。
3. .col-md-* 这是中型设备类（≥992px且<1200px）
4. .col-lg-* 这是大型设备类（≥1200px）

image.png