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

三. 代码实例

相关推荐
程序员的世界你不懂8 小时前
【Flask】实现一个前后端一体的项目-脚手架
后端·python·flask
安岁的笔记本1 天前
Flask/Django 生产部署:Gunicorn vs Nginx,Windows 与 Linux 实战指引
django·flask·gunicorn
Q_Q19632884752 天前
python+springboot大学生心理测评与分析系统 心理问卷测试 自动评分分析 可视化反馈系统
开发语言·spring boot·python·django·flask·node.js·php
Q_Q5110082852 天前
springboot+python+uniapp基于微信小程序的旅游服务系统景点信息展示 路线推荐 在线预约 评论互动系统
spring boot·python·微信小程序·django·flask·uni-app
EvanSun__3 天前
Flask 框架引入
后端·python·flask
神仙别闹3 天前
基于 Python + redis + flask 的在线聊天室
redis·python·flask
念念01073 天前
Flask 博客系统(Flask Blog System)
后端·python·flask
Miya_Ye3 天前
Azure AI-102 自学记录
microsoft·flask·azure
困鲲鲲3 天前
Flask 核心基础:从 路由装饰器 到 __name__ 变量 的底层逻辑解析
python·flask
闲人编程3 天前
Flask 前后端分离架构实现支付宝电脑网站支付功能
python·架构·flask·支付宝·前后端·网站支付·apl