Flask - bootstrap模板使用 和 模板继承

Flask-Bootstrap

安装

**pip install flask-bootstrap **

加载

from flask_bootstrap import Bootstrap
bootstrap = Bootstrap()

初始化

• 方法一 :

 app = Flask(__name__)
		Bootstrp(app)

• 方法二 :
  页面加入： { %extends "bootstrap/base.html" %}

内置的block

• {% block title %} {% endblock %} : 标题
• {% block navbar%} {% endblock %} : 导航栏
• {% block content %} {% endblock %} : 内容
• {% block styles %} {% endblock %} : 样式
• {% block scripts %} {% endblock %} : 脚本
• {% block head %} {% endblock %} : 头
• {% block body %} {% endblock %} : 体
• {% block footer %} {% endblock %} : 底部

自定义添加块

• 把新的块在 content块里面重新声明一下，相当于在原有的content里面添加了一个块

url_prefix

• 在路径前面添加前缀 ：
  • user_bp = Blueprint('user', __name__, url_prefix='/user')
  • 使用前的请求 : http://127.0.0.1:5000/index
  • 使用后 : http://127.0.0.1:5000/user/index

报错

jinjia2.exceptions.UndefinedError: 'bootstrap_find_resource' is undefined

• 原因 ：flask-bootstrap 和 bootstrap-flask 不能同时使用

父模板

base.html

{# 继承bootstrap的base文件 #}
{% extends "bootstrap/base.html" %}
{% block title %}首页{% endblock %}

{% block styles %}
    {{ super() }}
    <style>
        #myfoot {
            border-top: 1px solid darkgray;
            font-size: 14px;
            text-align: center;
            color: lightgray;
        }
    </style>
{% endblock %}

{% block navbar %}
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#">个人博客</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="#">首页 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">关于作者</a></li>
                    <li><a href="#">我的相册</a></li>
                    <li><a href="#">留言板</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                           aria-haspopup="true" aria-expanded="false">文章分类 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">分类1</a></li>
                            <li><a href="#">分类2</a></li>
                            <li><a href="#">分类3</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">分类4</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">分类5</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="搜索">
                    </div>
                    <button type="submit" class="btn btn-default">搜索</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">登录</a></li>
                    <li><a href="{{ url_for('user.register') }}">注册</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
{% endblock %}

{% block content %}
    {% block newcontent %}
        <h1>Hello, Bootstrap</h1>
    {% endblock %}
    {% block footer %}
        <p id="myfoot">这是底部</p>
    {% endblock %}
{% endblock %}