Heim >Web-Frontend >Bootstrap-Tutorial >So erstellen Sie einen Lebenslauf mit Bootstrap
So erstellen Sie einen Lebenslauf mit Bootstrap
- 爱喝马黛茶的安东尼nach vorne
- 2019-07-13 17:55:586136Durchsuche
Hinweis: Der Pfad der Bootstrap-bezogenen Dateien, Bootstrap hängt von jQuery ab, jQuery muss zuerst geladen werden
index.html：
<!DOCTYPE html>
<html>
<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>
<button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#leadBar"
aria-expanded="false" aria-controls="navbar">
<span></span>
<span></span>
<span></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>
<h1>个人简历</h1>
</div>
<div class="divContent container">
<div>
<h2>基本信息</h2>
<div>
<blockquote>
<h2>某某</h2>
<footer>XX工程师</footer>
</blockquote>
<div class="row text-center">
<img class="img-responsive img-circle
img-thumbnail lazy" src="/static/imghwm/default1.png" data-src="./img/zmz.jpg" alt="boy" style="max-width:90%" >
</div>
<div class="row text-center">
<h3>个人介绍</h3>
</div>
<div>
<span>滴滴答答滴滴答答滴滴答答滴滴答
答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答滴滴答答</span>
</div>
<div>
<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>
<!-- 大屏幕 -->
<div>
<h2>个人荣誉</h2>
<hr>
<p2>获得******************************************</p2>
<h2>我的空间</h2>
<hr>
<div>
<div>
<a href=""><button>个人博客</button></a>
</div>
<div>
<a href=""><button>个人博客园</button></a>
</div>
<div>
<a href=""><button>我的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>
<h2 id="skill">职业技能</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>
<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>
<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>
<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>
<div class="progress-bar progress-bar-warning progress-bar-striped active" style="width: 79%;">
<span>熟悉</span>
</div>
</div>
</div>
<div>
<h2>项目展示</h2>
<div>
<div id="" class="myCarousel carousel slide">
<ol>
<li data-target=".myCarousel" data-slide-to="0"></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>
<div class="item active">
<img src="/static/imghwm/default1.png" data-src="./img/img1.jpg" class="lazy" style="max-width:90%" alt="第一张">
<div>项目 1</div>
</div>
<div>
<img src="/static/imghwm/default1.png" data-src="./img/img2.jpg" class="lazy" style="max-width:90%" alt="第二张">
<div>项目 2</div>
</div>
<div>
<img src="/static/imghwm/default1.png" data-src="./img/img3.jpg" class="lazy" style="max-width:90%" alt="第三张">
<div>项目 3</div>
</div>
<div>
<img src="/static/imghwm/default1.png" data-src="./img/img4.jpg" class="lazy" style="max-width:90%" alt="第四张">
<div>项目 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 id="" class="myCarousel carousel slide">
<ol>
<li data-target=".myCarousel" data-slide-to="0"></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>
<div class="item active">
<p>项目说明</p>
<p>项目说明</p>
<p>项目说明</p>
<p>项目说明</p>
<p>项目说明</p>
<div>项目 1</div>
</div>
<div>
<p>项目说明</p>
<p>项目说明</p>
<p>项目说明</p>
<p>项目说明</p>
<div>项目 2</div>
</div>
<div>
<p>项目说明</p>
<div>项目 3</div>
</div>
<div>
<p>项目说明</p>
<div>项目 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>
<h2>请联系我</h2>
<div class="panel panel-default">
<div>如果你感兴趣</div>
<div>
<form action="" method="post">
<label for="email">Email</label>
<input type="email" 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></div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>Verwandte Empfehlungen: „Bootstrap Getting Started Tutorial“
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;
}Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Lebenslauf mit Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：So ersetzen Sie Stile im BootstrapNächster Artikel：So ersetzen Sie Stile im Bootstrap