Bootstrap 分页器 css 未出现

Question

我正在按照此 tutorial 在 php 中创建具有 bootstrap 样式的 table。

将 bootstrap 中的引用用作 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> 允许我以正确的格式查看 table，但分页器（包括在下面）没有出现在正确的 css 中： .

如何让 bootstrap css 样式出现？

参考代码

函数调用的分页器代码<?php echo $Paginator->createLinks( $links, 'pagination pagination-sm' ); ?>:

public function createLinks( $links, $list_class ) {
    if ( $this->_limit == 'all' ) {
        return '';
    }


$last       = ceil( $this->_total / $this->_limit );

$start      = ( ( $this->_page - $links ) > 0 ) ? $this->_page - $links : 1;
$end        = ( ( $this->_page + $links ) < $last ) ? $this->_page + $links : $last;

$html       = '<ul class="' . $list_class . '">';

$class      = ( $this->_page == 1 ) ? "disabled" : "";
$html       .= '<li class="' . $class . '"><a href="?limit=' . $this->_limit . '&page=' . ( $this->_page - 1 ) . '">&laquo;</a></li>';

if ( $start > 1 ) {
    $html   .= '<li><a href="?limit=' . $this->_limit . '&page=1">1</a></li>';
    $html   .= '<li class="disabled"><span>...</span></li>';
}

for ( $i = $start ; $i <= $end; $i++ ) {
    $class  = ( $this->_page == $i ) ? "active" : "";
    $html   .= '<li class="' . $class . '"><a href="?limit=' . $this->_limit . '&page=' . $i . '">' . $i . '</a></li>';
}

if ( $end < $last ) {
    $html   .= '<li class="disabled"><span>...</span></li>';
    $html   .= '<li><a href="?limit=' . $this->_limit . '&page=' . $last . '">' . $last . '</a></li>';
}

$class      = ( $this->_page == $last ) ? "disabled" : "";
$html       .= '<li class="' . $class . '"><a href="?limit=' . $this->_limit . '&page=' . ( $this->_page + 1 ) . '">&raquo;</a></li>';

$html       .= '</ul>';

return $html;
}
}

Answer 1

这可能是由于生成的 HTML 缺少一些必要的 Bootstrap classes。

即使您正确地将分页 class 设置为 <ul> 元素，我认为您在 <li> 和 <a> 元素中缺少 classes .

根据 BS docs:

它应该是这样的

  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>

尝试将 .page-item class 添加到 <li> 元素并将 .page-link class <a> 元素添加到 PHP 函数中，这样它生成正确的 HTML，你应该没问题。

Bootstrap 分页器 css 未出现

Bootstrap paginator css not appearing

html

php

bootstrap-5