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

三. 代码实例

相关推荐
淮北4942 小时前
最简单的实验室资产管理系统,使用Flask,mysql,html(四、知识补充)
mysql·flask·html
Q_Q5110082858 小时前
python的保险业务管理与数据分析系统
开发语言·spring boot·python·django·flask·node.js·php
Kelaru1 天前
本地Qwen中医问诊小程序系统开发
python·ai·小程序·flask·project
野指针121381 天前
【使用Flask基于PaddleOCR3.0开发一个接口 调用时报错RuntimeError: std::exception】
python·flask
KENYCHEN奉孝1 天前
Flask3.1打造极简CMS系统
后端·python·flask
sohoAPI1 天前
Flask快速入门
后端·python·flask
开开心心_Every2 天前
全能视频处理工具介绍说明
开发语言·人工智能·django·pdf·flask·c#·音视频
亚力山大抵5 天前
实验五-Flask的简易登录系统
后端·python·flask
喜欢吃豆5 天前
目前最火的agent方向-A2A快速实战构建(二): AutoGen模型集成指南:从OpenAI到本地部署的全场景LLM解决方案
后端·python·深度学习·flask·大模型
亚力山大抵6 天前
实验六-使用PyMySQL数据存储的Flask登录系统-实验七-集成Flask-SocketIO的实时通信系统
后端·python·flask