Python：Flask-Bootstrap和Bootstrap-Flask

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

一、Flask-Bootstrap

不支持Bootstrap 4

• github : https://github.com/mbr/flask-bootstrap
• pypi: https://pypi.org/project/Flask-Bootstrap/

安装

pip install Flask-Bootstrap

  

 

  
1
 

使用示例

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)


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
 

模板文件 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 %}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

渲染结果

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

  

 

  
1
  
2
  
3
 

使用示例

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)


  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
 

模板文件 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 %}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
 

渲染结果

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/116006014