<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 主题 Simply Me</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.cn/lib/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
<script src="https://www.w3schools.cn/lib/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.bg-1 { background-color: #1abc9c;
color: #ffffff;
}
.bg-2 { background-color: #474e5d;
color: #ffffff;
}
.bg-3 { background-color: #ffffff;
color: #555555;
}
.bg-4 { background-color: #2f2f2f;
color: #fff;
}
.container-fluid { padding-top: 70px;
padding-bottom: 70px;
}
.navbar { padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover { color: #1abc9c !important;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Me</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">WHO</a></li>
<li><a href="#">WHAT</a></li>
<li><a href="#">WHERE</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid bg-1 text-center">
<h3>我是谁？</h3>
<img src="bird.jpg" class="img-responsive img-circle" style="display:inline" alt="鸟" width="350" height="350">
<h3>我是冒险家</h3>
</div>
<div class="container-fluid bg-2 text-center">
<h3>我是什么？</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<a href="#" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-search"></span> Search
</a>
</div>
<div class="container-fluid bg-3 text-center">
<h3>在哪里找到我？</h3><br>
<div class="row">
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="birds1.jpg" class="img-responsive" style="width:100%" alt="图像">
</div>
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="birds2.jpg" class="img-responsive" style="width:100%" alt="图像">
</div>
<div class="col-sm-4">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<img src="birds3.jpg" class="img-responsive" style="width:100%" alt="图像">
</div>
</div>
</div>
<footer class="container-fluid bg-4 text-center">
<p>Bootstrap 主题由 <a href="https://www.w3schools.cn">www.w3schools.cn</a> 制作</p>
</footer>
</body>
</html>