体验了一下Flask+Bootstrap,给我的感觉是前后端代码合在一起了,增加开发难度。
目录
- 一、Flask-Bootstrap
- 二、Bootstrap-Flask
一、Flask-Bootstrap
不支持Bootstrap 4
- github : https://github/mbr/flask-bootstrap
- pypi: https://pypi/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/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 %}
渲染结果
更多推荐
Python:Flask-Bootstrap和Bootstrap-Flask
发布评论