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

三. 代码实例

相关推荐
神仙别闹9 小时前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
霍格沃兹测试开发学社测试人社区11 小时前
软件测试学习笔记丨Flask操作数据库-数据库和表的管理
软件测试·笔记·测试开发·学习·flask
工业互联网专业1 天前
Python毕业设计选题:基于Hadoop的租房数据分析系统的设计与实现
vue.js·hadoop·python·flask·毕业设计·源码·课程设计
霍格沃兹测试开发学社测试人社区4 天前
软件测试学习笔记丨Flask操作数据库-一对多
软件测试·笔记·测试开发·学习·flask
程序媛-徐师姐5 天前
Python毕业设计-基于 Python flask 的前程无忧招聘可视化系统,Python大数据招聘爬虫可视化分析
python·flask·课程设计·python招聘可视化·python招聘数据分析
FightingLee1997x6 天前
Python Flask内存泄漏分析定位
开发语言·python·flask
花酒锄作田6 天前
[python]Gunicorn加持下的Flask性能测试
python·nginx·golang·flask·fastapi
工业互联网专业7 天前
Python毕业设计选题:基于Python的无人超市管理系统-flask+vue
vue.js·python·flask·毕业设计·源码·课程设计·无人超市
霍格沃兹测试开发学社测试人社区7 天前
软件测试学习笔记丨Flask操作数据库-对象与数据模型
软件测试·笔记·测试开发·学习·flask
奈何不吃鱼7 天前
【Flask】四、flask连接并操作数据库
数据库·python·flask·python web