0
点赞
收藏
分享

微信扫一扫

Python:Flask-Bootstrap和Bootstrap-Flask

mjjackey 2022-02-12 阅读 69


体验了一下Flask+Bootstrap,给我的感觉是前后端代码合在一起了,增加开发难度。


目录


  • ​​一、Flask-Bootstrap​​
  • ​​二、Bootstrap-Flask​​


一、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 %}

渲染结果

Python:Flask-Bootstrap和Bootstrap-Flask_html

二、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 %}

渲染结果

Python:Flask-Bootstrap和Bootstrap-Flask_flask_02



举报

相关推荐

0 条评论