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

三. 代码实例

相关推荐
内存不泄露1 天前
基于 Spring Boot 的医院预约挂号系统(全端协同)设计与实现
java·vue.js·spring boot·python·flask
曲幽1 天前
FastAPI数据库实战:从SQLAlchemy原理到高效连接管理,告别性能瓶颈
python·sqlite·flask·fastapi·web·sqlalchemy·db
laufing2 天前
flask_restx 创建restful api
python·flask·restful
叫我:松哥2 天前
基于Flask+ECharts+Bootstrap构建的微博智能数据分析大屏
人工智能·python·信息可视化·数据分析·flask·bootstrap·echarts
叫我:松哥2 天前
基于Flask开发的智能招聘平台,集成了AI匹配引擎、数据预测分析和可视化展示功能
人工智能·后端·python·信息可视化·自然语言处理·flask·推荐算法
癫狂的兔子3 天前
【Python】【Flask】抽奖功能
开发语言·python·flask
万行3 天前
机器学习&第一章
人工智能·python·机器学习·flask·计算机组成原理
计算机徐师兄3 天前
Python基于Flask的广东旅游数据分析系统(附源码,文档说明)
python·flask·旅游数据分析·广东旅游数据分析系统·python广东数据分析系统·python广东旅游数据分析·python旅游数据分析系统
云和数据.ChenGuang3 天前
fastapi flask django区别
人工智能·python·django·flask·fastapi
hudawei9964 天前
Flask 与 FastAPI 对比分析
python·flask·fastapi