Flask 框架集成Bootstrap

news2024/11/23 22:00:50

前面学习了 Flask 框架的基本用法，以及模板引擎 Jinja2，按理说可以开始自己的 Web 之旅了，不过在启程之前，还有个重要的武器需要了解一下，就是著名的 Bootstrap 框架和 Flask 的结合，这将大大提高开发 Web 应用的效率。

简介

Bootstrap 是 Twitter 公司的设计师 Mark Otto 和 Jacob Thornton 开发的 Web 项目开发框架，简洁、直观、强悍，使得 Web 开发更加快捷，一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目，这么好的开发框架 Flask 一定少不了。

期初在 Flask 的扩展包中有 flask-bootstrap, 不过后来更新很少，后来 greyli 基于 flask-bootstrap 开发了 bootstrap-flask 扩展模块，不经支持最新的 Bootstrap4， 还基于 Jinjia2 模板引擎的宏，做了更多的扩展。值得一提的是 greyli 是个中国帅小伙，能在文章后面的参考链接中找到他。

安装

使用 pip 安装：

pip install bootstrap-flask

如果之前安装过 flask-bootstrap, 需要将其卸载掉，不然两者会有冲突，如果您遇到错误提示: jinja2.exceptions.UndefinedError: 'bootstrap' is undefined，很大可能就是这个问题

小试牛刀

导入模块

创建一个 flaskbootstrap.py 程序文件，引入模块 flask_bootstrap, 您没看错，引入的并不是 bootstrap-flask：

from flask_bootstrap import Bootstrap

注意：我在做示例时，将代码文件名定义为 flask_bootstrap.py, 运行时提示 无法导入 Bootstrap 模块，这是因为文件名与模块 flask_bootstrap 冲突了

然后对 Flask 应用初始化：

app = Flask(__name__) # 创建一个 Flask 应用bootstrap = Bootstrap(app) # 为应用初始化 bootstrap

给应用加载 bootstrap 主要是给应用加上 Jinja2 的扩展，下面的工作就是写模板文件。

创建基础模板

bootstrap-flask 虽然基于 flask-bootstrap，但是却没有提供默认的模板文件，期望在后续版本中能有吧，不过自己写也不麻烦，我们在文件夹 templates 中创建一个 base.html，内容是：

<!-- 引入导航模块的宏 render_nav_item -->{% from 'bootstrap/nav.html' import render_nav_item %}<!-- 下面是正常的 Bootstrap 页面代码，看起来很复杂，不过可以从官网上拷贝 --><!DOCTYPE html><html lang="cn">    <head>        <meta charset="utf-8">        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">        <title>{% block title %} Flask Bootstrap {% endblock %}</title> <!-- 定义标题块 -->        <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">        {{ bootstrap.load_css() }}  <!-- 动态加载 Bootstrap 样式 -->    </head>    <body>    <main class="container">        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">            <div class="navbar-header">                <a class="navbar-brand" href="#">Python100</a>            </div>            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">                <span class="navbar-toggler-icon"></span>            </button>            <div class="collapse navbar-collapse" id="navbarSupportedContent">                <ul class="navbar-nav mr-auto">                    <!-- 利用宏 render_nav_item 创建菜单 -->                    {{ render_nav_item('index', '首页', use_li=True) }}                </ul>            </div>        </nav>        {% block content %}  <!-- 定义内容块 -->        <h1> Hello Flask Bootstrap! </h1>        {% endblock %}        <footer class="text-center">            {% block footer %} <!-- 定义页脚块 -->                <small> © 2019 <a href="http://justdopython.com" title="python 100天">Python 技术</a>                </small>            {% endblock %}        </footer>    </main>    <!-- 动态加载 Bootstrap js 脚本 -->    {{ bootstrap.load_js() }}    </body></html>

是不是感觉很头大，不过是代码多了些，结构很其实很简单，大部分代码是 Bootstrap 提供的基本框架代码，然后加入了一些 bootstrap-flask 的扩展。我们来分析一下：

  • 首先引入导航元素宏 render_nav_item，因为在后面制作导航菜单时要用

  • 然后是大段的 Bootstrap 框架代码

  • 定义块，用来在继承 base.html 的子模板中做替换，其中有 标题、内容和页尾

  • 动态加载 Bootstrap 样式和脚本，通过 bootstrap.load_css() 和 bootstrap.load_js()

  • 在导航菜单的位置，使用宏 render_nav_item 创建一个首页菜单

这样就完成基础模板的定义，稍后会对 render_nav_item、bootstrap.load_css()和 bootstrap.load_js() 做解释。

创建页面模板

有了基础模板，就可以做具体的页面模板了，先做首页 index.html，代码如下:

{% extends "base.html" %} <!-- 继承基础模板 -->
{% block content %} <!-- 替换页面内容 --><h1> Hello Flask Bootstrap </h1>{% endblock %}

是不是简洁多了？下面在 flaskbootstrap.py 中加上首页的视图函数:​​​​​​​

@app.route('/')def index():    return render_template('index.html')

启动

如果一切顺利，访问 localhost:5000 就能看到如下效果:

图片

首页效果

调整浏览器页面大小，可以看到页面自适应效果，是不是很神奇。接下来详细说明一下 bootstrap-flask 模块

资源助手

在小试牛刀中，能看到对 Bootstrap 样式和脚本引用的方法 bootstrap.load_css()和 bootstrap.load_js()，默认情况下会自动从 Bootstrap 的 CDN 上引用最新版的 Bootstrap 资源，例如: https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css，这样就方便了开发者对 Bootstrap 资源的引用和升级。

使用本地资源

如果想要从其他位置或者本地引用资源，只要在给应用初始化完 Bootstrap 之后，将应用的 BOOTSTRAP_SERVE_LOCAL 属性设置为 True 就好了:​​​​​​​

app = Flask(__name__) # 创建一个 Flask 应用bootstrap = Bootstrap(app) # 为应用初始化 bootstrapapp.config['BOOTSTRAP_SERVE_LOCAL'] = True  # 设置为使用本地资源

本地资源放在 static 目录下(这个目录是 Flask 框架默认的静态资源目录)，Bootstrap 本地资源放置如下:

图片

Bootstrap 资源

bootstrap.load_css()

加载 Bootstrap 样式资源， 参数:

  • version，指定 Bootstrap 样式版本号，默认值为 4.3.1，本地资源无效

bootstrap.load_js()

加载 Bootstrap 脚本资源

参数：

  • version，指定 Bootstrap 脚本版本号，默认为 4.3.1，本地资源无效

  • jquery_version，指定 JQuery 版本号，默认为 3.3.1，本地资源无效

  • popper_version，指定 Popper 版本号，默认为 1.14.0，本地资源无效

  • with_jquery，是否加载 JQuery， 默认为 True

  • with_popper，是否加载 Popper, 默认为 True

宏

bootstrap-flask 主要的改进是加入了很多方法是用的宏，让对页面效果的编辑像写逻辑代码一样，并在宏中还对所处环境信息进行了判断，比如菜单是否要激活，分页控件动态效果等等，下面介绍几个典型的宏

render_nav_item()

生成一个导航菜单

参数:

  • endpoint，路径点，可以直接写视图函数名

  • text，标题

代码示例:

{% from 'bootstrap/nav.html' import render_nav_item %}<nav class="navbar navbar-expand-lg navbar-light bg-light">    <div class="navbar-nav mr-auto">        {{ render_nav_item('index', 'Home') }}        {{ render_nav_item('explore', 'Explore') }}        {{ render_nav_item('about', 'About') }}    </div></nav>

render_breadcrumb_item()

面包屑导航条 参数:

  • endpoint，路径点，可以直接写视图函数名

  • text，标题

代码示例:

{% from 'bootstrap/nav.html' import render_breadcrumb_item %}<nav aria-label="breadcrumb">    <ol class="breadcrumb">        {{ render_breadcrumb_item('home', 'Home') }}        {{ render_breadcrumb_item('users', 'Users') }}        {{ render_breadcrumb_item('posts', 'Posts') }}        {{ render_breadcrumb_item('comments', 'Comments') }}    </ol></nav>

render_static()

静态资源引用，例如引用 css 、js 或者 图标

参数:

  • type 资源类型，可以是 css 或 js 或 icon

  • filename_or_url 资源路径，文件名 或者 参数 local 为 False 时的远程 url

  • local 是否本地资源，默认为 True

代码示例:

{% from 'bootstrap/utils.html' import render_static %}{{ render_static('css', 'style.css') }}

其他宏

还有有些宏很有用，例如 表单(form)相关的，还有分页相关的，不过这些会涉及到其他 Flask 扩展模块，我们会在介绍 表单 和 数据库 的章节中做进一步学习，如果您有兴趣，可以浏览参考链接中的内容。

总结

这篇文章简单介绍了 Flask 框架中如何使用 Bootstrap 扩展，从一个简单的示例开始，讲解了基于 Jinja2 模板引擎的 bootstrap-flask 模块的使用，其中包括资源助手 bootstrap.load_css() 和 bootstrap.load_css() ，以及一些基本的宏的用法，在参考代码中有较为完整的例子，您可以作为参考。在后面的文章中将会陆续介绍 表单 和 数据库 的使用，敬请期待。

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

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

相关文章

【ROS】Ubuntu18.04安装Ros

【ROS】Ubuntu18.04安装Ros

Ubuntu18.04安装Ros 引言1 ROS安装&#xff08;一键式&#xff09;2 正常安装2.1 添加ROS软件源2.2 添加公钥2.3 更新2.4 安装ros2.5 初始化 rosdep2.6 设置环境2.7 安装rosinstall,便利的工具2.8 检验 3 rviz将bag数据可视化为点云3.1 打开ROS和rviz软件3.2 配置rviz软件可视化…
阅读更多...
gpu-manager安装及测试

gpu-manager安装及测试

提示&#xff1a;GPU-manager安装为主部分内容做了升级开箱即用&#xff0c;有用请点收藏❤抱拳 文章目录 前言一、约束条件二、使用步骤1.下载镜像1.1 查看当前虚拟机的驱动类型&#xff1a; 2.部署gpu-manager3.部署gpu-admission4.修改kube-scheduler.yaml![在这里插入图片描…
阅读更多...
Web Server市场占有率调查

Web Server市场占有率调查

目录 一、理论 1.Web Server市场占有率调查 一、理论 1.Web Server市场占有率调查 &#xff08;1&#xff09;netcraft ①查询 每月netcraft公司都会出一次调查报告 netcraft官方&#xff1a;Netcraft | Leader in Phishing Detection, Cybercrime Disruption and Websi…
阅读更多...
Samba（二）

Samba（二）

问题 Rocky Linux使用smbclient访问win11的共享文件时提示 Error NT_STATUS_IO_TIMEOUT 分析 通过测试&#xff0c;发现关闭windows公用网络防火墙时&#xff0c;可正常显示服务器端所分享出来的所有资源&#xff1b;进一步发现单独放行防火墙进站规则中的文件和打印机共享&a…
阅读更多...
B树的插入与删除过程

B树的插入与删除过程

B树的插入 原树&#xff1a; 插入key后&#xff0c;若导致原节点关键字数超过上限&#xff0c;则从中间位置&#xff08; ⌈ m 2 ⌉ \lceil\frac{m}{2}\rceil ⌈2m​⌉&#xff09;将关键字分成两部分&#xff0c;左部分包含的关键字放在原节点中&#xff0c;右部分包含的关键…
阅读更多...
面试题：说说vue2的生命周期函数？说说vue3的生命周期函数？说说vue2和vue3的生命周期函数对比？

面试题：说说vue2的生命周期函数？说说vue3的生命周期函数？说说vue2和vue3的生命周期函数对比？

说说vue2的生命周期函数&#xff1f;说说vue3的生命周期函数&#xff1f;说说vue2和vue3的生命周期函数对比&#xff1f; 一、说说vue2的生命周期函数1.1 vue生命周期分为四个阶段、8个钩子1.1.1 beforeCreate 和 created 初始化阶段1.1.2 beforeMount 和 mounted 挂载阶段1.1.…
阅读更多...
利用XLL文件投递Qbot银行木马的钓鱼活动分析

利用XLL文件投递Qbot银行木马的钓鱼活动分析

1概述 近期&#xff0c;安天CERT发现了一起利用恶意Microsoft Excel加载项&#xff08;XLL&#xff09;文件投递Qbot银行木马的恶意活动。攻击者通过发送垃圾邮件来诱导用户打开附件中的XLL文件&#xff0c;一旦用户安装并激活Microsoft Excel加载项&#xff0c;恶意代码将被执…
阅读更多...
合并区间——力扣56

合并区间——力扣56

文章目录 题目描述解法一 排序题目描述 解法一 排序 vector<vector<int>> merge(vector<vector<int>>& intervals
阅读更多...
SpringCloud实用篇5——elasticsearch基础

SpringCloud实用篇5——elasticsearch基础

目录 1.初识elasticsearch1.1 了解ES1.1.1 elasticsearch的作用1.1.2 ELK技术栈1.1.3 elasticsearch和lucene1.1.4 总结 1.2.倒排索引1.2.1.正向索引1.2.2.倒排索引1.2.3.正向和倒排 1.3 es的一些概念1.3.1 文档和字段1.3.2 索引和映射1.3.3 mysql与elasticsearch 1.4 部署单点…
阅读更多...
Linux MQTT智能家居项目(智能家居界面布局)

Linux MQTT智能家居项目(智能家居界面布局)

文章目录 前言一、创建工程项目二、界面布局准备工作三、正式界面布局总结 前言 一、创建工程项目 1.选择工程名称和项目保存路径 2.选择QWidget 3.添加保存图片的资源文件&#xff1a; 在工程目录下添加Icon文件夹保存图片&#xff1a; 将文件放入目录中&#xff1a; …
阅读更多...
https的原理和方案

https的原理和方案

文章目录 https原理为什么要加密常见的加密方式对称加密非对称加密数据摘要&&数据指纹数据签名 https的几种工作方案方案一&#xff1a;只使用对称加密方案二&#xff1a;只使用非对称加密方案三&#xff1a;两端都使用非对称加密方案四&#xff1a;非对称加密 对称加…
阅读更多...
2023年十款开源测试开发工具推荐

2023年十款开源测试开发工具推荐

1、AutoMeter-API 自动化测试平台 AutoMeter 是一款针对分布式服务&#xff0c;微服务 API 做功能和性能一体化的自动化测试平台&#xff0c;一站式提供发布单元&#xff0c;API&#xff0c;环境&#xff0c;用例&#xff0c;前置条件&#xff0c;场景&#xff0c;计划&#x…
阅读更多...
计算机工作原理：进程调度

计算机工作原理：进程调度

在计算机中&#xff0c;什么是进程&#xff1f;一个跑起来的程序就是一个进程&#xff0c;没跑起来就只能算一个程序。 在windows的任务管理器中&#xff0c;可以很清楚的看到有哪一些进程。 进程&#xff08;progress&#xff09;也叫任务&#xff08;task&#xff09;。 每…
阅读更多...
C语言进阶第二课-----------指针的进阶----------升级版

C语言进阶第二课-----------指针的进阶----------升级版

作者前言 &#x1f382; ✨✨✨✨✨✨&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f367;&#x1f382; ​&#x1f382; 作者介绍&#xff1a; &#x1f382;&#x1f382; &#x1f382; &#x1f389;&#x1f389;&#x1f389…
阅读更多...
腾讯云服务器配置选择方法

腾讯云服务器配置选择方法

腾讯云服务器配置如何选择&#xff1f;CPU内存、带宽和系统盘怎么选择合适&#xff1f;个人用户可以选择轻量应用服务器&#xff0c;企业用户可以选择云服务器CVM&#xff0c;2核2G3M带宽轻量服务器95元一年、2核4G5M服务器168元一年&#xff0c;企业用户可以选择标准型S5云服务…
阅读更多...
Gitlab CI/CD笔记-第二天-使用maven打包并且使用主机套接字进行构建并push镜像。

Gitlab CI/CD笔记-第二天-使用maven打包并且使用主机套接字进行构建并push镜像。

一、安装gitlab-runner 1.可以是linux也可以是docker的 2.本文说的是docker安装部署的。 二、直接上.gitlab-ci.yml stages: # List of stages for jobs, and their order of execution - build-image build-image-job: stage: build-image image: harbor.com:543/docke…
阅读更多...
UEFI: 模块和包概述

UEFI: 模块和包概述

UEFI规范中有两个最重要的概念&#xff1a;模块&#xff08;Module)和包&#xff08;Package&#xff09;。 模块 Module UEFI上最小的可单独编译的代码单元&#xff0c;或者是预编译的二进制文件比如efi执行文件。 包 Package 由模块、平台描述文件&#xff08;DSC)和包声明…
阅读更多...
Leecode长度最小的子数组_209

Leecode长度最小的子数组_209

209.长度最小的子数组 题目建议&#xff1a; 本题关键在于理解滑动窗口&#xff0c;这个滑动窗口看文字讲解 还挺难理解的&#xff0c;建议大家先看视频讲解。 拓展题目可以先不做。 题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成…
阅读更多...
exchange partition global index

exchange partition global index

EXCHANGE PARTITION with a Table having a UNIQUE INDEX and PK Constraint. (Doc ID 1620636.1)​编辑To Bottom In this Document Symptoms Changes Cause Solution References APPLIES TO: Oracle Database - Enterprise Edition - Version 11.2.0.3 and later Oracle Da…
阅读更多...
day16：static、final、常量、抽象类

day16：static、final、常量、抽象类

一、static 静态变量能否继承&#xff1f; 静态变量属于类&#xff0c;是共享的资源&#xff0c;不认为是被继承的 静态变量不可以定义在静态方法中&#xff0c; 静态方法中先于对象存在&#xff0c; 不能使用 this super 静态方法中可以直接调用静态方法。 静态方法不能直…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023