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

三. 代码实例

相关推荐
TechWayfarer8 天前
苏超赛事网站安全防护:WAF、DDoS与仿冒页面如何联动治理
网络·python·安全·flask·ddos
vortex58 天前
新手前后端开发学习指南:从Flask框架到全栈实践
后端·python·flask
叫我:松哥8 天前
基于Python flask的中学可控智能命题系统设计与实现,整合遗传算法、DeepSeek 大模型及数据库技术构建一体化应用
数据库·人工智能·python·算法·机器学习·flask·遗传算法
chushiyunen9 天前
langchain4j笔记、tools
笔记·python·flask
叫我:松哥9 天前
基于机器学习的中文文本抑郁症风险检测系统,包括NLP与传统机器学习的抑郁症识别,准确率92%
人工智能·深度学习·机器学习·自然语言处理·flask·nlp·bootstrap
TechWayfarer9 天前
查IP归属地接入实战:保险理赔如何做动态风险监控与预警
网络·python·tcp/ip·安全·flask
2601_961875249 天前
花生十三资源盘|电子版|全科
python·django·flask·virtualenv·scikit-learn·pygame·tornado
叫我:松哥9 天前
基于Flask的在线考试刷题系统设计与实现,集智能练习、过程追踪、深度分析与个性化引导
数据库·人工智能·后端·python·flask·boostrap
abcy07121311 天前
flask hdfs 异步上传图文教程csdn
python·flask
abcy07121311 天前
flask celery hdfs 异步上传
python·hdfs·flask