bootstrap 错误页面模板-网站模板-锦华智联科技

单文件错误页面模板 (最简单)

这个方案适用于快速创建一个独立的错误页面，html，它包含了所有必要的 CSS 和 JS,可以直接使用。

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">404 - 页面未找到</title>
    <!-- Bootstrap 5 CSS (从 CDN 引入) -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* 自定义样式，让错误页面更美观 */
        body {
            background-color: #f8f9fa;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .error-template {
            padding: 2.5rem 2rem;
            text-align: center;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
        .error-icon {
            font-size: 8rem;
            color: #dc3545; /* Bootstrap 的危险色 */
            margin-bottom: 1.5rem;
        }
        .error-title {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }
        .error-description {
            font-size: 1.25rem;
            color: #6c757d; /* Bootstrap 的次要文本色 */
            margin-bottom: 2rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3">
                <div class="error-template">
                    <!-- 使用 Bootstrap Icons -->
                    <div class="error-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16">
                            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                        </svg>
                    </div>
                    <h1 class="error-title">404</h1>
                    <p class="error-description">哎呀！您访问的页面不存在。</p>
                    <div class="error-actions">
                        <a href="/" class="btn btn-primary btn-lg">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-door-fill" viewBox="0 0 16 16">
                                <path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 4.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5z"/>
                            </svg>
                            返回首页
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Bootstrap 5 JS (从 CDN 引入) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

如何使用：

将以上代码保存为 html 文件。
将其放在您的网站根目录或专门的 errors 文件夹中。
您的服务器配置（如 Nginx, Apache）需要将所有 404 错误重定向到这个页面。

多页面错误页面项目 (更专业、更易维护)

对于大型项目，通常需要多个错误页面（如 404, 500, 403, 503），创建一个共享的模板文件（_error_base.html）是最佳实践。

项目结构：

/your-project-root
|-- /templates
|   |-- _error_base.html      # 错误页面基础模板
|   |-- 404.html              # 404 页面
|   |-- 500.html              # 500 页面
|   |-- 403.html              # 403 页面
|-- /static
|   |-- css/
|   |   |-- custom.css        # 自定义样式
|-- app.py                    # Flask 示例应用

基础模板 (`templates/_error_base.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 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 自定义 CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">我的项目</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <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="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/about">关于我们</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/contact">联系我们</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 主要内容区 -->
    <main class="container my-5">
        {% block content %}{% endblock %}
    </main>
    <!-- 页脚 -->
    <footer class="bg-light text-center py-3 mt-5">
        <div class="container">
            <p class="mb-0">&copy; 2025 我的项目. All rights reserved.</p>
        </div>
    </footer>
    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    {% block extra_js %}{% endblock %}
</body>
</html>

自定义样式 (`static/css/custom.css`)

/* 让错误内容居中并美观 */
.error-page-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh; /* 至少占视口高度的 60% */
}
.error-icon {
    font-size: 8rem;
    color: #dc3545; /* Bootstrap 的危险色 */
    margin-bottom: 1.5rem;
}
.error-title {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 1rem;
}
.error-description {
    font-size: 1.25rem;
    color: #6c757d; /* Bootstrap 的次要文本色 */
    margin-bottom: 2rem;
    max-width: 600px;
    text-align: center;
}

具体错误页面 (以 `html` 为例)

这个文件继承基础模板,并只填充自己特有的内容。

{% extends "_error_base.html" %}
{% block title %}404 - 页面未找到{% endblock %}
{% block content %}
    <div class="error-page-container">
        <div class="error-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-exclamation-triangle-fill" viewBox="0 0 16 16">
                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
            </svg>
        </div>
        <h1 class="error-title">404</h1>
        <p class="error-description">
            抱歉，您访问的页面不存在或已被移除，请检查网址是否正确，或使用下方的按钮返回安全区域。
        </p>
        <div class="error-actions">
            <a href="/" class="btn btn-primary btn-lg">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-door-fill" viewBox="0 0 16 16">
                    <path d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 4.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5z"/>
                </svg>
                返回首页
            </a>
            <a href="/contact" class="btn btn-outline-secondary btn-lg ms-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-headset" viewBox="0 0 16 16">
                    <path d="M8 1a5 5 0 0 0-5 5v1h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3v1a5 5 0 0 0 5 5h1a5 5 0 0 0 5-5v-1h-1a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1V6a5 5 0 0 0-5-5H8z"/>
                </svg>
                联系我们
            </a>
        </div>
    </div>
{% endblock %}

后端框架集成 (以 Flask 为例)

您需要在 Flask 应用中捕获异常并渲染相应的模板。

# app.py
from flask import Flask, render_template, abort
app = Flask(__name__)
# 模拟一个会出错的页面
@app.route('/broken-link')
def broken_link():
    # 这里可以故意触发一个错误，用于测试 500 页面
    # 1 / 0
    return "这是一个正常的页面，但假设它不存在"
@app.errorhandler(404)
def page_not_found(e):
    return render_template('404.html'), 404
@app.errorhandler(500)
def internal_server_error(e):
    return render_template('500.html'), 500
# 500.html 模板内容
# {% extends "_error_base.html" %}
# {% block title %}500 - 服务器内部错误{% endblock %}
# {% block content %}
#     <div class="error-page-container">
#         <div class="error-icon">
#             <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-bug-fill" viewBox="0 0 16 16">
#                 <path d="M4.332 8.027a3.001 3.001 0 0 1 0 1.945A3.01 3.01 0 0 1 2 11a3 3 0 0 1-2.5-1.332A2.99 2.99 0 0 1 0 8a2.99 2.99 0 0 1 .5-1.668A3 3 0 0 1 2 5a3.01 3.01 0 0 1 2.332 1.027 3.001 3.001 0 0 1 0 1.945Zm5.338 0a3.001 3.001 0 0 1 0 1.945A3.01 3.01 0 0 1 7.332 11a3 3 0 0 1-2.5-1.332A2.99 2.99 0 0 1 5.332 8a2.99 2.99 0 0 1 .5-1.668A3 3 0 0 1 7.332 5a3.01 3.01 0 0 1 2.338 1.027 3.001 3.001 0 0 1 0 1.945Zm5.338 0a3.001 3.001 0 0 1 0 1.945A3.01 3.01 0 0 1 12.67 11a3 3 0 0 1-2.5-1.332A2.99 2.99 0 0 1 10.67 8a2.99 2.99 0 0 1 .5-1.668A3 3 0 0 1 12.67 5a3.01 3.01 0 0 1 2.338 1.027 3.001 3.001 0 0 1 0 1.945Z"/>
#             </svg>
#         </div>
#         <h1 class="error-title">500</h1>
#         <p class="error-description">
#             服务器出错了！我们已经记录了这个问题，工程师正在紧急修复中。
#         </p>
#         <div class="error-actions">
#             <a href="/" class="btn btn-primary btn-lg">返回首页</a>
#         </div>
#     </div>
# {% endblock %}
if __name__ == '__main__':
    app.run(debug=True)

总结与建议

选择合适的方案：
- 如果只是个人博客或小型项目，方案一的单文件模板足够了,简单快捷。
- 对于任何中大型项目，强烈推荐方案二，它更具可维护性、可扩展性，并且能保持整个网站 UI/UX 的一致性。
设计要点：
（图片来源网络，侵删）
- 和状态码：让用户一眼就知道发生了什么（404, 500等）。
- 友好的错误信息：用平实的语言解释错误,避免技术术语。
- 提供明确的行动号召 (Call to Action)：告诉用户接下来可以做什么，返回首页”、“联系客服”或“重试”。
- 保持品牌一致性：使用网站的 Logo、导航栏和页脚,让用户感觉他们仍然在你的网站内。
- 响应式设计：Bootstrap 本身就是响应式的，确保页面在手机、平板和电脑上都能良好显示。
进阶功能：
- 错误日志：在后端记录错误详情,方便开发者排查问题。
- 用户反馈：在错误页面添加一个简单的表单,让用户可以报告问题。
- SEO 优化：确保错误页面返回正确的 HTTP 状态码（如 404, 500）,这有助于搜索引擎理解页面状态。

bootstrap 错误页面模板