Flask 框架集成Bootstrap

这篇具有很好参考价值的文章主要介绍了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 就能看到如下效果:

Flask 框架集成Bootstrap,flask,bootstrap,python

首页效果

调整浏览器页面大小,可以看到页面自适应效果,是不是很神奇。接下来详细说明一下 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 本地资源放置如下:

Flask 框架集成Bootstrap,flask,bootstrap,python

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() ,以及一些基本的宏的用法,在参考代码中有较为完整的例子,您可以作为参考。在后面的文章中将会陆续介绍 表单 和 数据库 的使用,敬请期待。文章来源地址https://www.toymoban.com/news/detail-639415.html

到了这里,关于Flask 框架集成Bootstrap的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于Flask+Bootstrap+机器学习的世界杯比赛预测系统

    🤵‍♂️ 个人主页:@艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞👍🏻 收藏 📂加关注+ 目录 一、项目介绍 1.1项目简介 1.2技术工具 1.3页面概述  二、项目步骤 2.1首页模块 2.2查看

    2024年02月09日
    浏览(48)
  • 基于Flask+Bootstrap+机器学习的南昌市租房价格预测系统

    🤵‍♂️ 个人主页:@艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞👍🏻 收藏 📂加关注+ 目录 一、项目介绍 1.1项目简介 1.2技术工具 1.3页面概述  二、项目步骤 2.1登录模块 2.2注册

    2024年02月02日
    浏览(38)
  • Bootstrap 框架详解

    框架顾名思义就是一套架构,它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身,使用者要按照框架所规定的某种规范进行开发。而插件一般是为了解决某个问题专门存在的,其功能单一,并且比较小。 前端常用的框架有 Bootstrap、Vue、Angu

    2024年02月05日
    浏览(50)
  • Bootstrap框架(JavaScript组件)

    前言 上一章博客我们讲解了Bootstrap的组件 这一章我们来讲一下一些JavaScript组件 一,JavaScript插件简介 为什么需要JavaScript插件? 项目中遇到复杂的交互效果,如轮播图、模态框等可以使用JavaScript插件轻松完成 插件的引入方式 data属性 data属性让JavaScript插件使用门槛降低 二,

    2024年02月14日
    浏览(46)
  • BootStrap-前端框架

    资料:https://v3.bootcss.com/components/ BootStrap的概念(Web框架) Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML 、 CSS 、 JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个 CSS/HTML 框架。Bootstrap提供了优

    2024年02月07日
    浏览(38)
  • 大学生bootstrap框架网页作业成品 web前端大作业期末源码 航海王html+jquery+bootstrap响应式网页制作模板 学生海贼王动漫bootstrap框架网站作品

    HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页

    2024年02月11日
    浏览(79)
  • Bootstrap前段框架(一篇到底)

    1.1 What? 诞生于2011年,来自Twitter公司,是目前最受欢迎的前端框架 是一个用于快速开发Web应用程序和网站的前端框架 Bootstrap是基于HTML、CSS、JS的,简洁灵活,使得Web开发更加快捷 概述:Bootstrap是一个建立一个页面,就可以在三个终端(PC端、平板、手机)上完美展示的响应式前

    2024年03月27日
    浏览(60)
  • python之 flask 框架(1)

    pycharm 查看方法的定义(类似.net 中 F12) ctrl + 单击(对应的方法) 两种方法 pip list 查看虚拟环境所有的包 pip freeze 查看自己安装的包 专业版pychram 社区版 要手动创建 @app.route(‘/xxx/converter:variable_name’) converter:参数类型 string:接受任何没有斜杠’/\\\'的字符串 默认参数类型

    2024年04月12日
    浏览(36)
  • 【一、bootstrap框架前端注册登录页面】

    一、使用bootstrap框架写一个简易的前端登录页面。 先上截图 下面开始记录本人使用bootstrap框架写这个登录页面的过程 1、bootstrap需要的配置文件  2、如何修改背景图片 3、如何写一个图标与输入框附合的表单 例如这样 

    2024年02月11日
    浏览(40)
  • Web开发之常用框架BootStrap

    bootstrap是基于HTML、CSS、JS的前端框架,该框架预定了一套CSS样式和与样式相对应的JS代码,开发人员只需要编写HTML结构,添加bootstrap固定的class样式,就可以实现指定的效果展示。BootStrap使得web开发更加高效,并且支持响应式开发,解决了移动互联网前端开发问题。所谓的响

    2024年02月08日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包