Flask 框架集成Bootstrap

前面学习了 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_itembootstrap.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.mzph.cn/news/35648.shtml

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

相关文章

国产数据库-内核特性-低基数全局字典

国产数据库-内核特性-StarRocks低基数全局字典 StarRocks2.0引入了低基数全局字典&#xff0c;可以通过全局字典将字符串的相关操作转换成整型相关操作&#xff0c;大大提升查询性能。 1、低基数字典 对于利用整型替代字符串进行处理&#xff0c;通常使用字典编码进行优化。Sta…

人大金仓助力某大型金融机构业务系统异地容灾优化升级

日前&#xff0c;人大金仓助力某大型金融机构应收账款融资服务平台异地容灾项目顺利上线&#xff0c;保证了平台系统运行的连续性和数据安全&#xff0c;为充分发挥平台的融资功能&#xff0c;缓解中小微企业融资难提供了强有力的保障。 “ 缓解中小微企业融资难 某大型金融机构…

【MySQL--->数据库操作】

文章目录 [TOC](文章目录) 一、操作语句1.增2.删3.改4.查5.备份 二、字符集与校验规则 一、操作语句 1.增 语句格式:create database [if no exists]数据库名[create_specification [,create_specification] …]; 中括号内是可选项,if no exists是指如果数据库不存在就创建,存…

STM32 F103C8T6学习笔记7:双机无线串口通信

今日尝试配通俩个C8T6单片机之间的无线串口通信&#xff0c;文章提供原理&#xff0c;源码&#xff0c;测试效果图&#xff0c;测试工程下载&#xff1a; 目录 传输不规范问题&#xff1a; 串口通信资源&#xff1a; 单个串口资源理解&#xff1a; 单片机串口资源&#xf…

Redis的单线程与多线程

Redis的核心处理逻辑一直都是单线程 有一些分支模块是多线程(某些异步流程从4.0开始用的多线程&#xff0c;例如UNLINK、FLUSHALL ASYNC、FLUSHDB ASYNC等非阻塞的删除操作。网络I/O解包从6.0开始用的是多线程;) 为什么是单线程 多线程多好啊可以利用多核优势 官方给的解释 …

UI自动化环境的搭建(python+pycharm+selenium+chrome)

最近在做一些UI自动化的项目&#xff0c;为此从环境搭建来从0到1&#xff0c;希望能够帮助到你&#xff0c;同时也是自我的梳理。将按照如下进行开展&#xff1a; 1、python的下载、安装&#xff0c;python环境变量的配置。 2、pycharm开发工具的下载安装。 3、selenium的安装。…

Leetcode34 在排序数组中查找元素的第一个和最后一个位置

给你一个按照非递减顺序排列的整数数组 nums&#xff0c;和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target&#xff0c;返回 [-1, -1]。 你必须设计并实现时间复杂度为 O(log n) 的算法解决此问题。 代码&#xff1a; c…

服务器安全维护注意事项有哪些?

服务器的安全关系着公司整个网络以及所有数据的安全&#xff0c;我们该如何做好服务器后续的安全维护呢?河南亿恩科技股份有限公司&#xff0c;专注服务器托管23年&#xff0c;不仅是国内专业的互联网基础应用服务提供商之一&#xff0c;还是国家工信部认定的综合电信服务运营…

【Linux命令行与Shell脚本编程】第十九章 正则表达式

Linux命令行与Shell脚本编程 第十九章 正则表达式 文章目录 Linux命令行与Shell脚本编程 第十九章 正则表达式九.正则表达式9.1.正则表达式基础9.1.1.正则表达式的类型9.2.定义BRE模式9.2.1.普通文本9.2.2.特殊字符 9.2.3.锚点字符锚定行首^锚定行尾$组合锚点 9.2.4.点号字符\.…

funbox3靶场渗透笔记

funbox3靶场渗透笔记 靶机地址 https://download.vulnhub.com/funbox/Funbox3.ova 信息收集 fscan找主机ip192.168.177.199 .\fscan64.exe -h 192.168.177.0/24___ _/ _ \ ___ ___ _ __ __ _ ___| | __/ /_\/____/ __|/ __| __/ _ |/ …

SpringBoot复习(39)Servlet容器的自动配置原理

Servlet容器自动配置类为ServletWebServerFactoryAutoConfiguration 可以看到通过Import注解导入了三个配置类&#xff1a; 通过这个这三个配置类可以看出&#xff0c;它们都使用了ConditionalOnClass注解&#xff0c;当类路径存在tomcat相关的类时&#xff0c;会配置一个T…

Linux系列:从0到1用Docker部署springboot项目

目录 1.前提条件 2.编写DockerFile镜像文件 3.打包SpringBoot项目 4.通过软件Xftp进行传输&#xff08;*&#xff09; 1.点击“文件-新建”​编辑 5.操作远程主机 1.docker构建 2.容器运行 6.容器的关闭和删除 1.前提条件 Linux、docker、xftp的安装、一台可以访问的远…

教雅川学缠论07-中枢实战众泰汽车000980

本文实战众泰汽车 下面是2023年11月14-2023年8月8众泰汽车日K图 先画日K 接下来处理包含&#xff0c;就变成下面这个样子 下面在套上缠论的理论&#xff0c;未来股价的走势应该是红色椭圆形虚线里面的样子 好了&#xff0c;文章就到这里&#xff0c;如果众泰最终不是这个走势…

IDEA部署配置Maven项目教程,IDEA配置Tomcat(2019.3.3)

一、前言 当涉及到软件开发和项目管理时&#xff0c;使用一个可靠的构建工具是非常重要的。Maven是一个广泛使用的构建工具&#xff0c;它为Java项目提供了一种简化的构建过程和依赖管理。 在本文中&#xff0c;我们将探讨如何部署Maven并开始使用它来构建您的项目。我们将介绍…

开源数据库Mysql_DBA运维实战 (修改root密码)

MySQL——修改root密码的4种方法 本文以windows为例为大家详细介绍下MySQL修改root密码的4种方法&#xff0c;大家可以可以根据的自己的情况自由选择&#xff0c;希望对大家有所帮助 方法1&#xff1a; 用SET PASSWORD命令 首先登录MySQL。 格式&#xff1a;mysql> set pass…

Android APK体积优化(瘦身)

1、基础知识&#xff1a; 1.1 apk结构 lib &#xff1a;存放so文件&#xff0c;对应不同的cpu架构 res &#xff1a;资源文件&#xff0c;layout、drawable等&#xff0c;经过aapt编译 assets &#xff1a;资源文件&#xff0c;不经过aapt编译 classes.dex &#xff1a;dx编译…

graphab 教程 ——生成廊道

Graphab软件包括图谱创建、基于图谱的连通性计算、分析与推广、制图四个模块。Graphab软件的图谱创建基于栅格数据进行,包括斑块识别和连接建立两个步骤。Graphab 软件可识别的栅格数据格式包括TIFF、ASCI和RST,栅格像元记录数值用于识别斑块类型,识别规则可以选择四邻域或八邻…

【Zabbix安装-5.5版本】

Zabbix安装&#xff08;rpm包安装&#xff09; Index of /zabbix/zabbix/5.5/rhel/8/x86_64/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror rpm包链接&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/zabbix/zabbix/5.5/rhel/8/x86_64/zabbix-release-5.5-1.e…

Unity3d C#利用本地网页快速打开萤石云监控视频流(ezopen)实现云台,声音等控制,支持WebGL平台,替代UMP播放(含源码)

前言 之前我介绍了替代Universal?Media?PlayerUMP播放石云监控视频流(ezopen)的功能&#xff0c;效果还是很明显的&#xff0c;笔者的测试是差不多3-5秒就能打开监控画面&#xff0c;不过稍微遗憾的是&#xff0c;之前的功能是iframe打开石云提供的播放网页的形式&#xff0…

详解拦截器和过滤器

目录 代码演示过滤器Demo拦截器Demo 过滤器自定义拦截器配置拦截器过滤器执行原理多个过滤器的执行顺序 拦截器自定义拦截器注册拦截器1&#xff09;注册拦截器2&#xff09;配置拦截的路径3&#xff09;配置不拦截的路径 多个拦截器的执行顺序 过滤器和拦截器的区别 代码演示 …