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

三. 代码实例

相关推荐
源码之家17 小时前
计算机毕业设计:Python汽车销量智能分析与预测系统 Flask框架 scikit-learn 可视化 requests爬虫 AI 大模型(建议收藏)✅
人工智能·hadoop·python·算法·数据分析·flask·课程设计
tryCbest18 小时前
Python之Falsk开发框架(第四篇)- Flask 知识总结与完整博客系统实战
开发语言·python·flask
chenglin01619 小时前
Semantic Kernel 内核详解
后端·python·flask
B站_计算机毕业设计之家19 小时前
计算机毕业设计:Python城市地铁网络可视化分析系统 Flask框架 数据分析 可视化 高德地图 数据挖掘 机器学习 爬虫(建议收藏)✅
网络·python·信息可视化·数据挖掘·flask·课程设计·美食
源码之家19 小时前
计算机毕业设计:Python地铁数据可视化分析系统 Flask框架 数据分析 可视化 高德地图 数据挖掘 机器学习 爬虫(建议收藏)✅
大数据·python·信息可视化·数据挖掘·flask·汽车·课程设计
源码之家2 天前
计算机毕业设计:Python二手车数据分析推荐系统 Flask框架 requests爬虫 协同过滤推荐算法 可视化 汽车之家 机器学习(建议收藏)✅
大数据·python·机器学习·数据分析·flask·汽车·课程设计
geyasi3 天前
【Flask】四、flask连接并操作数据库
数据库·python·flask
芜湖xin3 天前
【解决Error】pip安装Flask失败
python·flask·pip
源码之家3 天前
计算机毕业设计:汽车数据可视化分析系统 Django框架 Scrapy爬虫 可视化 数据分析 大数据 大模型 机器学习(建议收藏)✅
大数据·python·信息可视化·flask·汽车·课程设计·美食
源码之家3 天前
计算机毕业设计:基于Python的二手车数据分析可视化系统 Flask框架 可视化 时间序列预测算法 逻辑回归 requests 爬虫 大数据(建议收藏)✅
大数据·hadoop·python·算法·数据分析·flask·课程设计