Flask学习 三

Posted 2020-09-18

使用flask-bootstrap 集成Bootstrap

pip install flask-bootstrap

安装后即可继承使用Bootsftrap所有文件的基模版

 

from flask import Flask,render_template
from flask.ext.bootstrap import Bootstrap
app = Flask (__name__)
bootstrap = Bootstrap(app)

@app.route (‘/‘)
def index1():
    return render_template(‘index.html‘)
@app.route (‘/user/<name>‘)
def index(name):
    return render_template(‘user.html‘,name= name)

if __name__ == ‘__main__‘:
    app.run (debug=True)

app

{% extends ‘bootstrap/base.html‘ %}
{% block title %}Flasky{% endblock %}

{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
    <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>
{% endblock %}

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

</div>
{% endblock %}

user.html

 bootstrap 中scripts和styles块如果想添加新内容，必须使用super()函数

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