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

三. 代码实例

相关推荐
_pass_2 天前
flask 框架的ORM 学习及应用
学习·flask·orm
南宫乘风2 天前
基于 Flask + APScheduler + MySQL 的自动报表系统设计
python·mysql·flask
B站计算机毕业设计之家3 天前
Python招聘数据分析可视化系统 Boss直聘数据 selenium爬虫 Flask框架 数据清洗(附源码)✅
爬虫·python·selenium·机器学习·数据分析·flask
程序员柳3 天前
基于深度学习技术实现染色质开放区域的预测与分析系统源代码+数据库,采用Flask + Vue3 实现前后端分离的植物染色质可及性预测系统
数据库·深度学习·flask
人工智能教学实践4 天前
Flask-SQLAlchemy 操作 SQLite 数据库示例
数据库·sqlite·flask
Anson Jiang4 天前
PyTorch轻松实现CV模型:零基础到实战
pytorch·python·django·flask·python开发
景彡先生4 天前
Python Flask详解:从入门到实战,轻量级Web框架的魅力
前端·python·flask
羊羊小栈4 天前
基于YOLO+多模态大模型+人脸识别+视频检索的智慧公安综合研判平台(vue+flask+AI算法)
vue.js·人工智能·yolo·flask·毕业设计·音视频·大作业
木土雨成小小测试员4 天前
简单创建一个flask项目
后端·python·flask
chinesegf5 天前
Docker篇6-项目app.py和flask_app.service配置和映射到docker中
docker·容器·flask