<!--导入插件-->
<link rel="stylesheet" type="text/css" href="Bootstrap插件/css/bootstrap.min.css"/>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="Bootstrap插件/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>HTML代码如下：
<!--将body分为两个部分-->
<div class="container">
<div class="row">
<!--左边部分-->
<div class="col-md-3">
...<!--左边部分添加三个面板 -->
<!--个人信息面板-->
<div class="panel panel-default">
<div class="panel-heading">
个人信息
</div>
<div class="panel-body">
<img src="../img/c8900d15ee716257712433a5201f019.jpg"
class="img-responsive img-rounded img-thumbnail" alt="yang" />
<p class="text-center text-primary">杨少凯</p>
<address>
<span class="glyphicon glyphicon-home" title="通讯地址">
<code>石家庄工商学院</code>
</span><br />
<span class="glyphicon glyphicon-file" title="邮政编码">
<abbr title="PostalCode">邮政编码</abbr><kbd>5201314</kbd>
</span><br />
<span class="glyphicon glyphicon-phone" title="联系电话">
<abbr title="phone">联系电话</abbr>111111111189
</span><br />
<span class="glyphicon glyphicon-envelope" title="电子邮箱">
<a href="#">www.sjzgsxy@qq.com</a>
</span>
</address>
</div>
</div>
<!--个人技能面板-->
<div class="panel panel-info">
<div class="panel-heading">个人技能</div>
<div class="panel-body">
<div class="row">
<div class="col-md-3">
<span class="text-muted">HTML5</span>
</div>
<div class="col-md-9">
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width: 85%;">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<span class="text-muted">CSS3</span>
</div>
<div class="col-md-9">
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width: 80%;">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<span class="text-muted">JavaScript</span>
</div>
<div class="col-md-9">
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width: 65%;">
</div>
</div>
</div>
</div>
</div>
</div>
<!--联系面板-->
<div class="panel panel-primary">
<div class="panel-heading">
联系我
</div>
<div class="panel-body">
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-4 control-label" for="inputemail">电子邮箱</label>
<div class="col-sm-8">
<input type="email"id="inputemail" class="form-control" placeholder="email" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="inputname">姓名</label>
<div class="col-sm-8">
<input type="email"id="inputemail" class="form-control" placeholder="name" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<button type="submit" class="btn btn-default pull-right">
发送
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!--右边部分-->
<div class="col-md-9">
<div class="jumbotron">
<p class="text-right small">
参与多个网站得前端设计工作。
<br />
熟练掌握<code>HTML5</code>,<code>bootstrap</code>,<code>jquery</code>等技术。
<br />
爱好程序设计，喜欢开发自己得小型产品<br />
有良好得习惯，以及程序错误控制和解决能力。<br />
</p>
</div>
<!--在巨幕下面添加一个面板组-->
<div class="panel-group" id="accordion">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">
项目展示
</div>
</div>
<div class="panel-body">
<!--项目展示 添加略缩图-->
<div class="panel-body">
<div class="col-sm-4">
<div class="thumbnail">
<img src="../img/sheying22.jpg" alt="xiangmu"/><!--图片-->
<div class="caption text-center">
<p><a href="#">项目名称</a></p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="../img/sheying22.jpg" alt="xiangmu"/><!--图片-->
<div class="caption text-center">
<p><a href="#">项目名称</a></p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="../img/sheying22.jpg" alt="xiangmu"/><!--图片-->
<div class="caption text-center">
<p><a href="#">项目名称</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<div class="panel-title">
工作经验
</div>
</div>
<!--工作经验 添加列表组-->
<ul class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-sm-4">2006-2010</div>
<div class="col-sm-4">xxx公司</div>
<div class="col-sm-4">前端工程师</div>
</div>
</li>
<!--和上一个li一样-->
<li class="list-group-item">
<div class="row">
<div class="col-sm-4">2010-2015</div>
<div class="col-sm-4">xxx公司</div>
<div class="col-sm-4">前端工程师</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-sm-4">2015-2022</div>
<div class="col-sm-4">xxx公司</div>
<div class="col-sm-4">前端工程师</div>
</div>
</li>
</ul>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">
教育背景
</div>
</div>
<div class="panel-body">
<!--教育背景添加表格-->
<table class="table table-striped">
<tr>
<th>时间</th>
<th>学校</th>
<th>专业</th>
</tr>
<tr>
<th>1999-2003</th>
<th>清华大学</th>
<th>计算机专业</th>
</tr>
<tr>
<th>2003-2009</th>
<th>哈弗大学</th>
<th>计算机专业</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
css部分：
<style type="text/css">
/*这是最后一步添加得内容*/
/*添加css样式调整巨幕和面板组得间距*/
.jumbotron{
margin-bottom: 10px;
}
</style>
