Logo

菜单

发布于 2026-01-06 1 阅读
0

如何在 Flask 中使用 Bootstrap

如何在 Flask 中使用 Bootstrap

各位程序员朋友们好！

本文将介绍如何将 Bootstrap 与 Flask 结合使用，构建具有响应式布局的专业 Web 应用程序。对于新手来说，Bootstrap是最流行的 CSS 框架之一，在 GitHub 上拥有超过 15 万颗星，并拥有庞大的生态系统。Flask是一个开源框架，可用于构建从简单的单页项目到复杂的 API、微服务，甚至是复杂的电子商务解决方案。

感谢阅读！ - 内容由App Generator提供。

为了使本文更有用，我们将介绍一个开源的 Flask 项目，该项目提供了一个使用 Bootstrap 设计的精美 UI，分为两种版本：一个是使用从官方Bootstrap 示例页面下载的组件的最小版本，另一个是具有更多页面（首页、关于、联系）和完整组件集的生产就绪版本。

  • 第一部分 -什么是 Bootstrap
  • 第二部分 -什么是烧瓶
  • 第三部分——设置环境
  • 第四部分 -编写一个 Flask 应用（带身份验证）
  • 第 5 部分 -集成一套完整的 UI 工具包
  • 免费示例，包含更多模块：Flask Bootstrap Pixel Lite

Bootstrap 与 Flask - Pixel Lite 示例。

Bootstrap是什么？

简单来说，Bootstrap 通过提供一系列 HTML 和 CSS 模板，帮助我们更快、更轻松地编写用户界面，这些模板用于创建按钮、下拉菜单、表单、警告框、模态框、选项卡、手风琴等 UI 组件。重用 Bootstrap 框架提供的资源，我们不仅可以节省时间，还可以提高最终产品的质量。

使用 Bootstrap 的理由

  • 易于使用——任何具备基本编程知识的开发人员都可以使用和组合 Bootstrap 组件来快速创建网页原型。
  • 响应式设计- Bootstrap 组件旨在适应各种分辨率的桌面和移动设备，并能正确显示。
  • 活跃的社区——这个出色的框架由一个庞大的开源社区积极支持和版本控制。
  • 跨浏览器兼容性- Bootstrap 代码库始终遵循最新标准，以便在所有主流浏览器（Chrome、Safari、IE 或 Firefox）上流畅部署。

使用 Bootstrap 开始编写新网页非常简单。只需复制以下代码片段，将其保存到本地，然后使用 Chrome 或 Safari 浏览器查看该文件即可。

<!doctype html>
<html lang="en">
  <head>
      <title>My First Bootstrap Page</title>

      <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1 class="text-primary">
        Get started with Bootstrap
    </h1>       

    <!-- Bootstrap Javascripts -->  
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

  </body>    
</html>
Enter fullscreen mode Exit fullscreen mode

简单的 Bootstrap 页面 - 浏览器视图

Bootstrap - 简易页面

同样，我们可以从官方网站下载更多组件和示例，并构建更复杂的页面，例如带有左侧菜单、导航栏、页脚和水平部分。

Bootstrap - 组件和示例。

什么是烧瓶

Flask 是一个开源的 Web 框架，使用 Python 编写，代码库轻量级且设计灵活。Flask 默认不包含数据库或其他任何硬性依赖，这使得开发者在模块选择和项目结构方面拥有完全的自由。要使用 Flask 并编写测试应用程序，需要在工作站上正确安装 Python 3，并确保可以在终端窗口中访问 Python 3。

$ pip install flask
Enter fullscreen mode Exit fullscreen mode

上述命令Flask使用PIPPython 官方包管理器进行安装。Flask 安装完成后，我们就可以编写一个简单的应用程序并运行它了：

from flask import Flask 
app = Flask(__name__) 

@app.route('/') 
def hello_world(): 
    return 'Flask is great!' 

if __name__ == '__main__': 
    app.run()
Enter fullscreen mode Exit fullscreen mode

如果我们执行上面的代码片段并http://localhost:5000在浏览器中打开，应该会看到“Flask is great”这条信息。即使功能还不多，我们也刚刚编写了一个可用的 Flask 应用，可以添加更多功能和模块来改进它。

设置环境

要成功运行本文提供的所有示例和代码片段，需要在我们的工作站上正确安装一个最小编程工具包，并且可以通过终端窗口完全访问该工具包。

  • 现代编辑器——例如 VSCode 或 Atom
  • Python3——一种用于多种类型项目的现代脚本语言
  • Git——一个用于从Github下载源代码的命令行工具。

VSCode——一款流行的免费代码编辑器

VsCode 帮助我们可视化和编辑源代码，执行项目，并调查编程过程中可能出现的问题。

VS Code - 现代代码编辑器

Python解释器

Python 是一种通用编程语言——这意味着，与 HTML、CSS 和 JavaScript 不同，它除了用于 Web 开发之外，还可以用于其他类型的编程和软件开发。Python 是一种解释型语言（在运行时被翻译成字节码），可用于以下用途：

  • 基础编程：使用字符串、数字加法、打开文件
  • 编写操作系统脚本
  • 后端（或服务器端）Web 和移动应用开发
  • 桌面应用程序和软件开发

只需点击几下鼠标，即可从官方网站下载并安装 Python 。安装完成后，我们可以在终端中检查安装情况：

$ python --version
Python 3.7.2
Enter fullscreen mode Exit fullscreen mode

编程工具包 - Python 解释器。

GIT命令行版本控制工具

Git 是一款免费的版本控制系统，旨在快速高效地处理从小到大的各种项目。使用 Git，我们可以轻松地从 GitHub 和 BitBucket 克隆/下载和管理项目。

编程工具包 - GIT 版本控制工具。

有了这种最基本的设置，我们就可以继续编写一个简单的 Flask 应用程序，该应用程序提供基于会话的身份验证以及一些页面，如 SignIN、SignUP，这些页面是用从 Bootstrap 下载的组件构建的。

编写 Flask 应用（带身份验证）

该项目旨在尽可能简洁，采用直观的代码库结构、SQLite 持久化以及三个使用 Bootstrap 5 样式设计的页面（首页、登录、注册）。为了满足所有要求，需要安装一些 Python 模块：

  • Flask- 为该应用程序提供支持的框架
  • Flask-Login一个用于管理会话的常用库
  • Flask-Bcrypt用于密码加密
  • Flask-SqlAlchemy- 一个用于访问数据库的常用库

关于代码库结构，Flask 允许用户自由配置文件，没有任何限制。以下是一种可行的结构，它能很好地将设计部分与功能部分（路由、模型）隔离开来。

< PROJECT ROOT >
   |
   |-- app/
   |    |-- static/
   |    |    |-- <css, JS, images>    # CSS files, Javascripts files
   |    |
   |    |-- templates/
   |    |    |
   |    |    |-- index.html           # Index File
   |    |    |-- login.html           # Login Page
   |    |    |-- register.html        # Registration Page
   |    |    
   |    |
   |   config.py                      # Provides APP Configuration 
   |   forms.py                       # Defines Forms (login, register) 
   |   models.py                      # Defines app models 
   |   views.py                       # Application Routes 
   |
   |-- requirements.txt
   |-- run.py
   |
   |-- **************************************
Enter fullscreen mode Exit fullscreen mode

在这个简单的结构中，最相关的文件列在下面：

  • run.py- FLASK_APP 环境变量的入口点和值
  • app directory包含我们项目中使用的所有文件和资源
  • app/config.py- 定义应用程序配置
  • app/forms.py- 定义 SignIN、SignUP 身份验证表单
  • app/models.py- 定义用户表（保存用户和密码）
  • app/views.py- 处理应用程序路由，例如登录、注销和注册

另一个重要位置是templates directory定义index文件和页面的地方。为了使用 Bootstrap，CSS 和 JS 资源通过 CDN 加载，CDN 是一个远程的高速存储服务器，没有任何本地存储SignIN。SignUP

index.html - 使用 Bootstrap 样式

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.88.1">
<title>Flask Authentication | Bootstrap v5.1</title>

<!-- CSS only -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/assets/css/custom.css">

</head>
<body>

    <main>
       <!-- PAGE Content -->    
    </main>

    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

以上代码（为清晰起见，此处为简化版本）将生成以下布局，而无需完全使用下载的组件构建。我们项目的功能部分会检测用户是否已通过身份验证，并建议用户注册login新register帐户。

Bootstrap 和 Flask - 首页

访客用户可以通过如下所示的简单页面创建新帐户：

Bootstrap 和 Flask - 注册页面。

Flask Bootstrap 示例- 登录页面

Bootstrap 和 Flask - 登录页面。

集成 Pixel Lite

对于大多数项目来说，使用极简的 UI 工具包或许可行，但使用由专业机构打造的设计可能效果更佳。为了提升示例的价值，我们将使用 Themesberg 开发的开源 Bootstrap 5 设计：Pixel Lite。这款出色的设计包含预置页面（登录、注册、关于我们）以及丰富的 UI 组件，我们可以灵活运用并组合使用。以下是集成到我们简单项目中的页面：

Flask Pixel Bootstrap 套件 - 自由职业者页面

Flask Bootstrap Pixel - 自由职业者页面

Flask Pixel Bootstrap 套件 - 关于页面

Flask Bootstrap Pixel - 关于页面

我们可以很容易地看出，这个新设计确实更好。让我们按照项目根目录下README文件中的构建说明，编译 GitHub 上发布的免费示例。

步骤一：克隆项目

$ git clone https://github.com/app-generator/flask-how-to-use-with-bootstrap.git
$ cd flask-how-to-use-with-bootstrap
Enter fullscreen mode Exit fullscreen mode

步骤 2 - 安装依赖项

$ virtualenv env
$ source env/bin/activate
$
$ pip3 install -r requirements.txt
Enter fullscreen mode Exit fullscreen mode

步骤 3 - 设置环境

$ export FLASK_APP=run.py
$ export FLASK_ENV=development
Enter fullscreen mode Exit fullscreen mode

步骤五：启动应用程序

$ flask run
Enter fullscreen mode Exit fullscreen mode

默认情况下，应用程序会将访客用户重定向到身份验证页面（登录页面）。创建新用户并登录后，应用程序即可提供对所有私有页面的访问权限。

Flask Bootstrap Pixel - 登录页面

感谢阅读！更多资源，请访问：

文章来源：https://dev.to/sm0ke/how-to-use-bootstrap-with-flask-e41
创建自定义 React 星级评分组...
React Native 表单管理...