移动Web-响应式布局-BootStrap

响应式

媒体查询

目标：能够根据设备宽度的变化，设置差异化样式

l 开发常用写法
Ø 媒体特性常用写法
Ø max-width  （提示小于等于用）
Ø min-width  （提示大于等于用）

书写顺序

注意书写顺序

l min-width（从小到大写）
l max-width（从大到小写）

l 完整写法

关键词

l and
l only
l not

媒体类型

l 媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。

媒体特征

媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等

外链式CSS引入

BootStrap

目标：知道 UI框架的作用
l UI框架概念
Ø 将常见效果进行统一封装后形成的一套代码, 例如：BootStrap。
l 作用
Ø 基于框架开发，效率高，稳定性高

<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">

使用步骤
1. 引入： BootStrap提供的CSS代码
2. 调用类：使用BootStrap提供的样式
Ø container：响应式布局版心类

BootStrap栅格系统

目标：使用BootStrap栅格系统布局响应式网页

l 栅格化是指将整个网页的宽度分成若干等份
l BootStrap3默认将网页分成12等

l .container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
l .container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。
l 分别使用.row类名和 .col类名定义栅格布局的行和列。

注意:
1. container类自带间距15px;
2. row类自带间距-15px  （抵消container自带的内间距15px；）

全局样式

目标：掌握BootStrap手册用法，使用全局CSS样式美化标签

分类：
l 布局样式
l 内容美化样式

手册用法：
BootStrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点。
网站首页 → BootStrap3中文文档 → 全局CSS样式 → 按分类导航查找目标类