如何使用Bootstrap和Flask的详细教程编码员们好! 本文介绍了**如何使用Bootstrap和Flask**，

编码员们好!

本文介绍了如何使用Bootstrap和Flask，并编写具有响应式布局的专业Web应用程序。对于新人来说，Bootstrap是最受欢迎的CSS框架，在Github上有超过150k颗星，背后有一个巨大的生态系统。Flask是一个开源框架，用于编码从简单的单页项目到复杂的API、微服务，甚至是复杂的电子商务解决方案。

为了使这篇文章更加有用，我们将看看一个开源的Flask项目，它提供了一个用Bootstrap设计的漂亮的UI，有两种风格：一个是使用从官方Bootstrap样本页面下载的组件的最小版本，一个是有更多页面（主页、关于、联系）和一套完整组件的生产就绪版本。

谢谢你的阅读!- 内容由App Generator提供。

第1节 -什么是Bootstrap
第2节 -什么是Flask
第3节 - 设置环境
第4节--编码一个Flask应用（带认证）
第5节--整合一个成熟的UI工具包
有更多模块的免费样本。Flask Bootstrap 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>

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

以同样的方式，我们可以从官方网站上下载更多的组件和样本，并建立更复杂的页面，包括左侧菜单、导航栏、页脚和水平部分。

什么是Flask

Flask是一个用Python编码的开源Web框架，使用轻量级代码库，设计灵活。默认情况下，Flask没有数据库或任何其他硬性依赖，使开发人员在使用模块和如何构建项目方面具有完全的自由。要使用Flask并编写测试程序，Python3应该正确地安装在工作站中，并可以在终端窗口中访问。

$ pip install flask

上述命令使用Python的官方软件包管理器PIP ，安装Flask 。一旦Flask安装完毕，我们就可以编码一个简单的应用程序并运行它。

from flask import Flask 
app = Flask(__name__) 

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

if __name__ == '__main__': 
    app.run()

如果我们执行上面的片段并在浏览器中打开http://localhost:5000 ，我们应该看到Flask很好的消息。即使不是太好，我们也刚刚编码了一个可用的Flask应用程序，我们可以用更多的功能和模块来改进。

设置环境

为了成功运行本文提供的所有样本和代码片段，我们需要在工作站中正确安装一个最基本的编程工具包，并在终端窗口中完全访问。

一个现代编辑器--VSCode或Atom
Python3- 一种现代脚本语言，用于许多类型的项目
GIT- 一个用于从Github下载源代码的命令行工具

VSCode- 一个流行的、免费的代码编辑器

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

Python 解释器

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

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

只需点击几下，就可以从官方网站下载和安装Python。一旦安装完毕，我们可以在终端检查安装情况。

$ python --version
Python 3.7.2

GIT命令行版本控制工具

GIT是一个免费的版本控制系统，旨在以速度和效率处理从小型到非常大的项目。使用GIT，我们可以轻松地克隆/下载和管理来自Github和BitBucket的项目。

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

编写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
   |
   |-- **************************************

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

run.py - 进入点和FLASK_APP环境变量的值
app directory 捆绑了我们项目中使用的所有文件和资产
app/config.py - 定义了应用程序的配置
app/forms.py - 定义了SignIN、SignUP认证形式
app/models.py - 定义了用户表（保存用户和密码）
app/views.py - 处理应用程序的路由，如登录、注销和注册

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

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>

上述代码（为清晰起见建议简化版本）将产生以下布局，而不需要完全由下载的组件构建。我们项目的功能部分会检测用户是否经过认证，并建议login 或register 一个新的帐户。

访客用户能够通过一个简单的页面创建一个新的账户，如下图所示。

Flask Bootstrap样本- 登录页面

整合Pixel Lite

对于大多数项目来说，使用最小的UI套件可能是可以的，但使用由机构精心设计的设计可能会更好。为了给我们的样本增加更多的价值，我们将使用由Themesberg制作的开源Bootstrap 5设计。Pixel Lite。这个惊人的设计带有预建的页面（登录、注册、关于）和丰富的UI组件，我们可以使用和组合。下面是集成到我们简单项目中的页面。

Flask Pixel Bootstrap Kit - Freelancer Page

Flask Pixel Bootstrap Kit - 关于页面

我们可以很容易地看到，这个新的设计无疑是更好的。让我们按照保存在项目根部的README文件中提供的构建说明，来编译发布在Github上的免费样本。

步骤#1- 克隆项目

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

第2步- 安装依赖项

$ virtualenv env
$ source env/bin/activate
$
$ pip3 install -r requirements.txt

步骤**#3**- 设置环境

$ export FLASK_APP=run.py
$ export FLASK_ENV=development

第5步- 启动应用程序

$ flask run

默认情况下，该应用程序将重定向访客用户进行认证（SignIN页面）。一旦我们创建一个新的用户并登录，该应用程序将提供对所有私人页面的访问。

谢谢你的阅读！更多资源，请访问。

更多Flask应用和仪表盘--免费和商业的
Bootstrap 5模板- 开源的和免费的