Configure KnpPaginator to work with Twitter Bootstrap

好久不见. 提交于 2019-12-04 12:25:57

问题



i'm trying to apply twitter bootstrap css style to my knp pagination without modifying the vendor.
Is there a way to configure KnpPaginator so to detect existing bootstrap css style sheets?because as the screenshot shows, it is build to work with bootstrap.

回答1:


@Derick F: thank you a lot, i found an other way :
i just replaced:

pagination: KnpPaginatorBundle:Pagination:sliding.html.twig

with

pagination: KnpPaginatorBundle:Pagination:twitter_bootstrap_v3_pagination.html.twig

its the default template included in knp bundle.




回答2:


Yes, in your config.yml and your knp_paginator settings:

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

and then in 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 %}


来源:https://stackoverflow.com/questions/23035404/configure-knppaginator-to-work-with-twitter-bootstrap

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!