基础响应式网页模板

这是最常用、最基础的模板，适合构建大多数网站，如企业官网、博客、作品集等，它包含了响应式布局、导航栏、主内容区、页脚和必要的元信息。

特点

  • 响应式布局：在手机、平板和桌面设备上都有良好的显示效果。
  • 固定顶部导航栏：方便用户随时访问主要链接。
  • Jumbotron：一个醒目的全宽大屏，用于展示核心信息。
  • 栅格系统：用于灵活地布局内容。
  • 页脚：放置版权信息和辅助链接。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的 Bootstrap 网站</title>
    <!-- 1. 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 可选：自定义样式 -->
    <style>
        body {
            padding-top: 56px; /* 为固定导航栏留出空间 */
        }
        .footer {
            background-color: #f8f9fa;
            padding: 2rem 0;
            margin-top: 3rem;
        }
    </style>
</head>
<body>
    <!-- 固定顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">我的网站</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 ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">关于我们</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">服务</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">联系我们</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 主要内容区 -->
    <main>
        <!-- Jumbotron 大屏展示 -->
        <div class="jumbotron bg-light p-5 rounded-3 mb-4">
            <div class="container py-5">
                <h1 class="display-5 fw-bold">欢迎使用我的网站</h1>
                <p class="fs-4">这是一个使用 Bootstrap 构建的响应式网页模板，它简单、强大且灵活。</p>
                <button class="btn btn-primary btn-lg" type="button">了解更多</button>
            </div>
        </div>
        <!-- 栅格系统布局内容 -->
        <div class="container mb-5">
            <div class="row">
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="card h-100">
                        <img src="https://via.placeholder.com/400x300" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">功能一</h5>
                            <p class="card-text">这是第一项功能的简要描述，它可以是任何你想要展示的内容。</p>
                            <a href="#" class="btn btn-outline-primary">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="card h-100">
                        <img src="https://via.placeholder.com/400x300" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">功能二</h5>
                            <p class="card-text">这是第二项功能的简要描述，Bootstrap 的卡片组件非常实用。</p>
                            <a href="#" class="btn btn-outline-primary">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-12 mb-4">
                    <div class="card h-100">
                        <img src="https://via.placeholder.com/400x300" class="card-img-top" alt="...">
                        <div class="card-body">
                            <h5 class="card-title">功能三</h5>
                            <p class="card-text">这是第三项功能的简要描述，栅格系统让布局变得非常简单。</p>
                            <a href="#" class="btn btn-outline-primary">查看详情</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <span class="text-muted">© 2025 我的网站. 保留所有权利.</span>
        </div>
    </footer>
    <!-- 2. 引入 Bootstrap JS (Popper.js is included) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

登录/注册页面模板

这个模板专门用于构建用户认证相关的页面,包含表单验证、布局和交互元素。

特点

  • 居中卡片布局：在所有设备上，登录表单都优雅地居中显示。
  • 表单组件：使用了输入框、标签、验证提示等。
  • 切换选项卡：允许用户在登录和注册表单之间无缝切换。
  • 响应式设计：在小屏幕上自动调整布局。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">登录 / 注册</title>
    <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;
        }
        .form-signin {
            width: 100%;
            max-width: 400px;
            padding: 15px;
        }
        .form-signin .form-floating:focus-within {
            z-index: 10;
        }
    </style>
</head>
<body>
    <main class="form-signin">
        <form>
            <div class="text-center mb-4">
                <img class="mb-4" src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
                <h1 class="h3 mb-3 font-weight-normal">请登录</h1>
            </div>
            <div class="form-floating">
                <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
                <label for="floatingInput">邮箱地址</label>
            </div>
            <div class="form-floating">
                <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
                <label for="floatingPassword">密码</label>
            </div>
            <div class="form-check text-start my-3">
                <input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault">
                <label class="form-check-label" for="flexCheckDefault">
                    记住我
                </label>
            </div>
            <button class="w-100 btn btn-lg btn-primary" type="submit">登录</button>
            <p class="mt-5 mb-3 text-muted text-center">&copy; 2025–2025</p>
        </form>
    </main>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

仪表盘/管理后台模板

这个模板适用于构建后台管理系统,包含侧边栏导航、顶部状态栏和内容区域。

特点

  • 侧边栏导航：可折叠，方便在小屏幕上切换。
  • 顶部导航栏：显示用户信息、通知和搜索框。
  • 内容区域：使用面包屑导航和卡片组件展示数据。
  • 响应式侧边栏：在移动设备上自动隐藏，通过汉堡菜单触发。

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">管理仪表盘</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <style>
        .sidebar {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            z-index: 100;
            padding: 48px 0 0;
            box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
            background-color: #f8f9fa;
            transition: all 0.3s;
        }
        .sidebar .nav-link {
            color: #333;
            font-weight: 500;
        }
        .sidebar .nav-link.active {
            color: #0d6efd;
            background-color: #e9ecef;
        }
        .sidebar .nav-link i {
            margin-right: 8px;
            width: 20px;
            text-align: center;
        }
        .main-content {
            margin-left: 240px; /* 侧边栏宽度 */
            padding: 20px;
            transition: all 0.3s;
        }
        @media (max-width: 768px) {
            .sidebar {
                margin-left: -240px; /* 默认隐藏 */
            }
            .sidebar.show {
                margin-left: 0;
            }
            .main-content {
                margin-left: 0;
            }
        }
    </style>
</head>
<body>
    <!-- 侧边栏 -->
    <nav id="sidebar" class="sidebar">
        <div class="position-sticky">
            <div class="px-3 mb-4">
                <h4 class="d-flex align-items-center text-dark mb-0">
                    <i class="bi bi-speedometer2 me-2"></i>
                    管理后台
                </h4>
            </div>
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link active" href="#">
                        <i class="bi bi-house-door"></i>
                        首页概览
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <i class="bi bi-people"></i>
                        用户管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <i class="bi bi-cart3"></i>
                        订单管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">
                        <i class="bi bi-gear"></i>
                        系统设置
                    </a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- 主要内容区 -->
    <div class="main-content">
        <!-- 顶部导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
            <div class="container-fluid">
                <button class="btn btn-link d-md-none" type="button" id="sidebarToggle">
                    <i class="bi bi-list fs-4"></i>
                </button>
                <div class="d-flex ms-auto align-items-center">
                    <a class="nav-link me-3" href="#"><i class="bi bi-bell"></i></a>
                    <a class="nav-link" href="#"><img src="https://ui-avatars.com/api/?name=Admin" class="rounded-circle" width="32" alt="User"></a>
                </div>
            </div>
        </nav>
        <!-- 页面内容 -->
        <div class="container-fluid">
            <h1 class="h3 mb-4">首页概览</h1>
            <div class="row">
                <div class="col-xl-3 col-md-6 mb-4">
                    <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">50,230</div>
                                </div>
                                <div class="col-auto">
                                    <i class="bi bi-people-fill fs-2 text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-md-6 mb-4">
                    <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">¥ 34,245</div>
                                </div>
                                <div class="col-auto">
                                    <i class="bi bi-currency-yen fs-2 text-gray-300"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.getElementById('sidebarToggle').addEventListener('click', function() {
            document.getElementById('sidebar').classList.toggle('show');
        });
    </script>
</body>
</html>

如何使用这些模板

  1. 复制代码：选择你需要的模板，复制全部 HTML 代码。
  2. 保存文件：将代码粘贴到一个新的文本文件中，并将其保存为 .html 格式，index.html。
  3. 预览：用任何现代浏览器（如 Chrome, Firefox, Edge）打开这个文件，你就可以看到模板的样式。
  4. ：根据你的需求，修改文本、图片链接、颜色和布局，你可以通过修改 HTML 结构或添加自定义 CSS 来进行调整。

关键 Bootstrap 组件总结

  • 布局：container, row, col-* (栅格系统)
  • 导航：navbar, nav, breadcrumb
  • jumbotron (v5中可用<div class="p-5">替代), card, list-group, table
  • 表单：form, input, select, textarea, form-floating, form-check
  • 组件：button, alert, badge, modal, carousel
  • 辅助类：text-* (文本颜色), bg-* (背景色), d-* (显示), m-* (外边距), p-* (内边距)

希望这些模板能帮助你快速开始你的项目！