为什么选择 Bootstrap 制作简历？

  1. 响应式设计：这是最大的优点，一份用 Bootstrap 制作的简历，在电脑、平板和手机上都能完美显示，HR 在手机上查看你的简历时,格式不会错乱。
  2. 美观专业：Bootstrap 提供了一套经过精心设计的 CSS 样式，让你的简历看起来非常整洁、专业,即使你没有设计背景。
  3. 快速开发：你不需要从零开始写 CSS，Bootstrap 的组件（如网格系统、卡片、按钮等）可以直接使用,大大节省了时间。
  4. 跨浏览器兼容：Bootstrap 处理了不同浏览器之间的兼容性问题，你无需担心在 Chrome、Firefox、Safari 上显示不一致。

Bootstrap 简历模板（可直接使用）

这是一个基于 Bootstrap 5 的现代化简历模板，它包含了简历的核心部分：个人信息、教育背景、工作经验、项目经历和技能。

bootstrap 简历模板
（图片来源网络，侵删）

如何使用这个模板？

  1. 准备工作：

    • 创建一个新文件夹，my-resume。
    • 在文件夹中创建一个 index.html 文件。
    • 下载 Bootstrap 5 的 CSS 和 JS 文件，或者直接使用 CDN（推荐，最简单）。

  2. 复制代码：

    • 将下面的完整代码复制并粘贴到你的 index.html 文件中。
    • 重要：如果你使用 CDN，确保网络连接正常,因为样式和脚本都是从网络加载的。

完整代码 (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">张三 - 个人简历</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons (可选，用于添加图标) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
    <style>
        /* 自定义样式 */
        body {
            font-family: "Microsoft YaHei", "Segoe UI", sans-serif;
            background-color: #f8f9fa;
            color: #333;
        }
        .resume-container {
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            padding: 2rem;
            margin: 2rem auto;
            max-width: 900px;
        }
        .profile-img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 5px solid #fff;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .section-title {
            border-bottom: 2px solid #007bff;
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
            color: #007bff;
        }
        .timeline-item {
            position: relative;
            padding-left: 2rem;
            margin-bottom: 1.5rem;
        }
        .timeline-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.5rem;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #007bff;
        }
        .timeline-item::after {
            content: '';
            position: absolute;
            left: 5px;
            top: 1.5rem;
            width: 2px;
            height: calc(100% + 0.5rem);
            background-color: #dee2e6;
        }
        .timeline-item:last-child::after {
            display: none;
        }
        .skill-bar {
            height: 10px;
            background-color: #e9ecef;
            border-radius: 5px;
            margin-top: 0.5rem;
        }
        .skill-progress {
            height: 100%;
            background-color: #007bff;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container resume-container">
        <!-- 1. 个人信息部分 -->
        <header class="text-center mb-5">
            <img src="https://via.placeholder.com/150" alt="个人头像" class="profile-img mb-3">
            <h1 class="display-5 fw-bold">张三</h1>
            <p class="lead text-muted">全栈软件工程师</p>
            <div class="d-flex justify-content-center gap-3 mt-3">
                <a href="mailto:zhangsan@example.com" class="text-decoration-none">
                    <i class="bi bi-envelope-fill"></i> zhangsan@example.com
                </a>
                <a href="tel:+8613800138000" class="text-decoration-none">
                    <i class="bi bi-telephone-fill"></i> 138-0013-8000
                </a>
                <a href="https://github.com/zhangsan" class="text-decoration-none" target="_blank">
                    <i class="bi bi-github"></i> github.com/zhangsan
                </a>
            </div>
        </header>
        <div class="row">
            <!-- 左侧栏：工作经验和项目 -->
            <div class="col-lg-8">
                <!-- 2. 工作经验 -->
                <section class="mb-5">
                    <h2 class="section-title h4">
                        <i class="bi bi-briefcase-fill"></i> 工作经验
                    </h2>
                    <div class="timeline-item">
                        <h5>高级前端工程师</h5>
                        <h6 class="text-muted">ABC科技有限公司 | 2025年7月 - 至今</h6>
                        <ul>
                            <li>负责公司核心产品 Web 端的前端架构设计与开发，使用 React 和 TypeScript。</li>
                            <li>优化前端性能，将页面加载时间减少了 40%，提升了用户体验。</li>
                            <li>与后端团队协作，定义 API 接口，确保数据交互的顺畅。</li>
                        </ul>
                    </div>
                    <div class="timeline-item">
                        <h5>初级前端工程师</h5>
                        <h6 class="text-muted">XYZ创新公司 | 2025年7月 - 2025年6月</h6>
                        <ul>
                            <li>参与公司官网和多个内部管理系统的开发与维护。</li>
                            <li>使用 Vue.js 和 Bootstrap 快速构建响应式页面。</li>
                            <li>编写单元测试，保证代码质量和项目稳定性。</li>
                        </ul>
                    </div>
                </section>
                <!-- 3. 项目经历 -->
                <section class="mb-5">
                    <h2 class="section-title h4">
                        <i class="bi bi-code-slash"></i> 项目经历
                    </h2>
                    <div class="timeline-item">
                        <h5>在线协作白板平台</h5>
                        <h6 class="text-muted>2025年3月 - 2025年1月</h6>
                        <p>一个支持多人实时在线协作的绘图和笔记工具。</p>
                        <p><strong>技术栈：</strong> React, Node.js, Socket.io, MongoDB</p>
                        <p><strong>职责：</strong> 担任前端负责人，设计了核心绘图组件和实时同步逻辑。</p>
                    </div>
                </section>
            </div>
            <!-- 右侧栏：教育背景、技能等 -->
            <div class="col-lg-4">
                <!-- 4. 技能 -->
                <section class="mb-5">
                    <h2 class="section-title h4">
                        <i class="bi bi-tools"></i> 专业技能
                    </h2>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between">
                            <span>HTML / CSS / JavaScript</span>
                            <span>精通</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 95%;"></div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between">
                            <span>React / Vue.js</span>
                            <span>熟练</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 90%;"></div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between">
                            <span>Node.js / Express</span>
                            <span>了解</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 70%;"></div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between">
                            <span>Git / Webpack</span>
                            <span>熟练</span>
                        </div>
                        <div class="skill-bar">
                            <div class="skill-progress" style="width: 85%;"></div>
                        </div>
                    </div>
                </section>
                <!-- 5. 教育背景 -->
                <section class="mb-5">
                    <h2 class="section-title h4">
                        <i class="bi bi-mortarboard-fill"></i> 教育背景
                    </h2>
                    <div class="timeline-item">
                        <h5>计算机科学与技术 学士学位</h5>
                        <h6 class="text-muted">XX大学 | 2025年9月 - 2025年6月</h6>
                        <p>主修课程：数据结构、算法、计算机网络、操作系统</p>
                    </div>
                </section>
                <!-- 6. 自我评价 (可选) -->
                <section class="mb-5">
                    <h2 class="section-title h4">
                        <i class="bi bi-person-circle"></i> 自我评价
                    </h2>
                    <p>
                        拥有5年前端开发经验，对技术充满热情，具备良好的问题分析和解决能力。
                        热爱学习，善于团队协作，能够快速适应新技术和新环境。
                    </p>
                </section>
            </div>
        </div>
    </div>
    <!-- Bootstrap 5 JS (Popper.js is included) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

如何修改和个性化你的简历？

上面的模板是一个完美的起点，现在你需要把它变成你自己的,以下是详细的修改指南：

修改个人信息

  • <title>：将 张三 - 个人简历 改成你的名字和职位，李四 - 产品经理简历。
  • 头像 (<img>：
    • 将 src="https://via.placeholder.com/150" 替换为你自己头像图片的 URL 或本地路径。
    • 建议：使用一张专业、清晰的证件照或职业照，图片尺寸建议为正方形（如 400x400px）。
  • 姓名 (<h1>)：将 张三 改成你的名字。
  • 职位 (<p class="lead">)：将 全栈软件工程师 改成你的目标职位。
  • 联系方式：
    • 修改邮箱、电话和 GitHub 的链接和显示文字。
    • 注意：邮箱地址建议使用 Gmail、Outlook 等专业邮箱，避免使用 QQ 等娱乐性邮箱。

填充工作经验

  • 在 <section class="mb-5"> (工作经验) 部分，复制 <div class="timeline-item"> 整个块来添加新的工作经历。
  • <h5>：职位名称，产品经理。
  • <h6>：公司名称和工作时间，腾讯科技 | 2025年3月 - 至今。
  • <ul>：使用无序列表来描述你的工作职责和成就。
    • 技巧：使用行为动词开头，如“负责”、“主导”、“优化”、“提升”、“设计”等。
    • 量化成果：尽可能用数字说话，将用户留存率提升了 15%”，“管理一个 10 人的团队”等。

更新项目经历

  • 同样，复制 <div class="timeline-item"> 来添加新项目。
  • <h5>：项目名称。
  • <h6>：项目时间。
  • <p>：项目简介,用一两句话说清楚这个项目是做什么的。
  • <p><strong>技术栈：</strong>...</p>：列出你在项目中使用的关键技术。
  • <p><strong>职责：</strong>...</p>：描述你在项目中的具体角色和贡献。

调整技能部分

  • 技能名称：修改 HTML / CSS / JavaScript 等为你的真实技能。
  • 熟练度：修改 精通、熟练、了解。
  • 进度条宽度：修改 <div class="skill-progress" style="width: 95%;"> 中的 width 百分比，使其与你的熟练度相匹配。95% 对应 精通，85% 对应 熟练，70% 对应 了解。

修改教育背景

  • <h5>：学位和专业，工商管理硕士。
  • <h6>：学校名称和时间。
  • <p>：主修课程或在校荣誉。

自我评价

  • 在 <section class="mb-5"> (自我评价) 部分写下你的个人总结。
  • 内容建议：总结你的核心优势、工作经验亮点、职业性格（如积极主动、有责任心）和职业规划。

自定义样式（可选）

  • 如果你想改变颜色、字体等，可以修改 <style> 块中的 CSS。
    • 主色调：找到 #007bff (Bootstrap 的默认蓝色)，替换成你喜欢的颜色代码（如 #28a745 绿色，#dc3545 红色）。
    • 字体：在 body 的 font-family 属性中添加更多中文字体，如 "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif。

最后的步骤

  1. 保存文件：确保所有修改都已保存。
  2. 预览：用浏览器打开 index.html 文件，仔细检查所有内容是否正确显示,格式是否美观。
  3. 导出为 PDF：
    • 方法一（推荐）：在浏览器中按下 Ctrl+P (Windows) 或 Cmd+P (Mac)，选择“打印”，然后在目标打印机中选择“另存为 PDF”或“Microsoft Print to PDF”。
    • 方法二：使用专门的在线 HTML 转 PDF 工具，如 print-friendly.com 或 pdfcrowd.com,它们通常能更好地保留样式。
  4. 投递：将生成的 PDF 简历文件用于求职。

这份 Bootstrap 简历模板既专业又灵活，希望它能帮助你打造一份令人印象深刻的简历！祝你求职顺利！

bootstrap 简历模板
（图片来源网络，侵删）
bootstrap 简历模板
（图片来源网络，侵删）