tp8引用的是bootstrap3.4.1这个版本;
前端结构:
<ul class="pagination">
<li>
<a href="/index.php?page=4">
«
</a>
</li>
<li>
<a href="/index.php?page=1">
1
</a>
</li>
<li>
<a href="/index.php?page=2">
2
</a>
</li>
<li>
<a href="/index.php?page=3">
3
</a>
</li>
<li>
<a href="/index.php?page=4">
4
</a>
</li>
<li class="active">
<span>
5
</span>
</li>
<li>
<a href="/index.php?page=6">
6
</a>
</li>
<li>
<a href="/index.php?page=7">
7
</a>
</li>
<li>
<a href="/index.php?page=8">
8
</a>
</li>
<li class="disabled">
<span>
...
</span>
</li>
<li>
<a href="/index.php?page=21327">
21327
</a>
</li>
<li>
<a href="/index.php?page=21328">
21328
</a>
</li>
<li>
<a href="/index.php?page=6">
»
</a>
</li>
</ul>
css样式:
.pagination {
display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px
}
.pagination>li {
display: inline
}
.pagination>li>a,.pagination>li>span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd
}
.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover {
z-index: 2;
color: #23527c;
background-color: #eee;
border-color: #ddd
}
.pagination>li:first-child>a,.pagination>li:first-child>span {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px
}
.pagination>li:last-child>a,.pagination>li:last-child>span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px
}
.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover {
z-index: 3;
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7
}
.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover {
color: #777;
cursor: not-allowed;
background-color: #fff;
border-color: #ddd
}
根据上述结构及样式,大家可以自定义更改样式;