首页 > 代码库 > Flask学习 三

Flask学习 三

使用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 %}

 

Flask学习 三