简历模板是前端入门的经典实战项目。本案例基于 Bootstrap 4 构建一份面向求职场景的响应式简历模板，包含个人主页、联系页、相册页三个页面，重点练习栅格系统的列嵌套、卡片组件、表格、折叠面板（Collapse）、徽章（Badge）等组件的综合运用。

一、案例概述

1.1 业务背景

求职者通常需要一份移动端友好的个人简历模板。本案例以”前端开发工程师白鹭”为示例人物，构建一个左右分栏的简历页：左侧固定信息栏（个人照片、联系方式），右侧主内容区（工作经历、专业技能、教育经历、综合概述）。

1.2 涉及知识点

知识点 在本案例中的作用
栅格 .row / .col-* 左右两栏布局、卡片嵌套
卡片 .card 专业技能、缩略图展示
表格 .table 工作经历列表
列表组 .list-group 教育经历、综合概述条目
折叠 .collapse 综合概述的手风琴效果
响应式字体 通过媒体查询调整根字号
固定定位 大屏下左侧信息栏固定

1.3 页面结构

1
2
3
4
5
6
招聘网简历模板
├── 个人主页（index.html）   ← 案例核心
│   ├── 左侧信息栏（个人照片 + 联系方式）
│   └── 右侧主内容（导航 + 工作经历 + 专业技能 + 教育经历 + 综合概述）
├── 联系页（contact.html）   ← 邮件表单
└── 相册页（photo.html）     ← 个人生活照

二、实现步骤拆解

2.1 左侧信息栏

使用 .col-sm-12 .col-md-3 让小屏全宽、桌面 3/12 宽度；通过媒体查询在 ≥768px 时给 .left 设置 position: fixed 实现大屏固定。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!--左侧信息栏-->
<div class="col-sm-12 col-md-3 left">
    <div class="row justify-content-between">
        <div class="col-6 col-sm-5 col-md-12 p-4">
            <img src="http://b-ssl.duitang.com/uploads/item/201410/09/20141009224754_AswrQ.jpeg"
                 alt="userPhoto" class="img-fluid p-2 border">
            <h3 class="text-white text-center">白鹭</h3>
            <h5 class="text-center">求职意向:网站开发</h5>
        </div>
        <div class="col-6 col-sm-5 col-md-12 p-5 p-md-4">
            <h4>出生年月</h4>
            <p>1995年10月10号</p>
            <h4>联系电话</h4>
            <p>12343212345</p>
            <h4>电子邮箱</h4>
            <p>abcd1234@qq.com</p>
            <h4>联系地址</h4>
            <p>北京市朝阳区</p>
        </div>
    </div>
</div>

2.2 导航与工作经历

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!--导航栏-->
<div class="my-4">
    <ul class="clearfix">
        <li class="float-sm-left">
            <i class="fa fa-user-circle-o fa-2x">
                <a href="index.html" class="ml-2">个人履历</a>
            </i>
        </li>
        <li class="float-sm-left mx-sm-5">
            <i class="fa fa-envelope-o fa-2x">
                <a href="contact.html" class="ml-2">请给我发邮件</a>
            </i>
        </li>
        <li class="float-sm-left">
            <i class="fa fa-home fa-2x">
                <a href="photo.html" class="ml-2">照片</a>
            </i>
        </li>
    </ul>
</div>

<!--工作经历-->
<h5 class="color1">工作经历</h5>
<div class="px-5 py-2">
    <table class="table">
        <thead class="table-success">
            <tr>
                <th scope="col">#</th>
                <th scope="col">时间</th>
                <th scope="col">单位</th>
                <th scope="col">职位</th>
            </tr>
        </thead>
        <tbody class="table-info">
            <tr><th>1</th><td>2018/8-2019/10</td><td>八面恒通网络公司</td><td>软件测试工程师</td></tr>
            <tr><th>2</th><td>2019/11-2020/10</td><td>千古网络科技公司</td><td>软件工程师</td></tr>
            <tr><th>3</th><td>2020/12-至今</td><td>冰原网络科技公司</td><td>前端工程师</td></tr>
        </tbody>
    </table>
</div>

2.3 专业技能（卡片嵌套）

通过列嵌套实现”擅长技能”与”熟悉技能”两张并排卡片：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!--专业技能-->
<h5 class="color2">专业技能</h5>
<div class="px-5 py-2">
    <div class="row">
        <div class="col-6">
            <div class="card border-primary text-primary">
                <div class="card-header border-primary">擅长的技能</div>
                <div class="card-body">
                    <p class="card-text">HTML、CSS、JavaScript、jQuery、bootstrap、Vue.js、Angular.js、node.js、PHP、MySQL</p>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="card border-success text-success">
                <div class="card-header border-success">熟悉的技能</div>
                <div class="card-body">
                    <p class="card-text">C语言、C++、C#、Java、Oracle、Python</p>
                </div>
            </div>
        </div>
    </div>
</div>

2.4 教育经历（列表组）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!--教育经历-->
<h5 class="color3">教育经历</h5>
<div class="px-5 py-2">
    <ul class="list-group">
        <li class="list-group-item list-group-item-warning">
            <div class="row">
                <div class="col-4">时间</div>
                <div class="col-4">学校</div>
                <div class="col-4">专业</div>
            </div>
        </li>
        <li class="list-group-item list-group-item-info">
            <div class="row">
                <div class="col-4">2013/6-2017/6</div>
                <div class="col-4">新疆大学</div>
                <div class="col-4">计算机科学与技术</div>
            </div>
        </li>
        <li class="list-group-item list-group-item-info">
            <div class="row">
                <div class="col-4">2017/8-2018/6</div>
                <div class="col-4">软件开发公司</div>
                <div class="col-4">web前端工程师</div>
            </div>
        </li>
    </ul>
</div>

2.5 综合概述（折叠面板）

使用 #accordion 配合 data-parent 实现的”手风琴”效果，每次只展开一个面板：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!--综合概述-->
<h5 class="color4">综合概述</h5>
<div class="px-5 py-2">
    <div id="accordion">
        <div class="card">
            <div class="card-header">
                <a href="#collapseOne" class="card-link" data-toggle="collapse">获得证书</a>
            </div>
            <div id="collapseOne" class="collapse show" data-parent="#accordion">
                <div class="card-body">
                    <ul class="list-group">
                        <li class="list-group-item list-group-item-info">1、英语等级证书：大学四、六级证书（CET4,CET6）。</li>
                        <li class="list-group-item list-group-item-info">2、计算机证书：全国计算机二级及三级和四级。</li>
                        <li class="list-group-item list-group-item-info">3、学校证书包括：奖学金证书、三好学生、优秀毕业生、优秀班干部。</li>
                        <li class="list-group-item list-group-item-info">4、财务类证书：注册会计师。</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <a href="#collapseTwo" class="collapsed card-link" data-toggle="collapse">自我评价</a>
            </div>
            <div id="collapseTwo" class="collapse" data-parent="#accordion">
                <div class="card-body">本人热爱学习，工作态度严谨认真，责任心强，有很好的团队合作能力……</div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <a href="#collapseThree" class="collapsed card-link" data-toggle="collapse">兴趣爱好</a>
            </div>
            <div id="collapseThree" class="collapse" data-parent="#accordion">
                <div class="card-body">
                    <ul class="list-group">
                        <li class="list-group-item list-group-item-info">阅读类：读报、看杂志</li>
                        <li class="list-group-item list-group-item-info">运动类：篮球、足球、乒乓球</li>
                        <li class="list-group-item list-group-item-info">饮食类：西餐、川菜</li>
                        <li class="list-group-item list-group-item-info">音乐类：古典、轻音乐</li>
                        <li class="list-group-item list-group-item-info">服饰类：正式、休闲</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

三、完整代码

3.1 HTML（index.html）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>招聘网中的简历模板</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="style.css">
</head>
<body class="container">
<div class="row">
    <!--左侧信息栏-->
    <div class="col-sm-12 col-md-3 left">
        <div class="row justify-content-between">
            <div class="col-6 col-sm-5 col-md-12 p-4">
                <img src="http://b-ssl.duitang.com/uploads/item/201410/09/20141009224754_AswrQ.jpeg"
                     alt="userPhoto" class="img-fluid p-2 border">
                <h3 class="text-white text-center">白鹭</h3>
                <h5 class="text-center">求职意向:网站开发</h5>
            </div>
            <div class="col-6 col-sm-5 col-md-12 p-5 p-md-4">
                <h4>出生年月</h4><p>1995年10月10号</p>
                <h4>联系电话</h4><p>12343212345</p>
                <h4>电子邮箱</h4><p>abcd1234@qq.com</p>
                <h4>联系地址</h4><p>北京市朝阳区</p>
            </div>
        </div>
    </div>
    <!--右侧主体内容-->
    <div class="col-sm-12 col-md-9 right p-0">
        <!--导航栏-->
        <div class="my-4">
            <ul class="clearfix">
                <li class="float-sm-left">
                    <i class="fa fa-user-circle-o fa-2x"><a href="index.html" class="ml-2">个人履历</a></i>
                </li>
                <li class="float-sm-left mx-sm-5">
                    <i class="fa fa-envelope-o fa-2x"><a href="contact.html" class="ml-2">请给我发邮件</a></i>
                </li>
                <li class="float-sm-left">
                    <i class="fa fa-home fa-2x"><a href="photo.html" class="ml-2">照片</a></i>
                </li>
            </ul>
        </div>
        <!--工作经历-->
        <h5 class="color1">工作经历</h5>
        <div class="px-5 py-2">
            <table class="table">
                <thead class="table-success">
                    <tr><th>#</th><th>时间</th><th>单位</th><th>职位</th></tr>
                </thead>
                <tbody class="table-info">
                    <tr><th>1</th><td>2018/8-2019/10</td><td>八面恒通网络公司</td><td>软件测试工程师</td></tr>
                    <tr><th>2</th><td>2019/11-2020/10</td><td>千古网络科技公司</td><td>软件工程师</td></tr>
                    <tr><th>3</th><td>2020/12-至今</td><td>冰原网络科技公司</td><td>前端工程师</td></tr>
                </tbody>
            </table>
        </div>
        <!--专业技能-->
        <h5 class="color2">专业技能</h5>
        <div class="px-5 py-2">
            <div class="row">
                <div class="col-6">
                    <div class="card border-primary text-primary">
                        <div class="card-header border-primary">擅长的技能</div>
                        <div class="card-body"><p class="card-text">HTML、CSS、JavaScript、jQuery、bootstrap、Vue.js、Angular.js、node.js、PHP、MySQL</p></div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="card border-success text-success">
                        <div class="card-header border-success">熟悉的技能</div>
                        <div class="card-body"><p class="card-text">C语言、C++、C#、Java、Oracle、Python</p></div>
                    </div>
                </div>
            </div>
        </div>
        <!--教育经历-->
        <h5 class="color3">教育经历</h5>
        <div class="px-5 py-2">
            <ul class="list-group">
                <li class="list-group-item list-group-item-warning">
                    <div class="row"><div class="col-4">时间</div><div class="col-4">学校</div><div class="col-4">专业</div></div>
                </li>
                <li class="list-group-item list-group-item-info">
                    <div class="row"><div class="col-4">2013/6-2017/6</div><div class="col-4">新疆大学</div><div class="col-4">计算机科学与技术</div></div>
                </li>
                <li class="list-group-item list-group-item-info">
                    <div class="row"><div class="col-4">2017/8-2018/6</div><div class="col-4">软件开发公司</div><div class="col-4">web前端工程师</div></div>
                </li>
            </ul>
        </div>
        <!--综合概述-->
        <h5 class="color4">综合概述</h5>
        <div class="px-5 py-2">
            <div id="accordion">
                <div class="card">
                    <div class="card-header"><a href="#collapseOne" class="card-link" data-toggle="collapse">获得证书</a></div>
                    <div id="collapseOne" class="collapse show" data-parent="#accordion">
                        <div class="card-body">
                            <ul class="list-group">
                                <li class="list-group-item list-group-item-info">1、英语等级证书：大学四、六级证书（CET4,CET6）。</li>
                                <li class="list-group-item list-group-item-info">2、计算机证书：全国计算机二级及三级和四级。</li>
                                <li class="list-group-item list-group-item-info">3、学校证书：奖学金证书、三好学生、优秀毕业生、优秀班干部。</li>
                                <li class="list-group-item list-group-item-info">4、财务类证书：注册会计师。</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header"><a href="#collapseTwo" class="collapsed card-link" data-toggle="collapse">自我评价</a></div>
                    <div id="collapseTwo" class="collapse" data-parent="#accordion">
                        <div class="card-body">本人热爱学习，工作态度严谨认真，责任心强，有很好的团队合作能力……</div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header"><a href="#collapseThree" class="collapsed card-link" data-toggle="collapse">兴趣爱好</a></div>
                    <div id="collapseThree" class="collapse" data-parent="#accordion">
                        <div class="card-body">
                            <ul class="list-group">
                                <li class="list-group-item list-group-item-info">阅读类：读报、看杂志</li>
                                <li class="list-group-item list-group-item-info">运动类：篮球、足球、乒乓球</li>
                                <li class="list-group-item list-group-item-info">饮食类：西餐、川菜</li>
                                <li class="list-group-item list-group-item-info">音乐类：古典、轻音乐</li>
                                <li class="list-group-item list-group-item-info">服饰类：正式、休闲</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>

3.2 CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
html{ min-width: 400px; }
.left{ background: #4BCFE9; top: 0; }
.right{ margin-bottom: 120px; }

@media (max-width: 768px){ html{ font-size: 14px; } }
@media (min-width: 768px){
    html{ font-size: 15px; }
    .left{ position: fixed; bottom: 0; left: 0; }
    .right{ margin-left: 25%; }
}

ul{ list-style: none; }
i{ color: #6ecadc; }

.color1{ background: #00aa88; width: 110px; border-radius: 5px; text-align: center; }
.color2{ background: #2f6f9f; width: 110px; border-radius: 5px; text-align: center; }
.color3{ background: #5bc0de; width: 110px; border-radius: 5px; text-align: center; }
.color4{ background: #6f42c1; width: 110px; border-radius: 5px; text-align: center; }

四、关键技术解析

4.1 大屏固定 + 小屏堆叠

通过 .col-sm-12 .col-md-3 控制列宽断点，再配合媒体查询切换 position: fixed。这是”PC 端侧边固定、移动端上下排版”的经典写法。

4.2 手风琴折叠

关键属性是 data-parent="#accordion"，它会让同一父容器内的折叠面板互斥——展开一个时其他会自动收起。如果去掉 data-parent，则每个面板可以独立展开。

4.3 响应式根字号

利用 html { font-size } 作为 rem 单位基准，再通过媒体查询分级，可以让所有依赖 rem 的元素（标题、按钮等）整体按比例缩放，比逐个调字号更省心。

4.4 联系页与相册页扩展

  • 联系页 在右侧增加 form-group 邮件表单（姓名、邮箱、留言）。
  • 相册页 使用 card-columns 实现瀑布流式图片墙，每张卡片有不同 bg-* 背景色。

五、小结

本案例把栅格、卡片、表格、列表组、折叠等组件串成一个完整业务场景，相比单个组件的 demo 更贴近真实项目。建议读者按以下顺序练习：

  1. 先完成左右分栏与导航。
  2. 再分别填充工作经历、专业技能、教育经历三个模块。
  3. 最后挑战综合概述的手风琴与联系页表单。