12.页面优化插件

页面优化插件

应用场景

原生的页面在对于前端不够熟悉的情况下，编写起来是比较困难的。包括设置一些样式，从头再学习 CSS 成本较大。

如果要简化学习成本，可以通过响应式的前端框架 Bootstrap 完成，通过使用 Bootstrap，开发者可以节省大量的时间和精力。

在 Bootstrap 的基础之上，flask 提供相关的插件，使用插件之后，flask 结合 Bootstrap 的应用则变得更加轻松、简单。

适用群体

• 对前端不够熟悉。
• 学习过 template 常用的模版： 在使用过程中，需要结合前端的语法知识，以及模版语法进行一些样式或数据的渲染。

如何使用

环境安装

如果要轻松的在项目中使用 bootstrap，可以直接执行命令，安装对应插件。

pip install flask-bootstrap

应用步骤

1. 在安装成功之后，在 templates 目录创建一个 base.html，在 base.html 中添加这行代码：

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

2. 在启动服务的地方，将 app 实例传入 Bootstrap 类中：

   Bootstrap(app)
   

3. 完成以上两步环境配置之后，可以在目录重新创建一个 bootstrap_index.html，在bootstrap_index.html中导入{% include 'base.html' %}。然后再在此文件中使用 Bootstrap 的官方组件， 然后再重启服务，重新渲染，即可看到一个有漂亮样式的组件。

官方组件地址为：https://getbootstrap.com/docs/3.4/components/

选择 Getting started，选择一个模版 Carousel

创建 flask_bootstrap_demo.py

from flask import Flask, render_template
from flask_bootstrap import Bootstrap

# 创建 Flask 应用程序实例
app = Flask(__name__)
Bootstrap(app)

# 定义路由和视图函数
@app.route("/")
def index():
return render_template("bootstrap_index.html")

# 运行应用程序
if __name__ == '__main__':
app.run(debug=True, port=5055)

启动服务，即可看到一个有漂亮样式的组件。然后根据需求对页面元素进行修改即可。

更多元素定义可以在官方文档中进行查看。