当前位置:首页 > 编程技术 > 正文内容

在TP6.0引入Bootstrap4分页样式显示效果不正常

yc8881年前 (2023-02-12)编程技术309

TP6.0 默认提供的分页代码中css样式类名是Bootstrap3中的,如果项目中使用的是Bootstrap4,则不能正确展示分页样式效果,需要修改分页驱动,使其样式正确显示

1. TP6.0 默认分页


默认分页驱动类文件

vendor/topthink/think-orm/src/paginator/driver/Bootstrap.php

默认分页代码

<ul class="pagination">    <li><a href="?page=1">&laquo;</a></li>    <li><a href="?page=1">1</a></li>    <li class="active"><span>2</span></li>    <li class="disabled"><span>&raquo;</span></li></ul>

2. 修改默认分页驱动


a. 复制默认分页驱动类

vendor/topthink/think-orm/src/paginator/driver/Bootstrap.php

b. 粘贴到 app/driver 目录下,重命名为 MyPage、修改命名空间

app/driver/MyPage.php

c. 修改文件 app/provider.php,添加以下内容

// 修改默认分页驱动'think\Paginator'    =>    app\driver\MyPage::class,

d. 修改自定义分页驱动文件 app/driver/MyPage.php

给 li 添加 .page-item,给 a 标签 和 span 标签添加 .page-link

e. 修改前和修改后的对比

f. 修改后的分页驱动,在 Bootstrap4.x 中可直接使用

<?phpnamespace app\driver;use think\Paginator;/** * Bootstrap 分页驱动 */class MyPage extends Paginator{    /**     * 上一页按钮     * @param string $text     * @return string     */    protected function getPreviousButton(string $text = "&laquo;"): string    {        if ($this->currentPage() <= 1) {            return $this->getDisabledTextWrapper($text);        }        $url = $this->url(            $this->currentPage() - 1        );        return $this->getPageLinkWrapper($url, $text);    }    /**     * 下一页按钮     * @param string $text     * @return string     */    protected function getNextButton(string $text = '&raquo;'): string    {        if (!$this->hasMore) {            return $this->getDisabledTextWrapper($text);        }        $url = $this->url($this->currentPage() + 1);        return $this->getPageLinkWrapper($url, $text);    }    /**     * 页码按钮     * @return string     */    protected function getLinks(): string    {        if ($this->simple) {            return '';        }        $block = [            'first'  => null,            'slider' => null,            'last'   => null,        ];        $side   = 3;        $window = $side * 2;        if ($this->lastPage < $window + 6) {            $block['first'] = $this->getUrlRange(1, $this->lastPage);        } elseif ($this->currentPage <= $window) {            $block['first'] = $this->getUrlRange(1, $window + 2);            $block['last']  = $this->getUrlRange($this->lastPage - 1, $this->lastPage);        } elseif ($this->currentPage > ($this->lastPage - $window)) {            $block['first'] = $this->getUrlRange(1, 2);            $block['last']  = $this->getUrlRange($this->lastPage - ($window + 2), $this->lastPage);        } else {            $block['first']  = $this->getUrlRange(1, 2);            $block['slider'] = $this->getUrlRange($this->currentPage - $side, $this->currentPage + $side);            $block['last']   = $this->getUrlRange($this->lastPage - 1, $this->lastPage);        }        $html = '';        if (is_array($block['first'])) {            $html .= $this->getUrlLinks($block['first']);        }        if (is_array($block['slider'])) {            $html .= $this->getDots

本站发布的内容若侵犯到您的权益,请邮件联系站长删除,我们将及时处理!


从您进入本站开始,已表示您已同意接受本站【免责声明】中的一切条款!


本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行研究。


本站资源仅供学习和交流使用,版权归原作者所有,请勿商业运营、违法使用和传播!请在下载后24小时之内自觉删除。


若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。


本文链接:https://www.10zhan.com/biancheng/10521.html

分享给朋友:

“在TP6.0引入Bootstrap4分页样式显示效果不正常” 的相关文章

【说站】laravel实现自定义404页面并给页面传值

【说站】laravel实现自定义404页面并给页面传值

以 laravel5.8 为例,虽然有自带的404页面,但太简单,我们更希望能自定义404页面,将用户留在站点。实现的方式很简单,将自定义的视图文件命名为 404.blade.php,并放到 reso...

【说站】Thymeleaf报错Error resolving template “XXX”

【说站】Thymeleaf报错Error resolving template “XXX”

修改了一下开源项目的目录结构访问突然报错Error resolving template “XXX”可能原因有如下三种:第一种可能:原因:在使用springboot的过程中,如果使用thymeleaf...

【说站】用一句话就可以去除宝塔面板操作上的二次验证

【说站】用一句话就可以去除宝塔面板操作上的二次验证

用过宝塔的朋友应该都会发现,现在宝塔面板有些鸡肋的功能,删除文件、删除数据库、删除站点等操作都需要做计算题!不仅加了几秒的延时等待,还无法跳过!这时候就会有朋友在想,如何去除宝塔面板的二次验证,此篇文...

【说站】Centos8.0如何配置静态IP详解及永久关闭防火墙

【说站】Centos8.0如何配置静态IP详解及永久关闭防火墙

这篇文章主要介绍了详解Centos8 配置静态IP的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来学习一下!1. 查看自己的网关地址点击虚...

【说站】利用Webhook实现Java项目自动化部署

【说站】利用Webhook实现Java项目自动化部署

用webhook就能实现Java项目自动部署,其实原理很简单。费话不多说,直接往下看教程。1. 创建gitee仓库并初始化2. 在linux安装git3. 在宝塔的软件的商店里下载Webhook4....

【说站】vagrant实现linux虚拟机的安装并配置网络

【说站】vagrant实现linux虚拟机的安装并配置网络

一、VirtualBox的下载和安装1、下载VirtualBox官网下载:https://www.virtualbox.org/wiki/Downloads我的电脑是Windows的,所以下载Wind...