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

三. 代码实例

相关推荐
Ares-Wang11 小时前
flask 》》celery 异步任务
flask
KivenMitnick20 小时前
CialloVOL 1.2:便捷好用的轻量化内存取证分析平台
windows·python·安全·网络安全·flask·系统安全·安全威胁分析
Ares-Wang1 天前
flask 》》内置HTMLParser
后端·python·flask
软泡芙1 天前
【.NET】创建一个ai聊天应用
人工智能·flask·.net
计算机软件程序设计2 天前
Python Flask工程目录解读
python·flask·工程目录解读
Ares-Wang2 天前
Flask》》 Flask-OpenID 认证、 OpenID Connect (OIDC)
后端·python·flask
大龄程序员狗哥3 天前
第30篇:使用Flask部署你的第一个AI模型——打造简易Web API(项目实战)
前端·人工智能·flask
尘世壹俗人3 天前
知识点13---k8s存储持久化
容器·kubernetes·flask
源码之家3 天前
计算机毕业设计:Python股票智能分析预测平台 Flask框架 数据分析 可视化 机器学习 随机森林 大数据(建议收藏)✅
python·机器学习·数据分析·django·flask·课程设计
B站_计算机毕业设计之家3 天前
计算机毕业设计:Python股票投资辅助决策系统 django框架 request爬虫 协同过滤算法 数据分析 可视化 大数据 大模型(建议收藏)✅
爬虫·python·深度学习·算法·django·flask·课程设计