使用Bootsrap写个人简历网页
时间: 2023-05-24 09:02:38 浏览: 999
A:
以下是一个简单的个人简历网页的Bootstrap代码示例,可以根据自己的需要进行修改和调整:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>个人简历</title>
<!-- 引入Bootstrap框架 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- 头部 -->
<div class="jumbotron">
<h1 class="display-4 text-center">个人简历</h1>
</div>
<!-- 个人信息 -->
<div class="row">
<div class="col-md-3">
<img src="https://via.placeholder.com/150" alt="头像" class="img-fluid rounded-circle">
</div>
<div class="col-md-9">
<h2>姓名</h2>
<p>性别:男</p>
<p>年龄:28</p>
<p>电话:18888888888</p>
<p>邮箱:example@example.com</p>
<p>地址:XXXXXXX</p>
</div>
</div>
<!-- 教育背景 -->
<div class="my-5">
<h2>教育背景</h2>
<div class="card">
<div class="card-header">
<h3>大学本科</h3>
<p>XXXX年 - XXXX年</p>
</div>
<div class="card-body">
<h4>XXXX学院</h4>
<p>专业:XXXX</p>
<p>学历:本科</p>
</div>
</div>
</div>
<!-- 工作经历 -->
<div class="my-5">
<h2>工作经历</h2>
<div class="card">
<div class="card-header">
<h3>公司A</h3>
<p>XXXX年 - XXXX年</p>
</div>
<div class="card-body">
<h4>职位:XXXX</h4>
<p>工作内容:XXXXX</p>
</div>
</div>
<div class="card my-3">
<div class="card-header">
<h3>公司B</h3>
<p>XXXX年 - XXXX年</p>
</div>
<div class="card-body">
<h4>职位:XXXX</h4>
<p>工作内容:XXXXX</p>
</div>
</div>
</div>
<!-- 技能专长 -->
<div class="my-5">
<h2>技能专长</h2>
<ul>
<li>技能1</li>
<li>技能2</li>
<li>技能3</li>
<li>技能4</li>
</ul>
</div>
<!-- 联系方式 -->
<div class="my-5">
<h2>联系方式</h2>
<p>电话:18888888888</p>
<p>邮箱:example@example.com</p>
<p>地址:XXXXXXX</p>
</div>
</div>
</body>
</html>
```
在这个代码示例中,我们利用Bootstrap的栅格系统来实现了网页的排版布局,用了许多Bootstrap内置的样式组件,如卡片、列表、Jumbotron等。通过调整这些组件的参数、增加或减少内容区块,就可以实现不同风格的个人简历网页了。
阅读全文