thinkphp8自带分页bootstrap

发布于:2024-12-19 ⋅ 阅读:(17) ⋅ 点赞:(0)

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
    }

根据上述结构及样式,大家可以自定义更改样式;


网站公告

今日签到

点亮在社区的每一天
去签到