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

三. 代码实例

相关推荐
工业互联网专业10 小时前
基于Python的黑龙江旅游景点数据分析系统的实现_flask+spider
python·flask·vue·毕业设计·源码·课程设计·spider
大叔_爱编程11 小时前
基于协同过滤算法的理财产品推荐系统-flask
python·flask·vue·毕业设计·源码·课程设计·协同过滤
阿梦Anmory11 小时前
保姆级教程:Flask应用实现后台常驻运行(Linux服务器)
linux·服务器·flask
紫丁香12 小时前
Dify源码深度剖析3
后端·python·ai·flask·fastapi
小狗丹尼40014 小时前
JSON 基础认知、数据转换与 Flask 前后端交互全解
python·flask·json
紫丁香1 天前
AutoGen详解一
后端·python·flask
Azure DevOps1 天前
Azure DevOps:应用远程MCP服务器,提升工作效率
服务器·microsoft·flask·azure·devops
迅易科技1 天前
在 Azure 容器化部署 OpenClaw:从零到生产环境实战指南
microsoft·flask·azure
龙腾AI白云2 天前
数字孪生国内外发展现状
数据分析·flask·virtualenv·fastapi
YFLICKERH2 天前
【Python-Web后端开发框架】Flask | Django | FastAPI | Tornado 选型与 使用 | 特性
前端·python·flask