Question

我练习“Flask Web Development”博客文章时，分页链接分页，bootstrap样式不起作用。但是其他可以使用。我正在使用宏导入，希望其他地方可以共同使用。是否有必要添加在进口时间？。来人帮帮我。

这是index.html

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% import '_macros.html' as macros %}
{% block head %}
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
{% block scripts %}
    {{ super() }}
    <script type="text/javascript">
        $('[data-spy="scroll"]').each(function () {
            var $spy = $(this).scrollspy('refresh')
        })
    </script>
{% endblock %}

{% block styles %}
    {{ super() }}
    <style type="text/css">
        body {
            background-color: #ffffff;
            /*background-color: #F0F0F0;*/
            position: relative;
        }

        .header {
            background-color: #FFFFFF;
            background-attachment: scroll, fixed;
            background-position: top left, top left;
            background-repeat: repeat, no-repeat;
            background-size: auto, auto 100%;
            color: rgba(255, 255, 255, 0.5);
            height: 100%;
            left: 0;
            padding: 8em 4em 0 0;
            position: fixed;
            text-align: right;
            top: 0;
            width: 20%;
            padding: 0 0 0 0;
        }

        .img {
            background-color: #235F2A;
            height: 23.6076%;
            width: 61.8%;
            margin-top: 14.5924%;
            margin-left: 19.1%;
            margin-right: 19.1%;
            padding: 0 0 0 0;
        }

        .breadcrumb {
            margin-left: 25.28%;
            margin-top: 3%;
            width: 68.33%;
            background-color: #FFFF93;
        }

        .sketcho {
            width: 83.7%;
            background-color: #ffffff;
            opacity: 1;
            margin-left: 7.72%;
            margin-top: 8.5%;
        }

        .container-fluid {
            margin-left: 20%;
            padding-left: 0px;
            padding-right: 0px;
        }

        .sketch {
            width: 83.7%;
            background-color: #ffffff;
            opacity: 1;
            margin-left: 7.72%;
            margin-top: 1%;
        }

        section {
            padding-left: 17px;
            padding-right: 17px;
        }

        .paging {
            margin-left: auto;
            text-align: center
        }

        .center {
            margin-top: 320px;
            height: 35px;
        }

        .row_button {
            width: 35px;
            height: 35px;
            float: left;
        }
    </style>
{% endblock %}

{% endblock %}
{% block title %}Index{% endblock %}


{% block page_content %}
<body id="top">
<div class="container-fluid">
    {% for Article in Articles %}
    <div class="row sketch">
        <section id="one">
            <header class="major">
                {{ Article.head }}
            </header>
            <p>{{ Article.body }}</p>
            <ul class="actions">
                <li>
                    <button type="button" class="btn btn-info">Learn More</button>
                </li>
            </ul>
    </div>
    {% endfor %}
    <div class="row paging">
        {{ macros.pageination_widget(pageination, '.index') }}
    </div>
</div>

<script src="{{ url_for('static',filename='js/jquery-3.2.1.min.js') }}"></script>
<script src="{{ url_for('static',filename='js/bootstrap.min.js') }}"></script>
</body>
{% endblock %}

_macros.html

{% macro pageination_widget(pageination, endpoint) %}
    <nav aria-label="Page navigation">
        <ul class="pageination">
            <li {% if not pageination.has_prev %} class="disabled" {% endif %}>
                <a href="{% if pageination.has_perv %}{{ url_for(endpoint, page=pageination.page - 1, **kwargs) }}{% else %}#{% endif %}">
                    &laquo;</a>
            </li>
            {% for page in pageination.iter_pages() %}
                {% if page %}
                    {% if page == pageination.page %}
                        <li class="active">
                            <a href="{{ url_for(endpoint, page=page, **kwargs) }}">{{ page }}</a>
                        </li>
                    {% else %}
                        <li><a href="{{ url_for(endpoint, page=page, **kwargs) }}">{{ page }}</a></li>
                    {% endif %}
                {% else %}
                    <li class="disabled"><a href="#"></a></li>
                {% endif %}
            {% endfor %}
            <li {% if not pageination.has_next %} class="disabled" {% endif %}>
                <a href=" {% if pageination.has_next %}{{ url_for(endpoint,page=pageination.page + 1, **kwargs) }}{% else %}#{% endif %}">&raquo;</a>
            </li>
        </ul>
    </nav>
{% endmacro %}

Answer 1

您的班级名称似乎有错字。

尝试使用<ul class="pagination">代替<ul class="pageination">。

您可以在此处找到要使用的类的完整文档：

https://getbootstrap.com/docs/3.3/components/#pagination-default

为什么我的分页引导样式不起作用？

1 个答案: