响应式布局#

媒体查询
BootStrap响应式

响应式布局是一种网页设计方法是，使网页能够根据用户设备的屏幕尺寸，分辨率，方向（横屏/书评）等特性自动调整布局和内容**，提供一致且优化的用户体验。其核心目标是“一次设计，多端适配”

优点	缺点
1. 一套代码适配多端设备	1. 复杂布局需较多调试
2. 节省开发和维护成本	2. 过度使用媒体查询可能影响性能
3. 用户体验一致性高	3. 需精准计算断点（什么屏幕下，怎么显示）

响应式布局核心技术
布局方式

弹性盒子（Flexbox）
网格布局（CSS Grid）
百分比布局（流式布局）
单位可借助 vw 实现

断点（Breakpoints）设置

根据常见设备宽度设置断点
- 手机：< 768px
- 平板：768px ~ 1024px
- PC：> 1024px
根据不同设备宽度显示不同布局样式

断点名称	最小宽度	CSS 媒体查询	适用场景
xs	<576px	`@media (min-width: 0)`	超小设备（手机竖屏）
sm	≥576px	`@media (min-width: 576px)`	平板竖屏/小屏手机横屏
md	≥768px	`@media (min-width: 768px)`	平板横屏/桌面小屏
lg	≥992px	`@media (min-width: 992px)`	桌面中屏
xl	≥1200px	`@media (min-width: 1200px)`	桌面大屏
xxl	≥1400px	`@media (min-width: 1400px)`	超宽屏（4K 显示器等）

响应式布局实现方案

媒体查询 媒体查询是 CSS3 的功能，允许根据设备的特性（如屏幕宽度、高度、分辨率、设备类型等）应用不同的样式规则。它是实现响应式设计的核心技术。
第三方框架 Bootstrap 预置样式和组件减少重复编码，缩短项目周期，适配 PC、移动端及主流浏览器。后续还可以学习其他不同的框架。

媒体查询#

1. 基本语法#

1
/* 方式一：@media规则 */
2
@media 媒体类型 and (媒体特性) {
3
    /* CSS样式 */
4
}
5

6
/* 方式二：在link标签中引入 */
7
<link media="媒体类型 and (媒体特性)" href="styles.css">
8

9
/* 方式三：在CSS中使用@import */
10
@import url("styles.css") 媒体类型 and (媒体特性);

2. 媒体类型#

媒体类型	说明	常用场景
`screen`	屏幕设备	网页显示（最常用）
`print`	打印设备	打印机、打印预览
`all`	所有设备	默认值
`speech`	语音合成器	屏幕阅读器
`tv`	电视设备	智能电视

3. 媒体特性#

媒体特性	说明	示例
`width`	视口宽度	`@media (width: 768px)`
`height`	视口高度	`@media (height: 1024px)`
`min-width`	最小宽度（及以上）	`@media (min-width: 768px)`
`max-width`	最大宽度（及以下）	`@media (max-width: 1200px)`
`min-height`	最小高度	`@media (min-height: 600px)`
`max-height`	最大高度	`@media (max-height: 800px)`
`orientation`	屏幕方向	`@media (orientation: landscape)`
`aspect-ratio`	宽高比	`@media (aspect-ratio: 16/9)`

4. 逻辑运算符#

1
/* and：同时满足多个条件 */
2
@media screen and (min-width: 768px) and (max-width: 1024px) {
3
    /* 平板设备 */
4
}
5

6
/* not：对整个媒体查询取反 */
7
@media not screen {
8
    /* 非屏幕设备 */
9
}
10

11
/* only：仅在指定媒体类型生效 */
12
@media only screen {
13
    /* 仅屏幕设备 */
14
}
15

16
/* 逗号（或）：满足任一条件 */
17
@media (min-width: 768px), (orientation: landscape) {
18
    /* 宽度≥768px 或 横屏 */
19
}

5. 常见使用场景#

场景一：根据屏幕宽度改变布局#

1
/* 默认样式（移动端） */
2
.container {
3
    width: 100%;
4
    padding: 10px;
5
}
6

7
/* 平板及以上设备 */
8
@media (min-width: 768px) {
9
    .container {
10
        width: 750px;
11
        padding: 20px;
12
    }
13
}
14

15
/* 桌面及以上设备 */
16
@media (min-width: 992px) {
17
    .container {
18
        width: 970px;
19
        padding: 30px;
20
    }
21
}
22

23
/* 大屏幕设备 */
24
@media (min-width: 1200px) {
25
    .container {
26
        width: 1170px;
27
        padding: 40px;
28
    }
29
}

场景二：隐藏/显示元素#

1
/* 默认显示 */
2
.sidebar {
3
    display: block;
4
}
5

6
/* 小屏幕隐藏侧边栏 */
7
@media (max-width: 768px) {
8
    .sidebar {
9
        display: none;
10
    }
11
}

场景三：横屏/竖屏适配#

1
/* 横屏模式 */
2
@media (orientation: landscape) {
3
    .container {
4
        flex-direction: row;
5
    }
6
}
7

8
/* 竖屏模式 */
9
@media (orientation: portrait) {
10
    .container {
11
        flex-direction: column;
12
    }
13
}

场景四：Retina屏幕高清显示#

1
/* 普通屏幕 */
2
.logo {
3
    background-image: url("logo.png");
4
}
5

6
/* Retina屏幕（2倍密度） */
7
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
8
    .logo {
9
        background-image: url("logo@2x.png");
10
    }
11
}

6. 移动优先 vs 桌面优先#

移动优先（推荐）#

1
/* 1. 先编写移动端基础样式 */
2
.box {
3
    width: 100%;
4
    font-size: 14px;
5
}
6

7
/* 2. 逐步添加更大屏幕的样式 */
8
@media (min-width: 768px) {
9
    .box {
10
        width: 50%;
11
        font-size: 16px;
12
    }
13
}
14

15
@media (min-width: 1200px) {
16
    .box {
17
        width: 33.33%;
18
        font-size: 18px;
19
    }
20
}

桌面优先#

1
/* 1. 先编写桌面端样式 */
2
.box {
3
    width: 33.33%;
4
    font-size: 18px;
5
}
6

7
/* 2. 逐步添加小屏幕的样式 */
8
@media (max-width: 1199px) {
9
    .box {
10
        width: 50%;
11
        font-size: 16px;
12
    }
13
}
14

15
@media (max-width: 767px) {
16
    .box {
17
        width: 100%;
18
        font-size: 14px;
19
    }
20
}

7. 最佳实践#

断点设置建议#

1
/* 超小屏幕（手机竖屏）<576px */
2
/* 小屏幕（手机横屏/小平板）576px-767px */
3
/* 中等屏幕（平板）768px-991px */
4
/* 大屏幕（桌面）992px-1199px */
5
/* 超大屏幕（桌面大屏）≥1200px */

实用技巧#

1
/* 1. 使用min-width而不是精确值 */
2
@media (min-width: 768px) { /* ✓ 好 */ }
3
@media (width: 768px) { /* ✗ 差：768px的设备很少 */ }
4

5
/* 2. 合理控制媒体查询数量 */
6
@media (min-width: 576px) { /* 小屏平板 */ }
7
@media (min-width: 768px) { /* 平板 */ }
8
@media (min-width: 992px) { /* 桌面 */ }
9
@media (min-width: 1200px) { /* 大屏桌面 */ }
10

11
/* 3. 使用CSS变量管理断点 */
12
:root {
13
    --breakpoint-sm: 576px;
14
    --breakpoint-md: 768px;
15
    --breakpoint-lg: 992px;
16
    --breakpoint-xl: 1200px;
17
}
18

19
/* 4. 配合flex和grid使用 */
20
.grid {
21
    display: grid;
22
    grid-template-columns: 1fr;
23
}
24

25
@media (min-width: 768px) {
26
    .grid {
27
        grid-template-columns: repeat(2, 1fr);
28
    }
29
}
30

31
@media (min-width: 1200px) {
32
    .grid {
33
        grid-template-columns: repeat(4, 1fr);
34
    }
35
}

8. 浏览器兼容性#

功能	Chrome	Firefox	Safari	Edge	IE
基础媒体查询	1+	1+	1+	12+	9+
min/max前缀	1+	1+	1+	12+	9+
orientation	3+	6+	5+	12+	9+
aspect-ratio	3+	6+	5+	12+	✗

9. 常见错误避免#

1
/* ✗ 错误1：媒体查询位置不当 */
2
/* 媒体查询应该放在样式规则之后 */
3
.box { color: red; }
4
@media (min-width: 768px) { .box { color: blue; } }
5

6
/* ✗ 错误2：断点重叠 */
7
@media (min-width: 768px) { .box { width: 750px; } }
8
@media (min-width: 750px) { .box { width: 970px; } } /* 750px处重叠 */
9

10
/* ✓ 正确：断点保持合理间距 */
11
@media (min-width: 768px) { .box { width: 750px; } }
12
@media (min-width: 992px) { .box { width: 970px; } }
13

14
/* ✗ 错误3：单位混淆 */
15
@media (min-width: 768) { /* ✗ 缺少单位 */ }
16
@media (min-width: 768px) { /* ✓ 正确 */ }
17

18
/* ✗ 错误4：媒体特性拼写错误 */
19
@media (min-width: 768px) and (max-with: 1200px) { /* ✗ max-with */ }
20
@media (min-width: 768px) and (max-width: 1200px) { /* ✓ max-width */ }

BootStrap响应式#

BootStrap框架介绍和引用#

什么是Bootstrap

Bootstrap 是由 Twitter 公司开发维护的一套前端UI框架，它提供了一套现成的CSS样式和组件，开发者可以直接引用这些类名，快速搭建响应式网页。

Bootstrap优势

优势	说明
响应式设计	一套代码适配手机、平板、PC等多端设备
标准化	提供统一的视觉风格和组件规范
开发效率高	大量预置样式和组件，无需从零写CSS
跨浏览器兼容	兼容主流浏览器，减少兼容性调试
可定制	支持按需定制，也可以覆盖默认样式

Bootstrap版本

版本	特点	适用场景
Bootstrap 3	经典稳定，支持IE8+，国内网课最常用	学习入门、传统项目
Bootstrap 4	引入Flexbox，移除IE支持，新增卡片等组件	现代项目
Bootstrap 5	移除jQuery依赖，新增RTL支持，纯CSS组件	新项目推荐

引入方式

方式一：CDN引入（推荐学习时使用）

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="utf-8">
5
    <!-- 必须配置viewport，否则响应式无效 -->
6
    <meta name="viewport" content="width=device-width, initial-scale=1">
7
    <title>Bootstrap示例</title>
8
    <!-- Bootstrap核心CSS -->
9
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" rel="stylesheet">
10
    <!-- jQuery（Bootstrap3的JS依赖jQuery） -->
11
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
12
    <!-- Bootstrap核心JS -->
13
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
14
</head>
15
<body>
16
    <!-- 页面内容 -->
17
</body>
18
</html>

方式二：本地引入

下载Bootstrap压缩包并解压
将css、js、fonts文件夹复制到项目中
在HTML中引入本地文件

1
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
2
<script src="bootstrap/js/jquery.min.js"></script>
3
<script src="bootstrap/js/bootstrap.min.js"></script>

注意事项：

viewport meta标签是响应式的必要条件，必须添加
Bootstrap 3的JS插件依赖jQuery，需要先引入jQuery
引入顺序：先CSS，再jQuery，最后Bootstrap JS

BootStrap框架基本使用#

容器（Container）

Bootstrap需要一个容器来包裹页面内容，提供两种容器类：

容器类	特点	适用场景
`.container`	固定宽度，居中显示，两侧留白	PC端页面、常规布局
`.container-fluid`	100%宽度，充满视口	全屏布局、移动端

1
<!-- 固定宽度容器 -->
2
<div class="container">
3
  <h1>固定宽度容器</h1>
4
  <p>在不同屏幕尺寸下有不同的固定宽度，并居中显示</p>
5
</div>
6

7
<!-- 全屏宽度容器 -->
8
<div class="container-fluid">
9
  <h1>全屏宽度容器</h1>
10
  <p>始终占满整个屏幕宽度</p>
11
</div>

.container在不同断点下的宽度：

屏幕尺寸	断点宽度	container宽度
超小屏（手机）	<768px	100%
小屏（平板）	≥768px	750px
中屏（桌面）	≥992px	970px
大屏（大桌面）	≥1200px	1170px

按钮（Buttons）

Bootstrap提供了多种预定义按钮样式：

1
<!-- 基础按钮 -->
2
<button class="btn btn-default">默认按钮</button>
3

4
<!-- 按钮颜色样式 -->
5
<button class="btn btn-default">默认</button>
6
<button class="btn btn-primary">主要</button>
7
<button class="btn btn-success">成功</button>
8
<button class="btn btn-info">信息</button>
9
<button class="btn btn-warning">警告</button>
10
<button class="btn btn-danger">危险</button>
11
<button class="btn btn-link">链接</button>
12

13
<!-- 按钮尺寸 -->
14
<button class="btn btn-primary btn-lg">大按钮</button>
15
<button class="btn btn-primary">默认按钮</button>
16
<button class="btn btn-primary btn-sm">小按钮</button>
17
<button class="btn btn-primary btn-xs">超小按钮</button>
18

19
<!-- 块级按钮（占满整行） -->
20
<button class="btn btn-primary btn-block">块级按钮</button>
21

22
<!-- 按钮状态 -->
23
<button class="btn btn-primary active">激活状态</button>
24
<button class="btn btn-primary disabled">禁用状态</button>

也可以用在<a>标签上：

1
<a href="#" class="btn btn-primary">链接按钮</a>
2
<input type="button" class="btn btn-success" value="输入框按钮">

排版类

1
<!-- 标题 -->
2
<h1>h1. Bootstrap标题 <small>副标题</small></h1>
3
<h2>h2. Bootstrap标题</h2>
4
<h3>h3. Bootstrap标题</h3>
5

6
<!-- 页面主体（突出显示） -->
7
<p class="lead">这是一个突出显示的段落</p>
8

9
<!-- 文本对齐 -->
10
<p class="text-left">左对齐</p>
11
<p class="text-center">居中</p>
12
<p class="text-right">右对齐</p>
13

14
<!-- 文本颜色 -->
15
<p class="text-muted">柔和灰色</p>
16
<p class="text-primary">主要蓝色</p>
17
<p class="text-success">成功绿色</p>
18
<p class="text-info">信息蓝色</p>
19
<p class="text-warning">警告橙色</p>
20
<p class="text-danger">危险红色</p>
21

22
<!-- 文本大小写 -->
23
<p class="text-lowercase">LOWERCASE 转为小写</p>
24
<p class="text-uppercase">uppercase 转为大写</p>
25
<p class="text-capitalize">capitalized 首字母大写</p>

列表

1
<!-- 无序列表（去点） -->
2
<ul class="list-unstyled">
3
  <li>列表项1</li>
4
  <li>列表项2</li>
5
  <li>列表项3</li>
6
</ul>
7

8
<!-- 内联列表（横向排列） -->
9
<ul class="list-inline">
10
  <li>首页</li>
11
  <li>产品</li>
12
  <li>关于</li>
13
</ul>

表格

1
<table class="table table-striped table-bordered table-hover">
2
  <thead>
3
    <tr>
4
      <th>姓名</th>
5
      <th>年龄</th>
6
    </tr>
7
  </thead>
8
  <tbody>
9
    <tr class="success">
10
      <td>张三</td>
11
      <td>20</td>
12
    </tr>
13
    <tr>
14
      <td>李四</td>
15
      <td>22</td>
16
    </tr>
17
    <tr class="danger">
18
      <td>王五</td>
19
      <td>25</td>
20
    </tr>
21
  </tbody>
22
</table>

表格样式类：

.table - 基础表格样式（必加）
.table-striped - 斑马纹
.table-bordered - 带边框
.table-hover - 鼠标悬停高亮
.table-condensed - 紧凑表格

表单

1
<form>
2
  <div class="form-group">
3
    <label>用户名</label>
4
    <input type="text" class="form-control" placeholder="请输入用户名">
5
  </div>
6
  <div class="form-group">
7
    <label>密码</label>
8
    <input type="password" class="form-control" placeholder="请输入密码">
9
  </div>
10
  <button type="submit" class="btn btn-primary">提交</button>
11
</form>

BootStrap栅格布局#

栅格系统简介

Bootstrap的栅格系统（Grid System）是一套响应式、移动设备优先的流式栅格布局系统。它将页面容器平均划分为12列，通过给列添加类名来控制元素在不同屏幕下的宽度。

栅格系统工作原理

1
┌──────────────────────────────────────────┐
2
│              container                   │
3
│  ┌───────────────────────────────────┐   │
4
│  │            row (12列)             │   │
5
│  ├─────┬─────┬─────┬─────┬─────┬─────┤   │
6
│  │col- │col- │col- │col- │col- │col- │   │
7
│  │ md-2│ md-2│ md-2│ md-2│ md-2│ md-2│   │
8
│  └─────┴─────┴─────┴─────┴─────┴─────┘   │
9
└──────────────────────────────────────────┘

核心要点：

行（row）必须放在container中
列（col）必须作为row的直接子元素
内容应该放在列（col）中
每行12列，列数之和超过12会自动换行

栅格参数（断点）

	超小屏手机 (<768px)	小屏平板 (≥768px)	中屏桌面 (≥992px)	大屏大桌面 (≥1200px)
类名前缀	`.col-xs-*`	`.col-sm-*`	`.col-md-*`	`.col-lg-*`
列数	12	12	12	12
最大列宽	自动	~62px	~81px	~97px
间距(gutter)	30px（左右各15px）	30px	30px	30px
是否浮动	是	是	是	是

基础用法

示例1：等宽列（三列布局）

1
<div class="container">
2
  <div class="row">
3
    <div class="col-md-4">第一列（占4列，4/12 = 1/3）</div>
4
    <div class="col-md-4">第二列（占4列）</div>
5
    <div class="col-md-4">第三列（占4列）</div>
6
  </div>
7
</div>

示例2：不等宽列（侧边栏+主内容）

1
<div class="container">
2
  <div class="row">
3
    <div class="col-md-3">侧边栏（占3列）</div>
4
    <div class="col-md-9">主内容区（占9列）</div>
5
  </div>
6
</div>

示例3：移动端和桌面端不同布局

1
<div class="container">
2
  <div class="row">
3
    <!-- 手机：12列（满宽），平板/桌面：6列（半宽） -->
4
    <div class="col-xs-12 col-md-6">左侧内容</div>
5
    <!-- 手机：12列（满宽），平板/桌面：6列（半宽） -->
6
    <div class="col-xs-12 col-md-6">右侧内容</div>
7
  </div>
8
</div>

列组合示例代码（带颜色区分）：

1
<style>
2
  .row > div {
3
    height: 50px;
4
    background-color: pink;
5
    border: 1px solid #fff;
6
  }
7
</style>
8

9
<div class="container">
10
  <!-- 12列：12个col-md-1 -->
11
  <div class="row">
12
    <div class="col-md-1">1</div>
13
    <div class="col-md-1">2</div>
14
    <div class="col-md-1">3</div>
15
    <div class="col-md-1">4</div>
16
    <div class="col-md-1">5</div>
17
    <div class="col-md-1">6</div>
18
    <div class="col-md-1">7</div>
19
    <div class="col-md-1">8</div>
20
    <div class="col-md-1">9</div>
21
    <div class="col-md-1">10</div>
22
    <div class="col-md-1">11</div>
23
    <div class="col-md-1">12</div>
24
  </div>
25
  <!-- 6列：6个col-md-2 -->
26
  <div class="row">
27
    <div class="col-md-2">2</div>
28
    <div class="col-md-2">2</div>
29
    <div class="col-md-2">2</div>
30
    <div class="col-md-2">2</div>
31
    <div class="col-md-2">2</div>
32
    <div class="col-md-2">2</div>
33
  </div>
34
  <!-- 4列：4个col-md-3 -->
35
  <div class="row">
36
    <div class="col-md-3">3</div>
37
    <div class="col-md-3">3</div>
38
    <div class="col-md-3">3</div>
39
    <div class="col-md-3">3</div>
40
  </div>
41
  <!-- 3列：3个col-md-4 -->
42
  <div class="row">
43
    <div class="col-md-4">4</div>
44
    <div class="col-md-4">4</div>
45
    <div class="col-md-4">4</div>
46
  </div>
47
  <!-- 2列：2个col-md-6 -->
48
  <div class="row">
49
    <div class="col-md-6">6</div>
50
    <div class="col-md-6">6</div>
51
  </div>
52
  <!-- 1列：1个col-md-12 -->
53
  <div class="row">
54
    <div class="col-md-12">12</div>
55
  </div>
56
</div>

列偏移（列与列之间的距离）

使用 .col-md-offset-* 类可以将列向右偏移*个列宽：

1
<div class="container">
2
  <div class="row">
3
    <!-- 向右偏移3列，实际位置在第4列开始 -->
4
    <div class="col-md-4 col-md-offset-3">
5
      占4列，向右偏移3列
6
    </div>
7
  </div>
8

9
  <!-- 两列居中分开 -->
10
  <div class="row">
11
    <div class="col-md-3">左侧</div>
12
    <div class="col-md-3 col-md-offset-6">右侧（偏移6列靠右）</div>
13
  </div>
14

15
  <!-- 居中显示 -->
16
  <div class="row">
17
    <!-- 占6列，偏移3列，实现居中（(12-6)/2=3） -->
18
    <div class="col-md-6 col-md-offset-3">
19
      这个div水平居中
20
    </div>
21
  </div>
22
</div>

常用的offset组合：

需求	类名
列居中（占6列）	`col-md-6 col-md-offset-3`
列居中（占4列）	`col-md-4 col-md-offset-4`
列居中（占8列）	`col-md-8 col-md-offset-2`
两列两端对齐	`col-md-3` + `col-md-3 col-md-offset-6`

BootStrap列布局和字体图标#

列排序（push/pull）

使用 .col-md-push-* 向右推，.col-md-pull-* 向左拉，可以改变列的顺序：

1
<div class="row">
2
  <!-- 左列向右推6列（到右侧） -->
3
  <div class="col-md-6 col-md-push-6">
4
    原来在左边，现在在右边
5
  </div>
6
  <!-- 右列向左拉6列（到左侧） -->
7
  <div class="col-md-6 col-md-pull-6">
8
    原来在右边，现在在左边
9
  </div>
10
</div>

应用场景：移动端和PC端内容顺序互换

1
<div class="row">
2
  <!-- PC端：主内容在左(9列)，侧边栏在右(3列) -->
3
  <!-- 移动端：侧边栏显示在上方，主内容在下方 -->
4
  <div class="col-md-9 col-md-push-3">主内容区</div>
5
  <div class="col-md-3 col-md-pull-9">侧边栏</div>
6
</div>

列嵌套

栅格系统支持列嵌套，即在列中再使用row和col：

1
<div class="row">
2
  <div class="col-md-9">
3
    第一列占9列
4
    <!-- 在col-md-9中嵌套新的行（自动分成12列） -->
5
    <div class="row">
6
      <div class="col-md-6">嵌套第一列（占父级的一半）</div>
7
      <div class="col-md-6">嵌套第二列（占父级的一半）</div>
8
    </div>
9
  </div>
10
  <div class="col-md-3">
11
    第二列占3列
12
  </div>
13
</div>

注意：嵌套的row不需要container了，因为父级col已经有padding。

响应式工具（显示/隐藏）

通过类名控制元素在不同屏幕下的显示与隐藏：

类名	超小屏 <768px	小屏 ≥768px	中屏 ≥992px	大屏 ≥1200px
`.visible-xs-*`	可见	隐藏	隐藏	隐藏
`.visible-sm-*`	隐藏	可见	隐藏	隐藏
`.visible-md-*`	隐藏	隐藏	可见	隐藏
`.visible-lg-*`	隐藏	隐藏	隐藏	可见
`.hidden-xs`	隐藏	可见	可见	可见
`.hidden-sm`	可见	隐藏	可见	可见
`.hidden-md`	可见	可见	隐藏	可见
`.hidden-lg`	可见	可见	可见	隐藏

1
<!-- 只在手机上显示 -->
2
<div class="visible-xs-block">手机端菜单按钮</div>
3

4
<!-- 在手机上隐藏，其他尺寸显示 -->
5
<div class="hidden-xs">PC端侧边栏</div>

字体图标（Glyphicons）

Bootstrap 3 内置了 Glyphicons Halflings 字体图标，共包含200多个图标。

使用方法：

1
<!-- 基本用法 -->
2
<span class="glyphicon glyphicon-search"></span>
3

4
<!-- 图标配合文字 -->
5
<button class="btn btn-primary">
6
  <span class="glyphicon glyphicon-plus"></span> 新增
7
</button>
8

9
<button class="btn btn-danger">
10
  <span class="glyphicon glyphicon-trash"></span> 删除
11
</button>
12

13
<!-- 图标大小 -->
14
<span class="glyphicon glyphicon-star" style="font-size: 20px;"></span>
15
<span class="glyphicon glyphicon-star" style="font-size: 30px;"></span>
16

17
<!-- 图标颜色 -->
18
<span class="glyphicon glyphicon-heart" style="color: red;"></span>
19
<span class="glyphicon glyphicon-ok" style="color: green;"></span>

常用字体图标类名：

类名	图标含义
`glyphicon-search`	搜索（放大镜）
`glyphicon-user`	用户
`glyphicon-home`	首页（房子）
`glyphicon-heart`	心形/收藏
`glyphicon-star`	星星
`glyphicon-plus`	加号/新增
`glyphicon-minus`	减号
`glyphicon-trash`	删除/垃圾桶
`glyphicon-pencil`	编辑/铅笔
`glyphicon-cog` / `glyphicon-wrench`	设置/齿轮
`glyphicon-film`	视频/影片
`glyphicon-music`	音乐
`glyphicon-camera`	相机
`glyphicon-envelope`	信封/邮件
`glyphicon-shopping-cart`	购物车
`glyphicon-ok`	对勾/成功
`glyphicon-remove`	叉号/关闭
`glyphicon-chevron-left`	左箭头
`glyphicon-chevron-right`	右箭头
`glyphicon-arrow-up`	上箭头
`glyphicon-arrow-down`	下箭头

Bootstrap 5 图标（Bootstrap Icons）

Bootstrap 4/5 不再内置Glyphicons，推荐使用 Bootstrap Icons：

1
<!-- 引入Bootstrap Icons -->
2
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
3

4
<!-- 使用 -->
5
<i class="bi bi-search"></i>
6
<i class="bi bi-person"></i>
7
<i class="bi bi-heart"></i>

字体图标使用原理：

字体图标本质上是一种特殊字体，通过CSS的::before伪元素插入字符，每个类名对应一个图标的Unicode编码：

1
.glyphicon-search::before {
2
  content: "\e003";  /* Unicode编码，渲染为搜索图标 */
3
}

优点：

加载速度快（字体文件比图片小）
可任意缩放不失真
可用CSS修改颜色、大小、阴影等
支持CSS动画

其他技巧#

svg裁剪背景#

有时候，想要裁剪更复杂的形状，但是clip-path只能裁剪矩形。这时候，可以使用svg的clip-path属性来裁剪更复杂的形状。

示例

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>SVG裁剪背景示例</title>
7
    <style>
8
        /* 定义SVG裁剪路径 */
9
        .clip-svg {
10
            clip-path: url(#myClip);
11
        }
12

13
        /* 被裁剪的元素 */
14
        .clipped-element {
15
            width: 400px;
16
            height: 300px;
17
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
18
            clip-path: url(#myClip);
19
        }
20

21
        /* 对比：不裁剪的元素 */
22
        .normal-element {
23
            width: 400px;
24
            height: 300px;
25
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
26
            margin-top: 20px;
27
        }
28
    </style>
29
</head>
30
<body>
31
    <!-- 定义SVG裁剪路径 -->
32
    <svg width="0" height="0">
33
        <defs>
34
            <!-- 复杂形状裁剪路径：波浪形 -->
35
            <clipPath id="myClip">
36
                <path d="M0,50 Q100,0 200,50 T400,50 L400,300 L0,300 Z" />
37
            </clipPath>
38

39
            <!-- 其他裁剪路径示例 -->
40
            <!-- 圆形裁剪 -->
41
            <clipPath id="circleClip">
42
                <circle cx="200" cy="150" r="100" />
43
            </clipPath>
44

45
            <!-- 多边形裁剪（六边形） -->
46
            <clipPath id="hexagonClip">
47
                <polygon points="200,0 400,75 400,225 200,300 0,225 0,75" />
48
            </clipPath>
49

50
            <!-- 文字裁剪 -->
51
            <clipPath id="textClip">
52
                <text x="50" y="150" font-size="60" font-weight="bold">HELLO</text>
53
            </clipPath>
54
        </defs>
55
    </svg>
56

57
    <!-- 使用裁剪路径的元素 -->
58
    <h3>使用SVG裁剪路径的元素（波浪形状）：</h3>
59
    <div class="clipped-element"></div>
60

61
    <h3>对比：不裁剪的元素：</h3>
62
    <div class="normal-element"></div>
63

64
    <!-- 其他裁剪形状示例 -->
65
    <h3>圆形裁剪：</h3>
66
    <div style="width: 400px; height: 300px; background: linear-gradient(45deg, #FF6B6B, #4ECDC4); clip-path: url(#circleClip);"></div>
67

68
    <h3>六边形裁剪：</h3>
69
    <div style="width: 400px; height: 300px; background: linear-gradient(45deg, #45B7D1, #96CEB4); clip-path: url(#hexagonClip);"></div>
70

71
    <h3>文字裁剪：</h3>
72
    <div style="width: 400px; height: 300px; background: url('https://picsum.photos/400/300') center/cover; clip-path: url(#textClip);"></div>
73
</body>
74
</html>

关键要点：

SVG定义：在HTML中定义SVG的<defs>标签，包含各种<clipPath>元素
裁剪路径ID：每个<clipPath>需要一个唯一的ID，如id="myClip"
CSS引用：在CSS中使用clip-path: url(#myClip)引用SVG裁剪路径
复杂形状：SVG裁剪路径可以创建任意复杂的形状，如波浪、多边形、文字等

SVG裁剪路径类型对比：

裁剪类型	SVG元素	适用场景	复杂度
简单形状	`<circle>`、`<rect>`	圆形、矩形裁剪	低
多边形	`<polygon>`	星形、六边形等	中
自定义路径	`<path>`	波浪、复杂曲线	高
文字裁剪	`<text>`	文字形状背景	高

与CSS clip-path对比：

特性	CSS clip-path	SVG clip-path
基础形状	支持（circle、polygon等）	支持
复杂路径	不支持	✓ 支持
文字裁剪	不支持	✓ 支持
动画支持	✓ 支持	✓ 支持
浏览器兼容	较好	略差（IE不支持）

实用技巧：

1
/* 1. 响应式裁剪 */
2
.clipped-responsive {
3
    clip-path: url(#responsiveClip);
4
}
5

6
/* 2. 动画裁剪 */
7
.clipped-animated {
8
    clip-path: url(#animatedClip);
9
    animation: clip-animation 3s infinite;
10
}
11

12
@keyframes clip-animation {
13
    0% { clip-path: url(#clip1); }
14
    50% { clip-path: url(#clip2); }
15
    100% { clip-path: url(#clip1); }
16
}
17

18
/* 3. hover效果 */
19
.clipped-hover {
20
    clip-path: url(#normalClip);
21
    transition: clip-path 0.3s ease;
22
}
23

24
.clipped-hover:hover {
25
    clip-path: url(#hoverClip);
26
}

注意事项：

SVG裁剪路径需要在HTML中定义，不能在CSS中直接创建
裁剪路径的坐标系相对于被裁剪元素的左上角（0,0）
被裁剪的部分会完全隐藏，不显示任何内容
SVG裁剪路径支持动画和过渡效果
浏览器兼容性：IE不支持，Edge12+支持

TDK网站优化标签#

TDK是 Title、Description 和 Keywords 三个元标签的缩写，它们是网站SEO优化的核心元素，直接影响搜索引擎对网页的理解和排名。

标签	作用
Title	决定搜索结果的标题显示，是搜索引擎判断页面主题的首要依据
Description	生成搜索结果的摘要描述，影响用户点击率（CTR）
Keywords	提供页面主题关键词（尽管现代搜索引擎已弱化其权重，仍部分参考）

三者共同构成网页的”第一印象”，优化不当可能导致排名下降或点击流失。

代码示例：

1
<title>vivo智能手机官方网站 - X200s 影像旗舰</title>
2

3
<meta name="keywords" content="vivo, vivo官网, vivo智能手机大全, vivo手机最新报价, vivo手机图片, X200系列, S20系列, X Fold3, vivo Pad5 Pro, vivo WATCH 5, iQOO 13">
4

5
<meta name="description" content="手机领域的国际化品牌，vivo官网提供手机资讯、售前咨询、在线购买、售后服务等功能；vivo当季明星...">

提示：国内几乎每个网站都会有这三大标签，是SEO优化的基础。

图片遮罩 mask-image#

mask-image的核心作用是通过定义一张图片或一个渐变来充当遮罩，从而控制一个元素的可视区域。

语法：

1
.box {
2
mask-image: url('图片URL');
3
/* 或者 */
4
mask-image: linear-gradient(45deg, #FF6B6B, #4ECDC4);
5
}

自定义浏览器滚动条#

浏览器滚动条包含两个部分，轨道和滑块。

1
/* 滚动条设置宽度和高度 */
2
::-webkit-scrollbar {
3
  width: 10px;
4
}
5
/* 设置轨道背景色，圆角等 */
6
::-webkit-scrollbar-track {
7
  background-color: var(--vivo-dark);
8
}
9
/* 设置滑块样式 */
10
::-webkit-scrollbar-thumb {
11
  background: linear-gradient(45deg, var(--vivo-blue), var(--vivo-cyan));
12
  border-radius: 10px;
13
}
14
/* 鼠标经过滑块 */
15
::-webkit-scrollbar-thumb:hover {
16
  background: linear-gradient(45deg, var(--vivo-cyan), var(--vivo-blue));
17
}

有你在的今天