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

三. 代码实例

相关推荐
工业互联网专业18 小时前
基于Spark的共享单车数据存储系统的设计与实现_flask+spider
spark·flask·毕业设计·源码·课程设计·spider·共享单车
TechWayfarer18 小时前
IP精准定位服务接入实战:广告投放如何用位置数据做定向策略
python·网络协议·tcp/ip·flask
码界筑梦坊3 天前
282-基于Python的豆瓣音乐可视化分析推荐系统
开发语言·python·信息可视化·数据分析·flask·vue
jay神3 天前
基于 Python + Flask + Vue 的校内求职互助平台
前端·vue.js·后端·python·flask·毕业设计
weixin_BYSJ19873 天前
springboot旅游管理系统04470(附源码+开发文档+部署教程)
java·spring boot·python·算法·django·flask·旅游
编码者卢布3 天前
【Azure App Service】应用服务(Web App)里的 SNAT 端口 vs 出站连接数:到底是谁限制了谁?
flask·azure·web app
玄米乌龙茶1233 天前
Web 框架(FastAPI / Flask)核心概念
前端·flask·fastapi
weixin_BYSJ19873 天前
基于Django的非物质文化遗产管理系统设计与实现(源码 + 文档)98950
java·javascript·spring boot·python·django·flask·php
weixin_BYSJ19873 天前
springboot鹿邑县旅游网站99312(源码+文档)
java·javascript·spring boot·python·django·flask·php
石工记4 天前
CTO如何落地AI?从0到1的实战路径
人工智能·python·django·flask·numpy·pandas·pyqt