16- flask-bootstrap模板的使用

news2024/11/24 16:12:43

Flask 中支持 flask-bootstrap模板 和 bootstrap-flask模板

# 不使用: 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

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

三. 代码实例

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/939650.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

yolov8 No labels found in /path/train.cache解决

在用yolov8中ultralytics/datasets/coco.yaml训练时出现了no labels found in train2017.cache的错误。 model.train(data"ultralytics/datasets/coco.yaml",epochs100,imgsz640,batch16,save_period10,)下面查找一个这个问题出现的原因。 这里并没有提前下载coco数…

VM安装Windows11

VM下载地址&#xff1a; https://www.vmware.com/cn/products/workstation-pro/workstation-pro-evaluation.html Windows11镜像下载地址&#xff1a; https://www.microsoft.com/zh-cn/software-download/windows11/ 选择刚下载的Windows11镜像 更改安装目录 设置密码 …

MySQL索引,事务和存储引擎

一、索引 1、索引的概念 ●索引是一个排序的列表&#xff0c;在这个列表中存储着索引的值和包含这个值的数据所在行的物理地址&#xff08;类似于C语言的链表通过指针指向数据记录的内存地址&#xff09;。 ●使用索引后可以不用扫描全表来定位某行的数据&#xff0c;而是先…

ASIC-WORLD Verilog(13)状态机FSM

写在前面 在自己准备写一些简单的verilog教程之前&#xff0c;参考了许多资料----Asic-World网站的这套verilog教程即是其一。这套教程写得极好&#xff0c;奈何没有中文&#xff0c;在下只好斗胆翻译过来&#xff08;加点自己的理解&#xff09;分享给大家。 这是网站原文&…

MySQL 8.1.0 推出 InnoDB Cluster 只读副本

全面了解 8.1.0 版本新功能&#xff1a;InnoDB Cluster 只读副本的相关操作。 作者&#xff1a;Miguel Arajo 高级软件工程师 / Kenny Gryp MySQL 产品总监 本文来源&#xff1a;Oracle MySQL 官网博客 * 爱可生开源社区出品。 前言 MySQL 的第一个 Innovation 版本 8.1.0 已…

Pyqt5开发实战记录

入职以来第一个开发项目&#xff1a; 1、如何给Qlabel加边框&#xff1a;右键label对象&#xff0c;选择“改变样式表”输入一下代码&#xff1a; border: 1px solid black;2、如何让垂直布局中button大小不发生变化&#xff1a;其实很简单&#xff0c;只需要设置button的最大…

(视频教程)单细胞转录组多组差异基因分析及可视化函数

很久以前&#xff0c;我们发布过一个单细胞多组差异基因可视化的方法。跟着Cell学单细胞转录组分析(八):单细胞转录组差异基因分析及多组结果可视化。主要复现参考的是这篇发表在《Cell》上的文章。可以将多个组的差异结果展示出来。 &#xff08;reference&#xff1a;A Spati…

夜莺项目发布 v6.1.0 版本,增强可观测性数据串联

大家好&#xff0c;夜莺项目发布 v6.1.0 版本&#xff0c;这是一个中版本迭代&#xff0c;不止是 bugfix 了&#xff0c;而是引入了既有功能的增强。具体增强了什么功能&#xff0c;下面一一介绍。 1. 增强可观测性数据串联 从 v6.1.0 开始&#xff0c;对日志索引模式做了增强…

TS-小技巧-持续更新

文章目录 一、类型小技巧1. Partial 的应用2. Pick 的应用3. Parameters 的应用4. ReturnType 的应用 一、类型小技巧 1. Partial 的应用 interface User {name: string;age: number;address: string}获取接口User的所有属性&#xff0c;且不确定属性是否全部需要: type UserP…

ceph peering机制-状态机

本章介绍ceph中比较复杂的模块&#xff1a; Peering机制。该过程保障PG内各个副本之间数据的一致性&#xff0c;并实现PG的各种状态的维护和转换。本章首先介绍boost库的statechart状态机基本知识&#xff0c;Ceph使用它来管理PG的状态转换。其次介绍PG的创建过程以及相应的状…

Element-Ul中的Mess消息不能正常显示

项目场景 注册 使用Element-Ul中的表单&#xff0c;Mess消息不能正常显示 预计效果 Part1 问题1 给按钮添加Mess消息提示,有反应&#xff0c;但不是预期反应&#xff0c;就没看到页面上方的提示框&#xff0c;就是滚动条一直上下动 后来发现是提示框都在下面出现了 <scr…

IdentityServer密码长度超长会导致跳转到登录页

应用系统项目的安全要求越来越高&#xff0c;基本都是采取https等加密证书传输&#xff0c;无法使用https的&#xff0c;也是要求不能明文传输内容&#xff0c;因此做一些等保要求&#xff0c;密码需要加密后才能传输给服务端&#xff0c;所以前端会采取一些密码手段&#xff0…

C# Linq源码分析之Take(四)

概要 本文主要对Take的优化方法进行源码分析&#xff0c;分析Take在配合Select&#xff0c;Where等常用的Linq扩展方法使用时候&#xff0c;如何实现优化处理。 本文涉及到Select, Where和Take和三个方法的源码分析&#xff0c;其中Select, Where, Take更详尽的源码分析&…

数据结构--树4.2.2(二叉树--遍历)

目录 一、二叉树的建立 二、二叉树的遍历算法 一、二叉树的建立 CreateBitree(Bitree *t){char c;scanf("%c",&c);if( c){*t NULL;}else{*t(Bitnode*)malloc(sizeof(Bitnode));(*t)->data c;CreateBitree(&(*t)->lchild);CreateBitree(&(*t)-&…

机器学习——KNN回归

1、前提知识&#xff1a; 回归&#xff1a;可以理解为拟合&#xff0c;就是根据训练数据的趋势&#xff0c;对输入数据进行预测。KNN回归&#xff1a;是一种有监督学习&#xff0c;因为需要提供目标数据&#xff08;target&#xff09; 2、案例&#xff1a; 用KNN回归拟合sin…

爬虫异常处理之如何处理连接丢失和数据存储异常

在爬虫开发过程中&#xff0c;我们可能会遇到各种异常情况&#xff0c;如连接丢失、数据存储异常等。本文将介绍如何处理这些异常&#xff0c;并提供具体的解决代码。我们将以Python语言为例&#xff0c;使用requests库进行网络请求和sqlite3库进行数据存储。 1. 处理连接丢失 …

高忆管理:新手炒股入门零基础学?

炒股是一些人为了取得高额回报和更好的财政自由而进行的活动。但对许多新手而言&#xff0c;这是一个全新的领域&#xff0c;需求掌握许多根底常识才能够开始加入炒股商场。本文将为零根底的新手炒股入门供给一些主张和技巧&#xff1a; 一、学习根底常识 关于炒股入门的新手而…

Android 绘制之文字测量

drawText() 绘制文字 绘制进度条:paint.strokeCap Paint.CAP.RONUD 线条两边样式 设置文字字体:paint.typeFace Resources.Compat.getFont(context,font) 设置加粗 paint.isFakeBoldText 设置居中: paint.setTextAlign Paint.Align.CENTER //居中, 并不是真正的居中 往…

项目经理——任劳任怨的“背锅侠”

很多人可能觉得项目经理在工作中只需要动动嘴皮子&#xff0c;然后跟其他关系人搞好关系就行了&#xff0c;但是其实他们负责整个项目的规划、执行和交付&#xff0c;是整个项目顺利进行的关键。然而&#xff0c;在项目中面临着各种各样的挑战和压力。那么&#xff0c;作为项目…

[ES]安装es、kibana、ik分词器

一、安装es和kibana 1、创建一个网络&#xff0c;网络内的框架(eskibana)互联 docker network create es-net 2、下载es和kibana docker pull elasticsearch:7.12.1 docker pull kibana:7.12.1 3、运行docker命令部署单点eskibana&#xff08;用来操作es&#xff09; doc…