用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="https://cdn.bootcss.com/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"><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></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" style="width: 80%;"><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" style="width: 75%;"><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" style="width: 70%;"><span>熟悉</span></div></div><p><span class="label label-warning">数据结构/算法</span></p><div class="progress"><div class="progress-bar progress-bar-warning progress-bar-striped active" style="width: 79%;"><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" style="height: 406px;width: 650px" alt="第一张" class="img-responsive"><div class="carousel-caption">项目 1</div></div><div class="item"><img src="./img/img2.jpg" style="height: 406px;width: 650px" alt="第二张" class="img-responsive"><div class="carousel-caption">项目 2</div></div><div class="item"><img src="./img/img3.jpg" style="height: 406px;width: 650px" alt="第三张" class="img-responsive"><div class="carousel-caption">项目 3</div></div><div class="item"><img src="./img/img4.jpg" style="height: 406px;width: 650px" 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"><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><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;color: #333;
}/** Override Bootstrap's default container.*/@media (min-width: 1200px) {.container {width: 970px;}
}/** Masthead for nav*/.blog-masthead {background-color: #428bca;-webkit-box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .1);
}/* Nav links */.blog-nav-item {position: relative;display: inline-block;padding: 10px;font-weight: 500;color: #cdddeb;
}.blog-nav-item:hover, .blog-nav-item:focus {color: #fff;text-decoration: none;
}/* Active state gets a caret at the bottom */.blog-nav .active {color: #fff;
}.blog-nav .active:after {position: absolute;bottom: 0;left: 50%;width: 0;height: 0;margin-left: -5px;vertical-align: middle;content: " ";border-right: 5px solid transparent;border-bottom: 5px solid;border-left: 5px solid transparent;
}/** Blog name and description*/.blog-header {padding-top: 20px;padding-bottom: 20px;
}.blog-title {margin-top: 30px;margin-bottom: 0;font-size: 60px;font-weight: normal;
}.blog-description {font-size: 20px;color: #999;
}/** Main column and sidebar layout*/.blog-main {font-size: 18px;line-height: 1.5;
}/* Sidebar modules for boxing content */.sidebar-module {padding: 15px;margin: 0 -15px 15px;
}.sidebar-module-inset {padding: 15px;background-color: #f5f5f5;border-radius: 4px;
}.sidebar-module-inset p:last-child, .sidebar-module-inset ul:last-child, .sidebar-module-inset ol:last-child {margin-bottom: 0;
}/* Pagination */.pager {margin-bottom: 60px;text-align: left;
}.pager>li>a {width: 140px;padding: 10px 20px;text-align: center;border-radius: 30px;
}/** Blog posts*/.blog-post {margin-bottom: 60px;
}.blog-post-title {margin-bottom: 5px;font-size: 40px;
}.blog-post-meta {margin-bottom: 20px;color: #999;
}/** Footer*/.blog-footer {padding: 40px 0;color: #999;text-align: center;background-color: #f9f9f9;border-top: 1px solid #e5e5e5;
}.blog-footer p:last-child {margin-bottom: 0;
}

header, footer, nav, div, section, aside, article, p {border: 1px dotted #f0f0f0;
}.divContent {min-height: 350px;
}

用Bootstrap写一份简历相关推荐

如何用 Markdown 写一份简历
用 Markdown 写一份可在线预览,也可导出 PDF 的简历. 预览网址:cv-template.wiki-power.com 如何导出 PDF:在网页上使用快捷键 Ctrl + P 唤出打印界面 ...
转行历程｜用一年时间写一份简历，成功跳槽
用一年时间写一份简历. 不是指拖拖拉拉,一份简历写了一年. 而是指,要用一年的时间,不断丰富简历内容,包括知识技能.项目经验等. 虽然已经成功转行测试,但不意味着满足现状. 如果仅仅停留在功能测试的水 ...
怎样制作一份简历？这些方面内容最好要写上
怎么制作一份简历呢?简历是个人求职的重要材料,它反映了你的个人信息.教育背景.工作经验.专业技能等方面的情况.写一份好的简历可以让你在众多求职者中脱颖而出,增加获得面试的机会.很多小伙伴不清楚简历中应 ...
用markdown + html写一封简历
0. 前言 1. 阶段1 - 确定需要几个模块 2. 阶段2 - 使用纯文字填充简历 3. 阶段3 - 预留空格 4. 阶段4 - 文章垂直方向的调整 5. 阶段5 - 居中对齐 6. 阶段6 - 加 ...
论如何写一份好的前端面试简历
简历的本质在写简历之前,我们必须清楚的了解一件事情,那就是简历是什么? 它不是人生履历,不是项目清单,也不是技能大放送. 简历的存在只有一个目的 -- 帮你约到面试.只要能达到这个目的,简历可以是一 ...
如何写一份让面试官眼前一亮的简历？
一份好的简历,能给面试官一个好的印象,可能你接下来的面试就很顺利.一份糟糕的简历,可能连简历筛查都过不了,所以写好一份简历很重要. 可是笔者发现很多伙伴根本不会写简历,有的内容不全,有的重点不突出,有 ...
如何写一份优秀的Java程序员简历？
hello,大家好! 之前给小伙伴们分享过大厂的面经汇总, 面试题刷的怎么样了? 简历准备好了吗? 今天来讨论一下如何写一份优秀的Java程序员简历也会分享几份优秀的大厂简历模板, 下方公众号回复 ...
【Geek软技能】程序员，为什么写不好一份简历？
一份好简历会是一份好工作的开端. 为什么?沧海也会遗珠简历,是如此重要,它是获得一份满意工作的敲门砖,但不同的简历敲门的声响可不同. 但很多时候简历给人的感觉也似乎微不足道,因为没有人会真正细致 ...
C语言天才！想法奇异？还是逼格满满？一份国外C语言写的传奇简历
C语言天才!想法奇异?还是逼格满满?一份国外C语言写的传奇简历作者用代码更新了自己的简历,是不是很接地气,特符合程序员的逼格.这是一份可读可执行的ç语言源文件,也是作者编码风格的体现. C语言源码( ...

用Bootstrap写一份简历

index.html：

css

用Bootstrap写一份简历相关推荐

最新文章

热门文章