移动 Web 第五天

目录

响应式网页

1. 媒体查询

媒体查询 – 书写顺序

媒体查询 – 完整写法 – 了解

媒体查询 – 外部CSS

Bootstrap

Bootstrap – 简介

Bootstrap – 下载

Bootstrap – 使用

Bootstrap – 栅格系统

Bootstrap – 全局样式

Bootstrap – 组件（Components）

Bootstrap – 字体图标

---

响应式网页

解决方案：

1. 媒体查询

2. Bootstrap

1. 媒体查询

媒体特性

max-width ：最大宽度

min-width ：最小宽度

媒体查询 – 书写顺序

需求：

默认网页背景色是灰色

屏幕宽度大于等于 768px, 网页背景色是粉色

屏幕宽度大于等于 992px, 网页背景色是绿色

屏幕宽度大于等于 1200px, 网页背景色是skyblue

提示

min-width（从小到大）

max-width（从大到小）

媒体查询 – 完整写法 – 了解

（逻辑操作符）（关键词）

and

only

not

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

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

媒体查询 – 外部CSS

Bootstrap

Bootstrap – 简介

Bootstrap 是由 Twitter 公司开发维护的 前端 UI 框架 ，它提供了大量 编写好的 CSS 样式 ，允许开发者结合一定 HTML 结构及JavaScript， 快速 编写功能完善的 网页 及 常见交互效果

中文官网

https://www.bootcss.com/

Bootstrap – 下载

使用步骤：

1. 下载：Bootstrap V5中文文档 → 进入中文文档 → 下载 → 下载 Bootstrap 生产文件

2. 使用

Bootstrap – 使用

使用步骤：

1. 引入 Bootstrap CSS 文件

<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">

2. 调用类名： container ：响应式布局版心类

<div class="container">测试</div>

Bootstrap – 栅格系统

栅格化是指将整个网页的宽度分成 12 等份，每个盒子占用的对应的份数

例如：一行排 4 个盒子，则每个盒子占 3 份 即可（ 12 / 4 = 3 ）

常用布局类

p col-*-* ：列（例如： col-xxl-3 ）

p row ：行

1. 栅格系统是将网页等分成多少份？

12 份

2. Bootstrap 5 中，栅格系统划分了多少个响应区间？

6 个响应区间

Bootstrap – 全局样式

Button类

btn：默认样式

btn-success：成功

btn-warning：警告

……

按钮尺寸：btn-lg / btn-sm

表格类：

table：默认样式

table-striped：隔行变色

table-success：表格颜色

……

Bootstrap – 组件（Components）

1. 引入样式表

2. 引入 js 文件

3. 复制结构，修改内容

Bootstrap – 字体图标

下载：

导航 / Extend：图标库 → 安装 → 下载安装包 → bootstrap-icons-1.X.X.zip

使用：

1. 复制 fonts 文件夹 到项目目录

2. 网页引入 bootstrap-icons.css 文件

3. 调用 CSS 类名 （图标对应的类名）

<i class="bi-android2"></i>