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

三. 代码实例

相关推荐
空影星1 天前
高效追踪电脑使用时间,Tockler助你优化时间管理
python·django·flask
Q_Q5110082851 天前
python+django/flask的结合人脸识别和实名认证的校园论坛系统
spring boot·python·django·flask·node.js·php
Q_Q5110082851 天前
python+django/flask的选课系统与课程评价整合系统
spring boot·python·django·flask·node.js·php
charlie1145141911 天前
勇闯前后端Week2:后端基础——Flask API速览
笔记·后端·python·学习·flask·教程
战南诚2 天前
flask之“应用上下文,请求上下文”
python·flask
z***3352 天前
SQL Server2022版+SSMS安装教程(保姆级)
后端·python·flask
老刘莱国瑞2 天前
前后端开发规范 (React + Flask + MongoDB)
mongodb·react.js·flask
桧***攮3 天前
ReactAPI开发
arm开发·flask·openshiftt
顾安r4 天前
11.22 脚本打包APP 排错指南
linux·服务器·开发语言·前端·flask
Warren984 天前
软件测试常见面试题
linux·python·django·flask·virtualenv·pygame·tornado