当前位置: 首页 > article >正文

thinkphp8自带分页bootstrap

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
    }

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


http://www.kler.cn/a/442568.html

相关文章:

  • STM32-keil安装时遇到的一些问题以及解决方案
  • TCP-IP详解卷 TCP的超时与重传
  • 【Vue】分享一个快速入门的前端框架以及如何搭建
  • Cesium中的CustomDataSource 详解
  • 《深度剖析算法优化:提升效率与精度的秘诀》
  • 怎么实现Redis的高可用?
  • Android OpenGLES2.0开发(九):图片滤镜
  • Docker Compose 缓存Redis主从节点的搭建 分布式搭建
  • GIN
  • Rust安装字节源
  • 异步将用户信息存入 Redis 缓存
  • 计算机网络——期末复习(2)1-3章考试重点
  • 智能算法驱动:中阳科技量化交易模型的革新之路
  • matlab绘图时设置左、右坐标轴为不同颜色
  • SCAU期末笔记 - Linux系统应用与开发教程样卷解析(2024版)
  • WPF 布局控件
  • Python什么是动态调用方法?What is Dynamic Method Invocation? (中英双语)
  • OpenCV中的边缘检测和轮廓处理
  • OSLC助力系统工程的全生命周期整合 (转)
  • GEE+本地XGboot分类
  • 智慧商城:首页静态结构,封装首页请求接口,轮播和导航和商品基于请求回来的数据进行渲染
  • STM32 水质水位检测项目 显示模块
  • MATLAB图卷积神经网络GCN处理分子数据集节点分类研究
  • 从零用java实现 小红书 springboot vue uniapp (5)购物页聊天页
  • 【LeetCode】35.搜索插入位置
  • Python `*args` 和 `**kwargs`:优雅处理可变参数的终极指南 配合 frozenset 实现通用缓存装饰器