配置 KnpPaginator 以使用 Twitter Bootstrap

Posted 2023-04-14

【中文标题】配置 KnpPaginator 以使用 Twitter Bootstrap

【英文标题】：Configure KnpPaginator to work with Twitter Bootstrap

【发布时间】：2014-04-12 19:56:33

【问题描述】：

我正在尝试在不修改供应商的情况下将 twitter bootstrap css 样式应用于我的 knp 分页。 有没有办法配置 KnpPaginator 以检测现有的引导 css 样式表？因为如屏幕截图所示，它是为使用引导而构建的。

【参考方案1】：

@Derick F：非常感谢，我找到了另一种方法： 我刚换了：

pagination: KnpPaginatorBundle:Pagination:sliding.html.twig

与

pagination: KnpPaginatorBundle:Pagination:twitter_bootstrap_v3_pagination.html.twig

它是 knp 包中包含的默认模板。

【讨论】：

哦，大声笑，然后我什至不知道他们包含在内，但很高兴知道。似乎一个关键的区别是它们不能像我的模板一样处理窗口大小调整。如果您在网页中查看分页器，然后将窗口大小调整为手机屏幕大小，您会注意到分页器最终占用了两行而不是一行。

【参考方案2】：

是的，在您的 config.yml 和您的 knp_paginator 设置中：

knp_paginator:
    template:
         pagination: AcmeBundle:Common:paginator-bootstrap.html.twig

然后在 paginator-bootstrap.html.twig

% if pageCount > 1 %
    <ul class="pagination">
    % if first is defined and current != first %
        <li class="first">
            <a href=" path(route, query|merge((pageParameterName): first)) ">
                &lt;&lt;
            </a>
        </li>
    % endif %

    % if previous is defined %
        <li class="previous">
            <a class="hidden-xs" href=" path(route, query|merge((pageParameterName): previous)) ">
                &lt;
            </a>
        </li>
    % endif %

    % for page in pagesInRange %
        % if page != current %
            <li class="page">
                <a href=" path(route, query|merge((pageParameterName): page)) ">
                     page 
                </a>
            </li>
        % else %
            <li class="current active">
                <a>
                     page  <span class="sr-only">(current)</span>
                </a>
            </li>
        % endif %
    % endfor %

    % if next is defined %
        <li class="next">
            <a class="hidden-xs" href=" path(route, query|merge((pageParameterName): next)) ">
                &gt;
            </a>
        </li>
    % endif %

    % if last is defined and current != last %
        <li class="last">
            <a href=" path(route, query|merge((pageParameterName): last)) ">
                &gt;&gt;
            </a>
        </li>
    % endif %
    </ul>
% endif %