Flask扩展之Flask-Bootstrap

Bootstrap是Twitter开发的一个开源Web框架，它提供的用户界面组件可用于创建整洁且具有吸引力的网页，而且兼顾所有现代的桌面和移动平台Web浏览器。

Bootstrap是客户端框架，因此不会直接涉及服务器。服务器需要做的只是提供引用Bootstrap层叠样式表（CSS）和JavaScript文件的HTML响应，并在HTML，CSS和JavaScript代码中实例化所需的用户界面元素。这些操作最理想的执行场所就是模板。

要想在应用中集成Bootstrap，最直接的方法是根据Bootstrap文档中的说明对HTML模板进行必要的改动。不过，这个任务使用Flask扩展处理要简单的多，而且相关的改动不会导致主逻辑凌乱不堪。

我们要使用的扩展就是Flask-Bootstrap。

一 安装

pip3 install flask-bootstrap

二 初始化

from flask_bootstrap import Bootstrap
# ...
bootstrap = Bootstrap(app)
或
bootstrap = Bootstrap()
bootstrap.init_app(app)

扩展通常从flask_<name>包中导入，其中<name>是扩展的名称。多数Flask扩展采用两种初始化方式的一种。

三 使用

初始化Flask-Bootstrap之后，就可以在应用中使用一个包含所有Bootstrap文件和一般结构的基模板。应用利用Jinja2的模板继承机制来扩展这个基模板。

比如：我们现在写一个简单的应用

from flask import Flask,render_template
from flask_bootstrap import Bootstrap


app = Flask(__name__)
bootstrap = Bootstrap(app)  # 初始化Flask-Bootstrap

@app.route('/')
def index():
	return render_template('index.html')


@app.route('/user/<name>')
def user(name):
	return render_template('user.html',name=name)
hello.py
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>
index.html

user.html

{% extends "bootstrap/base.html" %}

{% block title %}Title{% endblock %}

{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="/">Home</a></li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="container">
    <div class="page-header">
        <h1>Hello, {{ name }}!</h1>
    </div>
</div>
{% endblock %}

实际访问效果：

image

Jinja2中的extends指令从Flask-Bootstrap中导入bootstrap/base.html，从而实现模板继承。Flask-Bootstrap的基模板提供了一个网页骨架，引入了Bootstrap的所有CSS和JavaScript文件。

上面的user.html模板定义了3个区块，分别为title、navbar和content。这些区块都是基模板提供的，可在衍生模板中重新定义。更多基模板中定义的区块如下：

区块名

说明

doc

整个HTML文档

html_attribs

<html>标签的属性　

html

<html>标签中的内容　

head

<head>标签中的内容　

title

<title>标签中的内容　

metas

一组<meta>标签　

styles

　CSS声明

body_attribs

<body>标签的属性　

body

<body>标签中的内容　　

navbar

用户定义的导航栏　

content

用户定义的页面内容　

scripts

　文档底部的JavaScript声明

上表中很多区块都是Flask-Bootstrap自用的，如果直接覆盖可能会导致一些问题。例如：Bootstrap的CSS和JavaScript文件在styles和scripts区块中声明。如果应用需要向已经有内容的块中添加新内容，必须使用Jinja2提供的super()函数。例如，如果要在衍生模板中添加新的JavaScript文件，需要这么定义scripts区块：

{% block scripts %}
{{ super() }}
<script type="text/javascript" src="my_script.js"></script> 
{% endblock %}
posted @ 2019-08-27 11:29  Joe1991  阅读(276)  评论(0)    收藏  举报