首页 > django-pagination中怎样显示bootstrap样式

django-pagination中怎样显示bootstrap样式

初学Django和前段开发。我想用django-pagination来实现多个objects(比如博文、图片等)的分页功能。我根据《七步教你实现Django网站列表自动分页》来配置django-pagination。我自己写了一个简单的测试:在views.py中直接返回entries(一个字符串列)到模板文件display.html中。模板文件定义display.html如下,其中添加了bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Pagination</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <div class="pagination">
        {% load pagination_tags %}
        {% autopaginate entries 1 %}

        {% for entry in entries %}
            <p>{{ entry }}</p>
        {% endfor %}
        {% paginate %}
    </div>
</div>
</body>
</html>

最后在浏览器看到的效果是:

我希望的浏览页面栏的效果是:

或者

请教大家我应该怎么修改才能实现上述效果?感谢!


templates目录下添加pagination/pagination.html文件,内容大致是下面这样,当然你可以自己修改

{% if is_paginated %}
{% load i18n %}
<nav id="pc_pagination" class="text-center">
<ul class="pagination">
    {% if page_obj.has_previous %}
        <li><a href="?page={{ page_obj.previous_page_number }}{{ getvars }}{{ hashtag }}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    {% else %}
         <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    {% endif %}
    {% for page in pages %}
        {% if page %}
            {% ifequal page page_obj.number %}
                <li class="active"><a href="#">{{ page }} <span class="sr-only">(current)</span></a></li>
            {% else %}
                <li><a href="?page={{ page }}{{ getvars }}{{ hashtag }}">{{ page }} </a></li>
            {% endifequal %}
          {% else %}
            <li><a href="#">...</a></li>
        {% endif %}
    {% endfor %}
    {% if page_obj.has_next %}
        <li><a href="?page={{ page_obj.next_page_number }}{{ getvars }}{{ hashtag }}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
    {% else %}
            <li class="disabled"><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
    </li>
    {% endif %}
</ul>
</nav>
{% endif %}
【热门文章】
【热门文章】