后端开发教程 - Java、Spring Boot 实战 - msg200.com
使用 Bootstrap 5 开发单页 HTML 简历
在本教程中，我们将使用 Bootstrap 5 构建 HTML 简历。
最终成品如下：
让我们首先将 Bootstrap 加载到 HTML 文件中，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Resume</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
</head>
<body>
</body>
</html>
接下来，我们将为<header>包含两列布局的个人资料图片和文本概述的部分添加标记：
<header class="bg-primary bg-gradient text-white py-5">
<div class="container">
<div class="row">
<div class="col-md-3 text-left text-md-center mb-3">
<img class="rounded-circle img-fluid" src="https://i.pravatar.cc/175?img=32" alt="Profile Photo" />
</div>
<div class="col-md-9">
<h1>Laura Collins</h1>
<h5>Freelance Web Developer</h5>
<p class="border-top pt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed odio lacus, sollicitudin in dolor at, consequat volutpat ante. Integer quis consequat turpis, quis porta orci. Proin tincidunt volutpat faucibus. Suspendisse ac nisl purus suspendisse eleifend interdum orci non pharetra. </p>
</div>
</div>
</div>
</header>
bg-primary bg-gradient– 使用 Bootstrap 主色蓝色的渐变背景颜色。Bootstrap 中所有颜色选项的列表可在此处找到。py-5– 设置 y 轴（顶部和底部）的填充。Bootstrap 中的填充和边距均可应用于特定边、轴或整个周围。大小值介于 0（无填充/边距）和 5（相当于）之间3rem。containerBootstrap 中的容器类限制了内容的宽度。我们在容器内部添加了一个容器，<header>这样背景颜色将占据整个宽度，而内容将包含在容器内。col-md-3 & col-md-9Bootstrap 使用 12 列网格系统，这里我们将网格分为两列。在中型及大型设备（≥768px）上，一列占 3 列，另一列占 9 列。在小型设备上，每列将变为全宽并堆叠在一起。text-left text-md-center– 在小于中等断点（768px）的设备上，此对齐方式将配置文件图像放在左侧，而在较大的设备上则放在中心。rounded-circle– 使方形的个人资料照片呈现圆润的外观。
在标题下方，我们将添加一个<nav>包含电子邮件、网站和电话号码链接的部分。
Bootstrap 现在包含其自定义 SVG 图标库，可在此处找到。点击您想要使用的图标并复制提供的代码。默认情况下，图标的宽度和高度为 1em，但已将其增加到 1em，1.5em以便它们看起来略大一些：
<nav class="bg-dark text-white-50 mb-5">
<div class="container">
<div class="row p-3">
<div class="col-md pb-2 pb-md-0">
<svg width="1em" height="1.5em" viewBox="0 0 16 16" class="bi bi-envelope" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383l-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z"/>
</svg>
<a href="#" class="text-white ml-2">lcollins@email.com</a>
</div>
<div class="col-md text-md-center pb-2 pb-md-0">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-globe" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4H2.255a7.025 7.025 0 0 1 3.072-2.472 6.7 6.7 0 0 0-.597.933c-.247.464-.462.98-.64 1.539zm-.582 3.5h-2.49c.062-.89.291-1.733.656-2.5H3.82a13.652 13.652 0 0 0-.312 2.5zM4.847 5H7.5v2.5H4.51A12.5 12.5 0 0 1 4.846 5zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5H7.5V11H4.847a12.5 12.5 0 0 1-.338-2.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12H7.5v2.923c-.67-.204-1.335-.82-1.887-1.855A7.97 7.97 0 0 1 5.145 12zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11H1.674a6.958 6.958 0 0 1-.656-2.5h2.49c.03.877.138 1.718.312 2.5zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12h2.355a7.967 7.967 0 0 1-.468 1.068c-.552 1.035-1.218 1.65-1.887 1.855V12zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5h-2.49A13.65 13.65 0 0 0 12.18 5h2.146c.365.767.594 1.61.656 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4H8.5V1.077c.67.204 1.335.82 1.887 1.855.173.324.33.682.468 1.068z"/>
</svg>
<a href="#" class="text-white ml-2">www.lauracollins.com</a>
</div>
<div class="col-md text-md-right">
<svg width="1.5em" height="1.5em" viewBox="0 0 16 16" class="bi bi-telephone-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2.267.98a1.636 1.636 0 0 1 2.448.152l1.681 2.162c.309.396.418.913.296 1.4l-.513 2.053a.636.636 0 0 0 .167.604L8.65 9.654a.636.636 0 0 0 .604.167l2.052-.513a1.636 1.636 0 0 1 1.401.296l2.162 1.681c.777.604.849 1.753.153 2.448l-.97.97c-.693.693-1.73.998-2.697.658a17.47 17.47 0 0 1-6.571-4.144A17.47 17.47 0 0 1 .639 4.646c-.34-.967-.035-2.004.658-2.698l.97-.969z"/>
</svg>
<a href="#" class="text-white ml-2">+12 3456 7890</a>
</div>
</div>
</div>
</nav>
text-white-50– 将图标的不透明度设置为 50%。col-md– 之前我们手动设置了列宽，因为此行包含三列，所以无需设置大小。如果添加了更多列，大小将相应调整。pb-2 pb-md-0– 由于列将堆叠在小型设备上，我们在每个锚标签的底部添加了一些填充，然后在中型和大型设备上删除了这些填充。text-md-center text-md-right– 我们希望在小型设备上列堆叠时文本左对齐，在大型设备上文本居中/右对齐。
简历的主要内容部分将包含 2 个大小均匀的列和 2 行。让我们添加此布局的标记，然后我们可以填充每个单独的部分：
<main class="container">
<div class="row">
<div class="col-md mb-5">
<!-- work experience -->
</div>
<div class="col-md mb-5">
<!-- education -->
</div>
</div>
<div class="row">
<div class="col-md mb-5">
<!-- skills -->
</div>
<div class="col-md">
<!-- recent work -->
</div>
</div>
</main>
“工作经历”部分包含一个简单的无序列表。Bootstrap 只使用了主标题的边距和子标题的文本颜色：
<h2 class="mb-5">Work Experience</h2>
<ul>
<li>
<h6 class="text-primary">Senior Web Developer / Digital Agency 2016-2020</h6>
<p>Phasellus et tellus iaculis, interdum augue vel, luctus nulla. Aenean viverra, magna a ultricies elementum, dui mi tristique ligula, non euismod leo mauris ac metus.</p>
</li>
<li>
<h6 class="text-primary">Web Developer / Big Firm 2010-2015</h6>
<p>Mauris volutpat, ex condimentum fringilla imperdiet, nulla turpis semper diam, ac semper risus urna quis libero. Fusce non nunc quam. Ut vulputate, magna eget molestie luctus, elit est posuere lorem, quis dapibus dolor felis id mi.</p>
</li>
<li>
<h6 class="text-primary">Junior Web Developer / Websites 'R' Us 2004-2009</h6>
<p>Sed eu turpis placerat, posuere odio a, viverra velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</li>
</ul>
在“教育背景”部分，我们将使用与“工作经验”部分相同的 HTML 标记。由于这两个部分位于同一行，因此下面的内容将保持在同一行，而不会占用“教育背景”列内容减少而留下的空间：
<h2 class="mb-5">Education</h2>
<ul>
<li>
<h6 class="text-primary">Computer Science / University Name 2001-2004</h6>
<p>Sed et ornare quam. Cras scelerisque ex ultricies neque sodales tristique. Phasellus mattis dui ut enim tincidunt auctor. Maecenas euismod, orci eget varius elementum, nunc massa dignissim sapien, ac sagittis libero dolor vitae elit.</p>
</li>
<li>
<h6 class="text-primary">Testville High School 1994-2000</h6>
<p>Aenean nisl enim, dictum in odio ut, suscipit efficitur diam. Nam nec velit a odio porta efficitur nec at magna.</p>
</li>
</ul>
在“技能”部分，我们将使用 Bootstrap 的进度条来直观地表示每项特定技能的知识水平：
<h2 class="mb-5">Skills</h2>
<div class="progress mb-4" style="height:25px;">
<div class="progress-bar bg-primary text-left pl-2" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">HTML</div>
</div>
<div class="progress mb-4" style="height:25px;">
<div class="progress-bar bg-primary text-left pl-2" role="progressbar" style="width: 89%" aria-valuenow="89" aria-valuemin="0" aria-valuemax="100">CSS</div>
</div>
<div class="progress mb-4" style="height:25px;">
<div class="progress-bar bg-primary text-left pl-2" role="progressbar" style="width: 87%" aria-valuenow="87" aria-valuemin="0" aria-valuemax="100">JavaScript</div>
</div>
<div class="progress mb-4" style="height:25px;">
<div class="progress-bar bg-primary text-left pl-2" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">WordPress</div>
</div>
<div class="progress mb-4" style="height:25px;">
<div class="progress-bar bg-primary text-left pl-2" role="progressbar" style="width: 78%" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100">Photoshop</div>
</div>
<div class="progress mb-4" style="height:25px;">
<div class="progress-bar bg-primary text-left pl-2" role="progressbar" style="width: 77%" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100">PHP</div>
</div>
<div class="progress mb-4" style="height:25px;">
<div class="progress-bar bg-primary text-left pl-2" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">Linux</div>
</div>
<div class="progress mb-4" style="height:25px;">
<div class="progress-bar bg-primary text-left pl-2" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100">SEO</div>
</div>
默认情况下，进度条元素中的文本居中对齐，这在本例中看起来不太美观。因此，我们为文本添加了text-left pl-2一些填充，使其左对齐，避免文本紧贴边缘。
在“近期作品”部分，我们将展示 4 张网站截图。本部分唯一新用到的 Bootstrap 代码是，img-thumnail它对图片的边角进行了轻微的圆润处理，增加了一些内边距，并添加了浅灰色边框：
<h2 class="mb-5">Recent Work</h2>
<div class="row">
<div class="col-md mb-3">
<a href="#">
<img class="img-fluid img-thumbnail" src="screenshot.png">
</a>
</div>
<div class="col-md mb-3">
<a href="#">
<img class="img-fluid img-thumbnail" src="screenshot.png">
</a>
</div>
</div>
<div class="row">
<div class="col-md mb-3">
<a href="#">
<img class="img-fluid img-thumbnail" src="screenshot.png">
</a>
</div>
<div class="col-md mb-3">
<a href="#">
<img class="img-fluid img-thumbnail" src="screenshot.png">
</a>
</div>
</div>
<footer>让我们通过添加一些社交链接来完成页面：
<footer class="bg-dark text-white-50 text-center mt-5 p-3">
© 2020 Laura Collins - <a href="#" class="text-white-50">GitHub</a> | <a href="#" class="text-white-50">LinkedIn</a> | <a href="#" class="text-white-50">Twitter</a>
</footer>