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

三. 代码实例

相关推荐
AI周红伟1 天前
周红伟:智能体实战,通过使用 Flask 的 REST API 在 Python 中部署 PyTorch
后端·python·flask
ShoreKiten2 天前
ctfshowweb361--一道题从0入门SSTI模板注入
web安全·flask·ssti·ctfshow
kyle~3 天前
Python---Flask 轻量级Web框架
开发语言·python·flask
xdpcxq10294 天前
Flask - 常见应用部署方案
后端·python·flask
群峦叠嶂5 天前
我做了一个基于知识图谱的图书推荐系统,踩了不少坑
flask·推荐算法
花酒锄作田5 天前
Flask - 常见应用部署方案
python·flask
编码者卢布5 天前
【Azure APIM】为何APIM自建网关中的cache-lookup-value策略无法正常工作?
microsoft·flask·azure
橙露5 天前
全栈开发入门:Python Flask+Vue3 搭建前后端分离的博客系统
开发语言·python·flask
xuzhiqiang07245 天前
【Flask】四、flask连接并操作数据库
数据库·python·flask
愈努力俞幸运6 天前
第3章模板
flask