这个模板采用了当前流行的设计理念和技术栈,包括：

经典蓝色后台管理系统html模板
（图片来源网络，侵删）
  • UI框架: Bootstrap 5,提供强大的响应式布局和丰富的UI组件。
  • CSS预处理器: SCSS,让样式代码更易于维护和扩展。
  • 图标: Font Awesome,提供丰富的矢量图标。
  • 布局: 侧边栏 + 顶部导航栏的经典布局。
  • 交互: 使用原生 JavaScript 实现了菜单折叠、主题切换、数据表格排序/分页等常见功能。

模板特点

  1. 经典蓝色主题: 采用专业的蓝色作为主色调，搭配深色侧边栏，视觉上沉稳、专业。
  2. 响应式设计: 完美适配桌面、平板和手机等不同屏幕尺寸。
  3. 功能模块齐全:
    • 可折叠的侧边导航栏
    • 带有搜索、通知和用户信息的顶部导航栏
    • 多种数据展示卡片
    • 功能丰富的数据表格（排序、分页、搜索）
    • 多种图表展示（使用 Chart.js）
    • 交互式表单
  4. 代码结构清晰: HTML、CSS (SCSS)、JavaScript 分离，注释详细,易于理解和二次开发。

如何使用

  1. 创建文件: 创建以下三个文件：index.html, style.css, script.js。
  2. 复制代码: 将下面提供的代码分别复制到对应的文件中。
  3. 引入资源: 确保你的项目能够访问到 Bootstrap、Font Awesome 和 Chart.js 的 CDN 链接（模板中已包含）。
  4. 在浏览器中打开: 直接用浏览器打开 index.html 文件即可看到效果。

index.html (HTML 结构)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">经典蓝色后台管理系统</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 侧边栏 Sidebar -->
    <aside class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <a href="#" class="logo">
                <i class="fas fa-cube"></i>
                <span>AdminPro</span>
            </a>
            <button class="toggle-btn" id="toggleSidebar">
                <i class="fas fa-bars"></i>
            </button>
        </div>
        <ul class="sidebar-menu">
            <li class="menu-item active">
                <a href="#" class="menu-link">
                    <i class="fas fa-home"></i>
                    <span>仪表盘</span>
                </a>
            </li>
            <li class="menu-item">
                <a href="#" class="menu-link">
                    <i class="fas fa-users"></i>
                    <span>用户管理</span>
                </a>
            </li>
            <li class="menu-item">
                <a href="#" class="menu-link">
                    <i class="fas fa-chart-bar"></i>
                    <span>数据分析</span>
                </a>
            </li>
            <li class="menu-item">
                <a href="#" class="menu-link">
                    <i class="fas fa-cog"></i>
                    <span>系统设置</span>
                </a>
            </li>
            <li class="menu-item">
                <a href="#" class="menu-link">
                    <i class="fas fa-sign-out-alt"></i>
                    <span>退出登录</span>
                </a>
            </li>
        </ul>
    </aside>
    <!-- 主内容区 Main Content -->
    <div class="main-content">
        <!-- 顶部导航栏 Topbar -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <div class="d-flex align-items-center">
                    <button class="btn btn-link d-lg-none" id="mobileSidebarToggle">
                        <i class="fas fa-bars"></i>
                    </button>
                    <h4 class="mb-0 ms-2">欢迎回来, 管理员</h4>
                </div>
                <div class="d-flex align-items-center">
                    <a href="#" class="position-relative me-3">
                        <i class="fas fa-bell fa-lg"></i>
                        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                            3
                        </span>
                    </a>
                    <div class="dropdown">
                        <a href="#" class="d-flex align-items-center text-decoration-none dropdown-toggle" id="dropdownUser" data-bs-toggle="dropdown">
                            <img src="https://ui-avatars.com/api/?name=Admin&background=4e73df&color=fff&size=32" class="rounded-circle me-2" alt="Admin">
                            <span>管理员</span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end text-small shadow">
                            <li><a class="dropdown-item" href="#"><i class="fas fa-user me-2"></i> 个人资料</a></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-cog me-2"></i> 账户设置</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt me-2"></i> 退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </nav>
        <!-- 页面内容 Page Content -->
        <main class="p-4">
            <h2 class="mb-4">仪表盘概览</h2>
            <!-- 统计卡片 Stats Cards -->
            <div class="row g-4 mb-4">
                <div class="col-xl-3 col-md-6">
                    <div class="card border-left-primary shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">总用户数</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800">28,456</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-users fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="card border-left-success shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-success text-uppercase mb-1">总收入</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800">$125,678</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="card border-left-info shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-info text-uppercase mb-1">新订单</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800">1,258</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-shopping-cart fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6">
                    <div class="card border-left-warning shadow h-100 py-2">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">待处理任务</div>
                                    <div class="h5 mb-0 font-weight-bold text-gray-800">45</div>
                                </div>
                                <div class="col-auto">
                                    <i class="fas fa-tasks fa-2x text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 图表和数据表格 Charts and Table -->
            <div class="row">
                <div class="col-xl-8">
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">月度收入趋势</h6>
                        </div>
                        <div class="card-body">
                            <canvas id="revenueChart" width="400" height="200"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4">
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <h6 class="m-0 font-weight-bold text-primary">任务完成率</h6>
                        </div>
                        <div class="card-body">
                            <canvas id="taskChart" width="400" height="200"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 数据表格 Data Table -->
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">用户数据表</h6>
                    <div>
                        <input type="text" class="form-control form-control-sm" id="searchInput" placeholder="搜索用户...">
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>姓名</th>
                                    <th>职位</th>
                                    <th>邮箱</th>
                                    <th>注册日期</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>张三</td>
                                    <td>前端开发</td>
                                    <td>zhangsan@example.com</td>
                                    <td>2025-01-15</td>
                                    <td><span class="badge bg-success">激活</span></td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>李四</td>
                                    <td>后端开发</td>
                                    <td>lisi@example.com</td>
                                    <td>2025-02-20</td>
                                    <td><span class="badge bg-warning">待审核</span></td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>王五</td>
                                    <td>UI设计师</td>
                                    <td>wangwu@example.com</td>
                                    <td>2025-03-10</td>
                                    <td><span class="badge bg-success">激活</span></td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>赵六</td>
                                    <td>产品经理</td>
                                    <td>zhaoliu@example.com</td>
                                    <td>2025-04-05</td>
                                    <td><span class="badge bg-danger">已禁用</span></td>
                                </tr>
                                <tr>
                                    <td>5</td>
                                    <td>孙七</td>
                                    <td>测试工程师</td>
                                    <td>sunqi@example.com</td>
                                    <td>2025-05-01</td>
                                    <td><span class="badge bg-success">激活</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mt-3">
                        <span>显示 1 到 5 条，共 5 条记录</span>
                        <nav aria-label="Page navigation">
                            <ul class="pagination mb-0">
                                <li class="page-item disabled">
                                    <a class="page-link" href="#" tabindex="-1">上一页</a>
                                </li>
                                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                <li class="page-item disabled">
                                    <a class="page-link" href="#">下一页</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- Custom JS -->
    <script src="script.js"></script>
</body>
</html>

style.css (自定义样式)

/* 全局样式 */
:root {
    --sidebar-width: 250px;
    --sidebar-collapsed-width: 70px;
    --primary-color: #4e73df;
    --sidebar-dark-bg: #5a5c69;
    --sidebar-dark-hover-bg: #4b4d59;
}
body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f8f9fc;
    overflow-x: hidden;
}
/* 侧边栏样式 */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width);
    background-color: var(--sidebar-dark-bg);
    color: white;
    transition: all 0.3s ease-in-out;
    z-index: 1000;
}
.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}
.sidebar-header {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
}
.logo i {
    font-size: 1.5rem;
    margin-right: 0.75rem;
}
.logo span {
    font-size: 1.25rem;
    font-weight: 700;
    white-space: nowrap;
}
.sidebar.collapsed .logo span {
    display: none;
}
.toggle-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    margin-left: auto;
}
.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.menu-link {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s ease;
}
.menu-link:hover {
    background-color: var(--sidebar-dark-hover-bg);
    color: white;
}
.menu-link.active {
    background-color: var(--primary-color);
    color: white;
}
.menu-link i {
    font-size: 1.1rem;
    width: 24px;
    margin-right: 1rem;
}
.sidebar.collapsed .menu-link span {
    display: none;
}
区样式 */
.main-content {
    margin-left: var(--sidebar-width);
    transition: all 0.3s ease-in-out;
    min-height: 100vh;
}
.main-content.expanded {
    margin-left: var(--sidebar-collapsed-width);
}
/* 卡片样式 */
.card {
    border: none;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
    border-radius: 0.35rem;
}
.border-left-primary {
    border-left: 0.25rem solid #4e73df !important;
}
.border-left-success {
    border-left: 0.25rem solid #1cc88a !important;
}
.border-left-info {
    border-left: 0.25rem solid #36b9cc !important;
}
.border-left-warning {
    border-left: 0.25rem solid #f6c23e !important;
}
/* 表格样式 */
.table th {
    background-color: #f8f9fc;
    border-top: none;
    font-weight: 600;
}
/* 响应式设计 */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.show {
        transform: translateX(0);
    }
    .main-content {
        margin-left: 0;
    }
}

script.js (交互逻辑)

document.addEventListener('DOMContentLoaded', function() {
    // 侧边栏折叠功能
    const sidebar = document.getElementById('sidebar');
    const mainContent = document.querySelector('.main-content');
    const toggleBtn = document.getElementById('toggleSidebar');
    const mobileToggleBtn = document.getElementById('mobileSidebarToggle');
    function toggleSidebar() {
        sidebar.classList.toggle('collapsed');
        mainContent.classList.toggle('expanded');
    }
    toggleBtn.addEventListener('click', toggleSidebar);
    mobileToggleBtn.addEventListener('click', function() {
        sidebar.classList.toggle('show');
    });
    // 点击主内容区，在移动端关闭侧边栏
    mainContent.addEventListener('click', function() {
        if (window.innerWidth <= 768) {
            sidebar.classList.remove('show');
        }
    });
    // 表格搜索功能
    const searchInput = document.getElementById('searchInput');
    const tableRows = document.querySelectorAll('#dataTable tbody tr');
    searchInput.addEventListener('keyup', function() {
        const searchTerm = this.value.toLowerCase();
        tableRows.forEach(row => {
            const text = row.textContent.toLowerCase();
            if (text.includes(searchTerm)) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        });
    });
    // 初始化图表
    // 月度收入趋势图
    const revenueCtx = document.getElementById('revenueChart').getContext('2d');
    new Chart(revenueCtx, {
        type: 'line',
        data: {
            labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
            datasets: [{
                label: '收入 ($)',
                data: [12500, 19000, 15000, 25000, 22000, 30000, 28000],
                borderColor: '#4e73df',
                backgroundColor: 'rgba(78, 115, 223, 0.05)',
                borderWidth: 2,
                fill: true,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    grid: {
                        color: 'rgba(0, 0, 0, 0.05)'
                    }
                },
                x: {
                    grid: {
                        display: false
                    }
                }
            }
        }
    });
    // 任务完成率饼图
    const taskCtx = document.getElementById('taskChart').getContext('2d');
    new Chart(taskCtx, {
        type: 'doughnut',
        data: {
            labels: ['已完成', '进行中', '待处理'],
            datasets: [{
                data: [65, 25, 10],
                backgroundColor: [
                    '#1cc88a',
                    '#36b9cc',
                    '#f6c23e'
                ],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
});
经典蓝色后台管理系统html模板
（图片来源网络，侵删）