16- flask-bootstrap模板的使用

Flask 中支持 flask-bootstrap模板 和 bootstrap-flask模板

python 复制代码
# 不使用: bootstrap-flask
# pip install bootstrap-flask==1.3.1 # 支持bootstrap 4
# pip install flask-bootstrap # 支持bootstrap3

# 中文文档:
        https://flask-bootstrap-zh.readthedocs.io/zh/latest/
# 样式文档:
        https://v3.bootcss.com/getting-started/#download

一. flask-bootstrap 模板使用

(1). 下载: pip install flask-bootstrap

(2). 在 ext / init.py中 创建bootstrap对象

(3). 在 apps/init.py中 初始化bootstrap

二. flask-bootstrap内置block

javascript 复制代码
// bootstrap内置的block
{% block title %}标题{% endblock %}
{% block navbar %}导航栏{% endblock %}
{% block content %}中心内容{% endblock %}
{% block styles %}样式{% endblock %}
{% block srcipts %}脚本{% endblock %}
{% block head %}头{% endblock %}
{% block body %}体{% endblock %}


// styles 和 scripts  需要继承父模板
// 添加css脚本
{% block styles %}
        {{ super() }} // 继承腹肌样式
        <style>  //定义自己样式
            ...
        </style>
{% endblock %}

// 添加js脚本
{% block scripts %}
        {{ super() }}
        <script>
            ...
        </script>
{% endblock %}

三. 代码实例

相关推荐
nueroamazing1 天前
PPT-EA:PPT自动生成器
vue.js·python·语言模型·flask·大模型·项目·ppt
麦麦大数据1 天前
F024 CNN+vue+flask电影推荐系统vue+python+mysql+CNN实现
vue.js·python·cnn·flask·推荐算法
dlraba8022 天前
PyTorch 模型部署实战:用 Flask 搭图像分类 API
pytorch·分类·flask
B站_计算机毕业设计之家2 天前
大数据实战:Python+Flask 汽车数据分析可视化系统(爬虫+线性回归预测+推荐 源码+文档)✅
大数据·python·数据分析·flask·汽车·线性回归·预测
Access开发易登软件2 天前
Access调用Azure翻译:轻松实现系统多语言切换
后端·python·低代码·flask·vba·access·access开发
羊羊小栈2 天前
基于「多模态大模型 + BGE向量检索增强RAG」的新能源汽车故障诊断智能问答系统(vue+flask+AI算法)
vue.js·人工智能·算法·flask·汽车·毕业设计·大作业
麦麦大数据3 天前
F024 vue+flask电影知识图谱推荐系统vue+neo4j +python实现
vue.js·python·flask·知识图谱·推荐算法·电影推荐
总有刁民想爱朕ha4 天前
Python自动化从入门到实战(17)python flask框架 +Html+Css开发一个实用的在线奖状生成器
python·flask·自动化·在线奖状生成器
U_U20465 天前
[Linux]深入解析Systemd服务单元从配置到故障排除的完整指南
flask
B站_计算机毕业设计之家5 天前
机器学习实战项目:Python+Flask 汽车销量分析可视化系统(requests爬车主之家+可视化 源码+文档)✅
人工智能·python·机器学习·数据分析·flask·汽车·可视化