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

三. 代码实例

相关推荐
码界筑梦坊11 小时前
基于Flask的广西高校舆情分析系统的设计与实现
后端·python·信息可视化·flask·毕业设计
带娃的IT创业者11 小时前
Python实战进阶 No1: RESTful API - 基于Flask的实例说明
python·程序人生·flask·restful·改行学it
计算机徐师兄16 小时前
Python基于Flask的豆瓣电影数据分析可视化系统(附源码,文档说明)
爬虫·python·flask·豆瓣电影·豆瓣电影数据分析可视化系统·豆瓣电影数据分析·python豆瓣电影数据分析
蜗牛去旅行吧1 天前
使用 Flask 和 pdfkit 生成带透明 PNG 盖章的 PDF 并上传到阿里云 OSS
阿里云·pdf·flask
java1234_小锋1 天前
一周学会Flask3 Python Web开发-Debug模式开启
flask·python web·flask3
codefan※1 天前
在anaconda环境中构建flask项目的exe文件
python·flask·anaconda·pyinstaller·打包部署
dal118网工任子仪2 天前
138,【5】buuctf web [RootersCTF2019]I_<3_Flask
后端·python·flask
m0_548514772 天前
Python大数据可视化:基于Python的王者荣耀战队的数据分析系统设计与实现_flask+hadoop+spider
hadoop·python·flask
流烟默3 天前
Flask中获取请求参数的一些方式总结
后端·python·flask
程序猿小柒3 天前
18.Python实战:实现年会抽奖系统
python·flask