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

三. 代码实例

相关推荐
WXG10113 小时前
【Flask-9】加载视频流
后端·python·flask
牢七18 小时前
11111
flask
代码or搬砖1 天前
flask与vue实现通过websocket通信
vue.js·websocket·flask
曲幽1 天前
Flask路由入门指南:从基础定义到优先级与动态路由转换器
python·flask·web·route·path
程序媛徐师姐1 天前
Python基于Flask的mooc课程情感分类系统【附源码、文档说明】
python·flask·python慕课课程情感分类·mooc课程情感分类系统·慕课课程情感分类系统·python课程情感分类系统·python课程情感分类
森焱森1 天前
当八字命理遇上软件开发:一张“流派架构图”+ 实战爬虫指南
驱动开发·爬虫·python·flask·pygame
闲人编程2 天前
测试驱动开发与API测试:构建可靠的后端服务
驱动开发·python·flask·api·tdd·codecapsule
清蒸鳜鱼2 天前
腾讯云域名配置HTTPS完整指南:从0到1部署Flask应用
https·flask·腾讯云
Hooray113 天前
后端_Flask学习笔记
笔记·后端·python·学习·flask
速易达网络3 天前
Python全栈学习路径:从零基础到人工智能实战
python·flask