摘自《极客学院》
1、效果图:
2、html代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="bootstrap.min.css">
<title>徽章和巨幕</title>
</head>
<body>
<div class="jumbotron">
<div class="container">
<h1>Hello,World!!</h1>
<p>努力成为全栈工程师,努力make money努力成为全栈工程师,努力make money努力成为全栈工程师,努力make money努力成为全栈工程师,努力make money</p>
<p><a class="btn btn-success btn-lg" href="#">学习更多</a></p>
</div>
</div>
<div class="container">
<a href="#">短信消息<span class="badge">30</span></a>
<button class="btn btn-info" type="button">Message<span class="badge">100</span></button>
</div>
<ul class="nav nav-pills">
<li role="presentation"><a href="#" class="active">Home<span class="badge">50</span></a></li>
<li role="presentation"><a href="#">Profile<span class="badge">5000</span></a></li>
<li role="presentation"><a href="#">Message<span class="badge">500</span></a></li>
</ul>
</body>
</html>