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

三. 代码实例

相关推荐
ZHOU_WUYI7 小时前
Flask RESTful 示例
python·flask·restful
面朝大海,春不暖,花不开7 小时前
Spring AI与Spring Modulith核心技术解析
人工智能·spring·flask
Blossom.1188 小时前
基于区块链的供应链溯源系统:构建与实践
人工智能·python·深度学习·机器学习·计算机视觉·flask·区块链
RunsenLIu9 小时前
基于Flask前后端分离智慧安防小区系统
后端·python·flask
伍六星1 天前
Flask和Django,你怎么选?
数据库·django·flask
不争先.1 天前
coze平台创建智能体,关于智能体后端接入的问题
pycharm·flask·apifox
月疯1 天前
阿里云Ubuntu 22.04 64位搭建Flask流程(亲测)
linux·ubuntu·flask
白嫖不白嫖1 天前
Django、Flask、FastAPI与Jupyter对比
django·flask·fastapi
hshpy1 天前
LangChain in java
java·langchain·flask
Jooolin2 天前
Flask 入门到实战(2):用 SQLAlchemy 优雅操作数据库
后端·flask·ai编程