Flask中集成Bootstrap

Bootstrap简介

Bootstrap(http://getbootstrap.com/)是Twitter开发的一个开源框架，它提供的用户界面组件可用于创建整洁且具有吸引力的网页，而且这些网页还能兼容所有现代的Web浏览器。

为什么需要在Flask中集成Bootstrap？

Flask模板集成Bootstrap。一般情况下Flask都是搭配Jinja2模板引擎来实现视图展现，不过现在Bootstrap比较流行，内置的样式也比较好看，有利于提高开发效率。

Flask中如何使用集成Bootstrap？

要想在程序中集成Bootstrap，显然要对模板做所有必要的改动。 不过，更简单的方法是使用一个名为Flask-Bootstrap 的Flask 扩展，简化集成的过程。 Flask-Bootstrap 使用pip安装：

pip install flask_bootstrap

Flask 扩展一般都在创建程序实例时初始化，Flask_Bootstrap的初始化方法:

from flask_bootstrap import Bootstrap
bootstrap = Bootstrap(app)

初始化Flask-Bootstrap之后，就可以在程序中使用一个包含所有Bootstrap文件的基模板base.html。这个模板利用Jinja2的模板继承机制，让程序扩展一个具有基本页面结构的模板，其中就有用来引入Bootstrap的元素。

• Jinja2中的extends指令从Flask-Bootstrap中导入bootstrap/base.html,从而实现模板的继承。
• Flask-Bootstrap中的基模板提供了一个网页框架，引入了Bootstrap中的CSS和JavaScript文件。
• 基模板中定义了可在衍生模板中重定义的块。block和endblock指令定义的块中的内容可添加到基模板中。
• 导航条链接

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

{%block title %}Flask{% 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>
            <a class="navbar-brand" href="/">Flasky</a>
        </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 %}

Bootstrap警告框组件

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Flask-Bootstrap自定义模板块

Flask-Bootstrap的base.html模板还定义了很多其他块，都可在衍生模板中使用，下表列出了所有可用的块：

块名	说明
doc	整个html文档
html_attribs	html标签属性
html	html标签中的内容
head	head标签中的内容
title	title标签中的内容
metas	一组meta标签
styles	层叠样式表定义
body_attribs	body标签的属性
body	body标签中的内容
navbar	用户定义的导航栏
content	用户定义的页面内容
scripts	文档底部的JacaScript声明

Flask-Bootstrap自定义模板块的继承与实现

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

{% block scripts %}
{{ super() }}
<script type="text/javascript" src="my-script.js"></script>
{% endblock %}

Flask集成Bootstrap的案例的综合应用（代码）

主程序：

from flask_bootstrap import Bootstrap
from flask import Flask, render_template, flash

app = Flask(__name__)
app.config['SECRET_KEY'] = 'westos'
# 初始化flask_bootstrap
bootstrap = Bootstrap(app)

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

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

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


if __name__ == '__main__':
    app.run(port=5005)

templates页面：
base.html基模板：包含模板继承，自定义模板和警告框组件，Flask中如何使用集成Bootstrap。

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

{% block title %}
    西部开源-{% block subtitle %}{% endblock %}
{% endblock %}

{#自定义样式---styles层叠样式表定义#}
{% block styles %}
{{ super() }}
<link rel="stylesheet" href="../static/ccs/main.css">
{% endblock %}

{% block navbar %}

    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            Brand and toggle get grouped for better mobile display
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>

            Collect the nav links, forms, and other content for toggling
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            /.navbar-collapse
        </div>
        /.container-fluid
    </nav>
    {#    Bootstrap警告框组件#}
    {% for msg in get_flashed_messages() %}
        <div class="alert alert-warning alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                    aria-hidden="true">&times;</span>
            </button>
            <strong>Warning!</strong> {{ msg }}
        </div>


    {% endfor %}
<p class="test">你好</p>
{% endblock navbar %}

bbs.html:

{% extends 'base.html' %}
{% block subtitle %}
博客
{% endblock %}

{% block content %}
<h1>博客</h1>
{% endblock %}

blog.html和index.html有bbs.html相似。

相关代码可访问：https://github.com/wtwdy/Flask-Bootstrap

页面显示如下：