flask之Twitter Bootstrap

一：Twitter Bootstrap是什么？

　　1.开源框架：提供用户页面组件。

　　2.可以创建整洁且具有吸引力的网站，并且网站能兼容所有现代的Web浏览器。

 　　特点：

　　Bootstrap 是客户端框架，因此不会直接涉及服务器。服务器需要做的只是提供引用了Bootstrap 层叠样式表（CSS） 和JavaScript 文件的HTML 响应， 并在HTML、CSS 和JavaScript 代码中实例化所需组件。这些操作最理想的执行场所就是模板。要想在程序中集成Bootstrap，显然要对模板做所有必要的改动。不过，更简单的方法是使用一个名为Flask-Bootstrap 的Flask 扩展，简化集成的过程。

二：使用

　　(venv) $ pip install flask-bootstrap

　　Successfully installed dominate-2.4.0 flask-bootstrap-3.3.7.1 visitor-0.1.3

 　　flask-bootstrap扩展都需要在创建实例时，进行初始化

# bootstrap.html

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

{% block title %} bootstrap {% endblock %}

{% block navbar %}

<h1>这是继承模板的 navbar：作用是显示导航页面 </h1>

{% endblock %}

{% block content %}

<h1> 这是继承模板的 content：作用是显示内容 </h1>

{% endblock %}

from flask import Flask
from flask import render_template
from flask.ext.bootstrap import Bootstrap


app = Flask(__name__)
bootstrap = Bootstrap(app)


@app.route("/")
def index():
    return "这是主页"


@app.route("/bootstrap")
def bootstrap_test():
    return render_template("bootstrap.html")

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

 

 具体使用方法见：https://v3.bootcss.com/components/#navbar