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

三. 代码实例

相关推荐
2601_962099087 小时前
python flask sqlalchemy连接数据库流程介绍
数据库·python·flask·教程·sqlalchemy
烂蜻蜓7 小时前
Flask入门教程(附录):模板渲染API——Jinja2集成全解析
后端·python·flask
千里码aicood21 小时前
Flask-基于图神经网络的谣言检测研究
人工智能·神经网络·flask
烂蜻蜓1 天前
Flask入门教程(三十一):实用函数与类API——全局工具函数速查
后端·python·flask
千里码aicood1 天前
flask-基于注意力机制的异常流量检测与自动防御系统
后端·python·flask
2601_962283881 天前
Python 开发框架:Django、Flask和FastAPI
python·django·flask·fastapi·web开发
Looooking1 天前
Python 之 Flask 的全局变量 g
后端·python·flask
Dream-Y.ocean2 天前
基于具身交互智能数字人,我用Flask搭了一个AI教学平台:课代表AI全流程实战
人工智能·flask·交互
零域码客2 天前
一文掌握 jQuery + Flask 全栈核心知识点(前端交互 + 后端接口 + 前后端联调)
前端·python·ajax·flask·jquery·前后端联调·web全栈
minhuan2 天前
基于Playwright数据采集,大模型对接Flask+SQLite,平滑升级向量库与分布式微服务26.5
人工智能·flask·大模型应用·大模型业务集成·微服务架构演进