下面我将为你提供一个非常流行且实用的模板,并详细解释其结构、如何使用以及如何扩展。
（图片来源网络，侵删）
推荐的模板结构：Flask + Bootstrap
Flask 是一个轻量级的 Python Web 框架，非常适合快速启动项目，Bootstrap 则提供了强大的前端组件和 CSS 框架，这个组合是 Python Bootstrap 模板的黄金搭档。
项目结构
一个典型的 Flask + Bootstrap 项目结构如下：
my_flask_bootstrap_app/
├── app/
│ ├── __init__.py # 创建 Flask 应用实例和扩展
│ ├── routes.py # 定义所有路由 (URL) 和视图函数
│ ├── templates/ # 存放所有 HTML 模板文件
│ │ ├── base.html # 基础模板，包含通用的页头、页脚和导航
│ │ ├── index.html # 首页模板
│ │ └── about.html # 关于页面模板
│ └── static/ # 存放静态文件 (CSS, JS, 图片等)
│ ├── css/
│ │ └── style.css # 自定义 CSS
│ ├── js/
│ │ └── custom.js # 自定义 JavaScript
│ └── img/
│ └── logo.png # 图片等
├── venv/ # Python 虚拟环境 (不应提交到版本控制)
├── config.py # 配置文件 (如数据库、密钥等)
├── run.py # 启动应用的脚本
└── requirements.txt # 项目依赖包列表核心文件内容详解
requirements.txt
这个文件列出了项目所需的所有 Python 包，在开发前，你需要用 pip install -r requirements.txt 来安装它们。
Flask==2.2.2 Flask-Bootstrap==3.3.0
Flask: 核心 Web 框架。Flask-Bootstrap: 一个 Flask 扩展，极大地简化了在模板中使用 Bootstrap 的过程。
run.py
这是应用的入口点,用于启动开发服务器。
（图片来源网络，侵删）
# run.py
from app import create_app
app = create_app()
if __name__ == '__main__':
# debug=True 会在代码修改后自动重载服务器，并在出错时提供调试页面
app.run(debug=True)
config.py
用于存放配置信息,比如数据库连接、密钥等。
# config.py
class Config:
# Flask 的密钥，用于 session 等功能
SECRET_KEY = 'a-very-secret-key-that-you-should-change'
app/__init__.py
这里是 Flask 应用的核心，用于创建应用实例并初始化扩展。
# app/__init__.py
from flask import Flask
from flask_bootstrap import Bootstrap
from config import Config
# 创建应用工厂函数
def create_app():
app = Flask(__name__)
app.config.from_object(Config)
# 初始化 Flask-Bootstrap
bootstrap = Bootstrap(app)
# 注册蓝图 (如果项目变大，推荐使用蓝图组织路由)
# from app import routes
# app.register_blueprint(routes.bp)
return app
app/routes.py
定义应用的 URL 路由和对应的处理逻辑。
# app/routes.py
from flask import render_template
from app import create_app
# 创建一个蓝图来组织路由 (最佳实践)
bp = Blueprint('main', __name__)
@bp.route('/')
@bp.route('/index')
def index():
# render_template 会去 templates 文件夹里找 HTML 文件
return render_template('index.html', title='首页')
@bp.route('/about')
def about():
return render_template('about.html', title='关于我们')
注意：为了简化，上面的例子没有使用蓝图，直接返回模板，在实际项目中，使用蓝图是更好的做法。
（图片来源网络，侵删）
模板文件 (Jinja2 + Bootstrap)
这是模板的核心,我们利用 Flask-Bootstrap 提供的宏来快速构建页面。
app/templates/base.html
这是所有页面的“骨架”，其他页面（如 index.html）都会继承它。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">{% block title %}默认标题{% endblock %} - 我的应用</title>
<!-- 引入 Bootstrap 的 CSS -->
{{ bootstrap.load_css() }}
<!-- 你可以在这里添加自定义的 CSS -->
{% block styles %}{% endblock %}
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="{{ url_for('index') }}">我的应用</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{{ url_for('index') }}">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('about') }}">lt;/a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 页面主要内容 -->
<main class="container mt-4">
<!-- 使用 with 语句设置页面标题 -->
{% block page_content %}{% endblock %}
</main>
<!-- 页脚 -->
<footer class="footer mt-5 py-3 bg-light">
<div class="container text-center">
<span class="text-muted">© 2025 我的应用. All rights reserved.</span>
</div>
</footer>
<!-- 引入 Bootstrap 的 JS (依赖 Popper.js) -->
{{ bootstrap.load_js() }}
<!-- 你可以在这里添加自定义的 JS -->
{% block scripts %}{% endblock %}
</body>
</html>
app/templates/index.html
继承 base.html 并填充内容。
{% extends "base.html" %}
<!-- 定义页面标题 -->
{% block title %}首页{% endblock %}
<!-- 定义页面主要内容 -->
{% block page_content %}
<div class="jumbotron">
<h1 class="display-4">你好, 世界!</h1>
<p class="lead">这是一个使用 Flask 和 Bootstrap 构建的简单模板。</p>
<hr class="my-4">
<p>它展示了如何使用继承和宏来快速创建响应式布局。</p>
<a class="btn btn-primary btn-lg" href="{{ url_for('about') }}" role="button">了解更多</a>
</div>
<div class="row">
<div class="col-md-4">
<h2>特性一</h2>
<p>这里是特性一的描述，使用 Bootstrap 的网格系统，内容会自动适应不同屏幕尺寸。</p>
</div>
<div class="col-md-4">
<h2>特性二</h2>
<p>这里是特性二的描述，Bootstrap 提供了大量的预置组件，如按钮、卡片、模态框等。</p>
</div>
<div class="col-md-4">
<h2>特性三</h2>
<p>这里是特性三的描述，Jinja2 模板引擎的强大功能让你可以轻松地在后端和前端之间传递数据。</p>
</div>
</div>
{% endblock %}
<!-- 可以定义本页特有的脚本 -->
{% block scripts %}
<script>
console.log("首页已加载");
</script>
{% endblock %}
app/templates/about.html
另一个继承 base.html 的简单页面。
{% extends "base.html" %}
{% block title %}关于我们{% endblock %}
{% block page_content %}
<div class="card">
<div class="card-header">
关于我们的应用
</div>
<div class="card-body">
<h5 class="card-title">简介</h5>
<p class="card-text">这是一个使用 Flask + Bootstrap 模板创建的示例项目，旨在展示如何快速搭建一个美观且功能强大的 Web 应用。</p>
</div>
</div>
{% endblock %}
如何运行这个模板
-
创建项目文件夹:
mkdir my_flask_bootstrap_app cd my_flask_bootstrap_app
-
创建虚拟环境 (强烈推荐):
# Windows python -m venv venv .\venv\Scripts\activate # macOS/Linux python3 -m venv venv source venv/bin/activate
-
安装依赖: 将上面的
requirements.txt文件内容保存到requirements.txt文件中，然后运行：pip install -r requirements.txt
-
创建所有文件和文件夹: 按照上面的项目结构，创建所有
.py文件和templates,static等文件夹，并填入对应的代码。 -
运行应用:
python run.py
-
访问: 打开你的浏览器，访问
http://127.0.0.1:5000，你就能看到一个由 Bootstrap 美化过的页面了。
进阶与扩展
这个模板是基础,你可以基于它进行扩展：
- 使用数据库: 集成
Flask-SQLAlchemy来管理数据。 - 用户认证: 使用
Flask-Login实现用户登录、注册和权限管理。 - 表单处理: 使用
Flask-WTF和Flask-Bootstrap的表单渲染功能来创建美观的表单。 - 前后端分离: 将 Python 后端改造为只提供 API (使用
Flask-RESTful或FastAPI)，前端则使用 Vue.js 或 React 等框架，并通过 AJAX 与后端交互，Bootstrap 依然可以用于前端 UI 的构建。 - 使用更现代的前端工具: 对于大型项目，可以考虑使用 Webpack 等工具来管理 Bootstrap 和其他前端资源，但这会增加项目的复杂性。
希望这个详细的 Python Bootstrap 模板指南对你有帮助！
