bootstrap 的简单使用
- 在https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip 下载开发版使用的bootstrap
- 使用bootstrap.js之前必须引用jQuery库
导航样式
- class=“nav navbar-nav”
网格12
- class=“row”
- class=“col-md-4”
- class=“col-md-4”
- class=“col-md-4”
分页
- class=“pagination”
徽章
class=“badge”
jumbotron、media
按钮btn
<body>
<header class="container jumbotron">
<div class="page-header"><h3>Python程序员<small> 基本信息</small></h3></div>
</header>
<nav class="container jumbotron ">
<ul class="nav nav-pills">
<li><a href="#">基本信息</a></li>
<li><a href="#">经验</a></li>
<li><a href="#">能力</a></li>
<li><a href="#">其他</a></li>
</ul>
</nav>
<div class="container">
<div class="row">
<aside class="col-md-3">
<ul class="nav">
<li><a href="#">python</a></li>
<li><a href="#">web</a></li>
<li><a href="#">jun</a></li>
<li><a href="#">其他</a></li>
</ul>
</aside>
<article class="col-md-9">
<section class="jumbotron page-header" style="margin:auto 0">
<h2>section</h2>
<p>内容不重要啦</p>
</section>
<section class="jumbotron page-header" >
<h2>section</h2>
<p>内容不重要啦</p>
</section>
</article>
</div>
</div>
<footer class="container ">
<div class="jumbotron row">
<div class="col-md-3">友情链接</div>
<div class="col-md-9">网页的底部说明</div>
</div>
</footer>
</body>
</html>