⽤Bootstrap写⼀份简历以前学习Bootstrap时练⼿⽤的。分享给⼤家。
注意Bootstrap相关⽂件的路径，Bootstrap依赖jQuery，需要先加载jQuery
Github代码链接： (如果有点⼩⽤，求个⼩star(｡·ˇ‸ˇ·｡))
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="cdn.bootcss/jquery/3.3.1/jquery.min.js"></script>
<script src="../bs/js/bootstrap.min.js"></script>
<link href="../bs/css/bootstrap.css" rel="stylesheet">
<link href="../bs/css/mystyle.css" rel="stylesheet">
<link href="../bs/css/mystyle.css" rel="stylesheet">
<title>个⼈简历</title>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#leadBar" aria-expanded="false" aria-controls="navbar"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="leadBar">
<ul class="navbar nav navbar-nav">
<li><a href="site.html" class="glyphicon glyphicon-home"></a></li>
<li><a href="#info">基本信息</a></li>
<li><a href="">职业技能</a></li>
<li><a href="">项⽬展⽰</a></li>
<li><a href="">请联系我</a></li>
</ul>
</div>
</div>
</nav>
<div class="page-header">
<h1>个⼈简历</h1>
</div>
<div class="divContent container">
<div class="row">
<h2 class="lead">基本信息</h2>
<div class="col-sm-3">
<blockquote>
<h2>某某</h2>
<footer>XX⼯程师</footer>
</blockquote>
<div class="row text-center">
<img src="./img/zmz.jpg" alt="boy" width="150px" class="img-responsive img-circle img-thumbnail">
</div>
<div class="row text-center">
<h3>个⼈介绍</h3>
</div>
<div class="row">
<span>滴滴答答滴滴答答滴滴答答滴滴答
答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答</span>
</div>
<div class="table-responsive">
<table class="table table-bordered table-striped table-hover table-condensed">
<tr>
<td>姓名</td>
<td>YYY</td>
<td>年龄</td>
<td>18</td>
</tr>
<tr>
<td>学校</td>
<td>XX⼤学</td>
<td>学历</td>
<td>本科</td>
</tr>
<tr>
<td>专业</td>
<td>软件⼯程</td>
<td>学制</td>
<td>全⽇制</td>
</tr>
</table>
</table>
</div>
</div>
<div class="col-sm-9">
<!-- ⼤屏幕 -->
<div class="jumbotron">
<h2>个⼈荣誉</h2>
<hr>
<p2>获得******************************************</p2>
<h2>我的空间</h2>
<hr>
<div class="row">
<div class="col-sm-3">
<a href=""><button class="btn-primary">个⼈博客</button></a>
</div>
<div class="col-sm-3">
<a href=""><button class="btn-primary">个⼈博客园</button></a>
</div>
<div class="col-sm-3">
<a href=""><button class="btn-primary">我的github</button></a>
</div>
</div>
<h2>个⼈技能</h2>
<hr>
<p>1.***************</p>
<p>2.***************</p>
<p>3.***************</p>
<p>4.***************</p>
<p>5.***************</p>
</div>
</div>
</div>
<div class="row">
<h2 id="skill" class="lead">职业技能</h2>
<p>
<span class="label label-success">JavaScript</span>
<span class="label label-success">Vue.js</span>
<!-- <span class="label label-success">ssh</span> -->
</p>
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" > <span>熟悉</span>
</div>
</div>
<p>
<span class="label label-success">Node.js</span>
<span class="label label-success">PHP</span>
<!-- <span class="label label-success">ssh</span> -->
</p>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped active" > <span>熟悉</span>
</div>
</div>
<p>
<span class="label label-info">html/css</span>
</p>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped active" >
<span>熟悉</span>
</div>
</div>
<p>
<p>
<span class="label label-warning">数据结构/算法</span>
</p>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped active" >
<span>熟悉</span>
</div>
</div>
</div>
<div class="row">
<h2 class="lead">项⽬展⽰</h2>
<div class="col-sm-7">
<div id="" class="myCarousel carousel slide">
<ol class="carousel-indicators">
<li data-target=".myCarousel" data-slide-to="0" class="active"></li>
<li data-target=".myCarousel" data-slide-to="1"></li>
<li data-target=".myCarousel" data-slide-to="2"></li>
<li data-target=".myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="./img/img1.jpg" alt="第⼀张" class="img-responsive"> <div class="carousel-caption">项⽬ 1</div>
</div>
<div class="item">
<img src="./img/img2.jpg" alt="第⼆张" class="img-responsive"> <div class="carousel-caption">项⽬ 2</div>
</div>
<div class="item">
<img src="./img/img3.jpg" alt="第三张" class="img-responsive"> <div class="carousel-caption">项⽬ 3</div>
</div>
<div class="item">
<img src="./img/img4.jpg" alt="第四张" class="img-responsive"> <div class="carousel-caption">项⽬ 4</div>
</div>
<!--左右翻页-->
<a href=".myCarousel" data-slide="prev" class="carousel-control left">
<span class="glyphicon glyphicon-chevron-left"/>
</a>
<a href=".myCarousel" data-slide="next" class="carousel-control right">
<span class="glyphicon glyphicon-chevron-right"/>
</a>
</div>
</div>
</div>
<div class="col-sm-5">
<div id="" class="myCarousel carousel slide">
<ol class="carousel-indicators">
<li data-target=".myCarousel" data-slide-to="0" class="active"></li>
<li data-target=".myCarousel" data-slide-to="1"></li>
<li data-target=".myCarousel" data-slide-to="2"></li>
<li data-target=".myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
bootstrap项目
<div class="item active">
<p>项⽬说明</p>
<p>项⽬说明</p>
<p>项⽬说明</p>
<p>项⽬说明</p>
<p>项⽬说明</p>
<div class="carousel-caption">项⽬ 1</div>
</div>
<div class="item">
<p>项⽬说明</p>
<p>项⽬说明</p>
<p>项⽬说明</p>
<p>项⽬说明</p>
<p>项⽬说明</p>
<div class="carousel-caption">项⽬ 2</div>
</div>
<div class="item">
<p>项⽬说明</p>
<div class="carousel-caption">项⽬ 3</div>
</div>
<div class="item">
<p>项⽬说明</p>
<div class="carousel-caption">项⽬ 4</div>
</div>
<!--左右翻页-->
<a href=".myCarousel" data-slide="prev" class="carousel-control left"> <span class="glyphicon glyphicon-chevron-left"/>
</a>
<a href=".myCarousel" data-slide="next" class="carousel-control right"> <span class="glyphicon glyphicon-chevron-right"/>
</a>
</div>
</div>
</div>
</div>
<div class="row">
<h2 class="lead">请联系我</h2>
<div class="panel panel-default">
<div class="panel-heading">如果你感兴趣</div>
<div class="panel-body">
<form action="" method="post">
<label class="control-label" for="email">Email</label>
<input type="email" class="form-control" id="email" />
<br/>
<div class="btn-group pull-right">
<button type="submit" class="btn btn-success">请联系我</button> <button type="reset" class="btn btn-danger">重置</button>
</div>
<div class="clearfix"></div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
css
/*
* Globals
*/
body {
font-family: Georgia, "Times New Roman", Times, serif;
color: #555;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
margin-top: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论