Flask 集成 Bootstrap 的完整实现步骤

Flask 集成 Bootstrap 的操作流程

要在 Flask 应用中引入 Bootstrap 样式，核心在于利用 flask-bootstrap 库提供的模板继承机制。以下是实现该功能的具体步骤：

1. 安装依赖库：使用 pip 安装 flask-bootstrap。
2. 准备模板目录：将库中的基础模板复制到项目的 templates 文件夹中。
3. 创建自定义模板：编写继承自 Bootstrap 基础模板的 HTML 文件。
4. 编写 Flask 路由：在 Python 文件中初始化应用并定义访问路径。
5. 运行与验证：启动服务并在浏览器中查看效果。

具体实现代码

1. 安装 flask-bootstrap

首先，在终端执行以下命令安装必要的库：

pip install flask-bootstrap

2. 复制基础模板

安装完成后，需要将 site-packages\flask_bootstrap\templates\bootstrap 目录下的内容复制到你的项目 templates 目录中。确保该目录下包含 base.html 文件，这是后续模板继承的基础。

3. 创建 user.html 模板

在 templates 目录下创建 user.html 文件。该文件通过 {% extends %} 标签继承自 bootstrap/base.html，并重定义了标题、导航栏和内容区块：

{% extends "bootstrap/base.html" %}

{% block title %}Flask{% endblock %}

{% block navbar %}
  <div class="navbar navbar-inverse" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span>
          <span class="icon-bar"></span><span class="icon-bar"></span>
        <button>
        <a class="navbar-brand" href="/" rel="external nofollow" rel="external nofollow" >Flask</a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li><a href="/" rel="external nofollow" rel="external nofollow" >Home</a></li>
        <ul>
      </div>
    </div>
  </div>
{% endblock %}

{% block content %}
  <div class="container">
    <div class="page-header">
      <h1>Hello, {{ name }}</h1>
    </div>
  </div>
{% endblock %}

4. 编写 Flask 应用代码

创建 MyFlask.py 文件，初始化 Flask 应用并启用 Bootstrap。定义一个路由 /user/<name>，用于渲染 user.html 并传递用户名称：

from flask import Flask, render_template
from flask_bootstrap import Bootstrap

app = Flask(__name__)
bootstrap = Bootstrap(app)

@app.route('/user/<name>')
def user(name):
  return render_template('user.html', name=name)

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

运行与验证

启动 Flask 应用后，在浏览器地址栏输入 http://127.0.0.1:5000/user/Brown。如果一切配置正确，页面将显示带有 Bootstrap 样式的导航栏，并在内容区域显示 Hello, Brown。