一、Flask-Bootstrap
不支持Bootstrap 4
github : https://github.com/mbr/flask-bootstrap
pypi: https://pypi.org/project/Flask-Bootstrap/
安装
pip install Flask-Bootstrap
使用示例
from flask import Flask, render_template from flask_bootstrap import Bootstrap app = Flask(__name__) Bootstrap(app) @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run(debug=True)
模板文件 templates/index.html
{% extends "bootstrap/base.html" %} {% block title %}这是标题{% endblock %} {% block content %} <h1>Hello, Bootstrap</h1> <button class="btn">按钮</button> <button class="btn btn-primary">按钮</button> {% endblock %}
渲染结果
二、Bootstrap-Flask
支持Bootstrap 4
doc: https://bootstrap-flask.readthedocs.io/
github：https://github.com/greyli/bootstrap-flask
安装
# 需要卸载flask-bootstrap $ pip uninstall flask-bootstrap bootstrap-flask -y $ pip install bootstrap-flask
使用示例
from flask import Flask, render_template from flask_bootstrap import Bootstrap app = Flask(__name__) Bootstrap(app) @app.route('/') def index(): return render_template('index.html') if __name__ == '__main__': app.run(debug=True)
模板文件 templates/index.html
{% block styles %} <!-- Bootstrap CSS --> {{ bootstrap.load_css() }} {% endblock %} {% block content %} <h1>Hello, Bootstrap</h1> <button class="btn">按钮</button> <button class="btn btn-primary">按钮</button> {% endblock %} {% block scripts %} <!-- Optional JavaScript --> {{ bootstrap.load_js() }} {% endblock %}
渲染结果
