前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >在TP6.0引入Bootstrap4分页样式显示效果不正常

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

作者头像
很酷的站长
发布2023-02-16 09:52:05
4910
发布2023-02-16 09:52:05
举报
文章被收录于专栏:站长的编程笔记
TP6.0 默认提供的分页代码中css样式类名是Bootstrap3中的,如果项目中使用的是Bootstrap4,则不能正确展示分页样式效果,需要修改分页驱动,使其样式正确显示
1. TP6.0 默认分页

默认分页驱动类文件

代码语言:javascript
复制
vendor/topthink/think-orm/src/paginator/driver/Bootstrap.php

默认分页代码

代码语言:javascript
复制
<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. 复制默认分页驱动类

代码语言:javascript
复制
vendor/topthink/think-orm/src/paginator/driver/Bootstrap.php

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

代码语言:javascript
复制
app/driver/MyPage.php

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

代码语言:javascript
复制
// 修改默认分页驱动'think\Paginator'    =>    app\driver\MyPage::class,

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

代码语言:javascript
复制
给 li 添加 .page-item,给 a 标签 和 span 标签添加 .page-link

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

站长百科网

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

代码语言:javascript
复制
<?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
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. TP6.0 默认分页
  • 2. 修改默认分页驱动
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档