一分钟精通Flask-Bootstrap的使用

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

安装：

Flask-Bootstrap 使用pip安装：

pip install flask_bootstrap

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

加载：

from flask_bootstrap import Bootstrap

初始化：

方法一：

app = Flask(__name__)
Bootstrap(app)

方法二：

实例：

页面加入： { %extends "bootstrap/base.html" %}

    
    

    {% block mycss %} {% endblock %}




    

        
        

            
                Toggle navigation
                
                
                
            
            Ｌｉｕ＇ＢＬＯＧ
        

        
        

            

                
首页 (current)
                
发表博客
                
显示用户
                
测试钩子函数
            
            

                

                    
                
                搜索用户
            
            

                {% if session['uname'] %}
                
欢迎 {{session['uname']}}
                
注销
                {% else%}
                
登录
                
注册
                {% endif %}
            
        

    



{%extends "bootstrap/base.html"%}
{% block content %}  {% endblock %}

{% block myjs %}  {% endblock %}

 效果：

　　Jinja2 中的extends 指令从Flask-Bootstrap 中导入bootstrap/base.html， 从而实现模板继承。Flask-Bootstrap 中的基模板提供了一个网页框架，引入了Bootstrap 中的所有CSS 和JavaScript 文件。基模板中定义了可在衍生模板中重定义的块。block 和endblock 指令定义的块中的内容可添加到基模板中。上面这个user.html 模板定义了3 个块，分别名为title、navbar 和content。这些块都是基模板提供的，可在衍生模板中重新定义。title 块的作用很明显，其中的内容会出现在渲染后的HTML 文档头部，放在