<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
其余部分的标签都有显示。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
<title>Lettiy</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"/>
<style>
.left{
float:left;
}
.right{
float:right;
}
.rnav{
height:80px;
line-height:80px;
}
.badge{
background-color:teal;
}
.interface{
width:100px;
height:100px;
}
</style>
</head>
<!-- 时间轴主体文章部分 -->
<div class="col-md-10 left" style="padding:0;">
<!--巨幕显示最新信息-->
<div class="jumbotron">
<h1>Welcome to Lettiy!</h1>
<p>this is the demo test Page</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
<!--文章显示区域
采用表格形式进行填充-->
<div class="container-fluid" style"margin-top:50px;">
<table id="postView" style="width:100%;">
<!--第一行-->
<tr>
<td class="col-md-3">
<div class="thumbnail">
<img src="img/java.png" alt="..."class="interface">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p>
<p><a href="#" class="btn btn-primary" role="button">More</a></p>
</div>
</div>
</td>
<td class="col-md-3">
<div class="thumbnail">
<img src="img/java.png" alt="..."class="interface">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p>
<p><a href="#" class="btn btn-primary" role="button">More</a></p>
</div>
</div>
</td>
<td class="col-md-3">
<div class="thumbnail">
<img src="img/java.png" alt="..."class="interface">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p>
<p><a href="#" class="btn btn-primary" role="button">More</a></p>
</div>
</div>
</td>
<td class="col-md-3">
<div class="thumbnail">
<img src="img/java.png" alt="..."class="interface">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p>
<p><a href="#" class="btn btn-primary" role="button">More</a></p>
</div>
</div>
</td>
</tr>
<!--第二行-->
<tr>
<td class="col-md-3">
<div class="thumbnail">
<img src="img/php.png" alt="..."class="interface">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p>
<p><a href="#" class="btn btn-primary" role="button">More</a></p>
</div>
</div>
</td>
<td class="col-md-3">
<div class="thumbnail">
<img src="img/php.png" alt="..."class="interface">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p>
<p><a href="#" class="btn btn-primary" role="button">More</a></p>
</div>
</div>
</td>
<td class="col-md-3">
<div class="thumbnail">
<img src="img/php.png" alt="..."class="interface">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p>
<p><a href="#" class="btn btn-primary" role="button">More</a></p>
</div>
</div>
</td>
<td class="col-md-3">
<div class="thumbnail">
<img src="img/php.png" alt="..."class="interface">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Java is a general-purpose computer programming language that is concurrent, class-based, object-oriented,[14] and specifically designed to have as few impl...</p>
<p><a href="#" class="btn btn-primary" role="button">More</a></p>
</div>
</div>
</td>
</tr>
</table>
<!--分页器-->
<div class="col-md-3 right">
<nav aria-label="Page navigation">
<ul class="pagination pagination-lg">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!--BootStrap jquery-->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
