响应式网页

1. 媒体查询

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

• 开发常用写法

  @media （媒体特性） {
      选择器 {
          样式
      }
  }

  max-width  (从大到小)                   min-width(从小到大)

• （了解）完整写法

•  外链式引入

 

 注意：media后面需要加小括号

 BootStrap的使用

目标：使用BootStrap框架快速开发响应式网页

 下载：

中文官网：https://www.bootcss.com/

使用：

        1.引入：BootStrap提供的CSS代码

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

        2.调用类：使用BootStrap提供的样式

• .container:响应式布局版心类
• .container-fluid也是BootStrap中专门提供的类名，所有应用该类名的盒子，宽度均为100%
• 分别使用.row类名和.col类名定义栅格布局的行和列

注意：

1.container类自带间距15px

2.row类自带间距-15px

栅格系统

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

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

 全局样式

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

手册用法：

BootStrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点

网站首页 - BootStrap3中文文档 - 全局css样式 - 按分类导航查找目标类

Glyphicons字体图标

目标：使用Glyphicons字体图标实现网页中的图标效果

• Glyphicons字体图标的使用步骤

1. html页面引入BootStrap样式文件
2. 空标签调用对应类名

使用BootStrap插件实现常见的交互效果

• 使用步骤

1. 引入BootStrap样式
2. 引入js文件：jQuery.js + BootStrap.min.js

注意：有顺序要求，先引入jQ文件再引入js文件