1
Je pratique l'article de blog "Flask Web Development" lorsque pagination des liens de pagination, le style bootstrap ne fonctionne pas.Mais l'autre peut être utilisé.J'utilisais l'importation de macros, j'espère que d'autres endroits peuvent être communs this.Est-il nécessaire d'ajouter à importer du temps? . quelqu'un m'aider.Pourquoi mon style d'amorçage de pagination ne fonctionne pas?
c'est 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 %}">
«</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 %}">»</a>
</li>
</ul>
</nav>
{% endmacro %}