Bootstrap单页模板如何快速搭建响应式网页？-网站模板-锦华智联科技

模板特点

响应式设计: 基于 Bootstrap 5，在手机、平板和桌面设备上都有完美的显示效果。
现代化组件: 包含导航栏、英雄区、特性介绍、作品集、客户评价、联系表单和页脚。
平滑滚动: 点击导航链接时，页面会平滑滚动到对应部分,而不是跳转。
导航高亮: 当你滚动页面时,当前所在区域的导航项会自动高亮显示。
可定制性: 代码结构清晰，您可以轻松修改颜色、文字、图片和链接。

完整代码

您可以直接将以下所有代码复制到一个 index.html 文件中,然后用浏览器打开即可看到效果。

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的 Bootstrap 单页网站</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons (可选，用于图标) -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <style>
        /* 自定义样式 */
        :root {
            --bs-primary: #0d6efd; /* 主色调 */
            --bs-secondary: #6c757d; /* 次要色调 */
        }
        html {
            scroll-behavior: smooth; /* 全局平滑滚动 */
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        }
        /* 导航栏样式 */
        .navbar {
            transition: background-color 0.3s ease;
        }
        .navbar-scrolled {
            background-color: rgba(255, 255, 255, 0.95) !important;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .nav-link {
            color: var(--bs-secondary) !important;
            font-weight: 500;
            margin: 0 10px;
            transition: color 0.3s ease;
        }
        .nav-link:hover, .nav-link.active {
            color: var(--bs-primary) !important;
        }
        /* 英雄区样式 */
        .hero-section {
            background: linear-gradient(rgba(13, 110, 253, 0.8), rgba(13, 110, 253, 0.8)), url('https://via.placeholder.com/1920x800') center/cover no-repeat;
            color: white;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .hero-section h1 {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
        }
        .hero-section p {
            font-size: 1.25rem;
            margin-bottom: 2rem;
        }
        /* 特性卡片样式 */
        .feature-icon {
            font-size: 3rem;
            color: var(--bs-primary);
            margin-bottom: 1rem;
        }
        .feature-card {
            height: 100%;
            text-align: center;
            transition: transform 0.3s ease;
        }
        .feature-card:hover {
            transform: translateY(-10px);
        }
        /* 作品集样式 */
        .portfolio-item {
            margin-bottom: 30px;
            position: relative;
            overflow: hidden;
            border-radius: 10px;
        }
        .portfolio-img {
            width: 100%;
            height: 300px;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(13, 110, 253, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        .portfolio-item:hover .portfolio-overlay {
            opacity: 1;
        }
        .portfolio-item:hover .portfolio-img {
            transform: scale(1.1);
        }
        /* 页脚样式 */
        footer {
            background-color: #343a40;
            color: white;
            padding: 3rem 0 2rem;
        }
        .social-links a {
            color: white;
            font-size: 1.5rem;
            margin: 0 15px;
            transition: color 0.3s ease;
        }
        .social-links a:hover {
            color: var(--bs-primary);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
        <div class="container">
            <a class="navbar-brand fw-bold" 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 ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="#home">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#features">特性</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#portfolio">作品集</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#testimonials">评价</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">联系</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 英雄区 -->
    <section id="home" class="hero-section">
        <div class="container">
            <h1>欢迎来到我的世界</h1>
            <p>我们致力于创造卓越的数字体验，让您的想法变为现实。</p>
            <a href="#features" class="btn btn-light btn-lg">了解更多</a>
        </div>
    </section>
    <!-- 特性介绍 -->
    <section id="features" class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold">我们的特性</h2>
                <p class="text-secondary">为您提供最专业、最全面的服务</p>
            </div>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card feature-card h-100 p-4 border-0 shadow-sm">
                        <div class="feature-icon">
                            <i class="bi bi-lightning-charge"></i>
                        </div>
                        <h4>快速高效</h4>
                        <p class="text-secondary">采用最前沿的技术，确保项目快速交付，让您抢占市场先机。</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card feature-card h-100 p-4 border-0 shadow-sm">
                        <div class="feature-icon">
                            <i class="bi bi-palette"></i>
                        </div>
                        <h4>设计精美</h4>
                        <p class="text-secondary">拥有顶尖的设计团队，为您打造独特且富有吸引力的视觉体验。</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card feature-card h-100 p-4 border-0 shadow-sm">
                        <div class="feature-icon">
                            <i class="bi bi-shield-check"></i>
                        </div>
                        <h4>安全可靠</h4>
                        <p class="text-secondary">我们高度重视数据安全，采用多重加密和防护措施，保障您的信息安全。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 作品集 -->
    <section id="portfolio" class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold">作品集</h2>
                <p class="text-secondary">看看我们之前完成的一些精彩项目</p>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="portfolio-item">
                        <img src="https://via.placeholder.com/400x300" alt="项目1" class="portfolio-img">
                        <div class="portfolio-overlay">
                            <a href="#" class="btn btn-light">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="portfolio-item">
                        <img src="https://via.placeholder.com/400x300" alt="项目2" class="portfolio-img">
                        <div class="portfolio-overlay">
                            <a href="#" class="btn btn-light">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="portfolio-item">
                        <img src="https://via.placeholder.com/400x300" alt="项目3" class="portfolio-img">
                        <div class="portfolio-overlay">
                            <a href="#" class="btn btn-light">查看详情</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 客户评价 -->
    <section id="testimonials" class="py-5">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold">客户评价</h2>
                <p class="text-secondary">听听他们怎么说</p>
            </div>
            <div class="row">
                <div class="col-md-4 text-center">
                    <div class="card border-0 shadow-sm p-4">
                        <i class="bi bi-star-fill text-warning"></i>
                        <i class="bi bi-star-fill text-warning"></i>
                        <i class="bi bi-star-fill text-warning"></i>
                        <i class="bi bi-star-fill text-warning"></i>
                        <i class="bi bi-star-fill text-warning"></i>
                        <p class="mt-3">"团队非常专业，项目超出了我们的预期，强烈推荐！"</p>
                        <h6 class="fw-bold">- 张先生</h6>
                    </div>
                </div>
                <div class="col-md-4 text-center">
                    <div class="card border-0 shadow-sm p-4">
                        <i class="bi bi-star-fill text-warning"></i>
                        <i class="bi bi-star-fill text-warning"></i>
                        <i class="bi bi-star-fill text-warning"></i>
                        <i class="bi bi-star-fill text-warning"></i>
                        <i class="bi bi-star-fill text-warning"></i>
                        <p class="mt-3">"沟通顺畅，交付准时，设计感十足。"</p>
                        <h6 class="fw-bold">- 李女士</h6>
                    </div>
                </div>
                <div class="col-md-4 text-center">
                    <div class="card border-0 shadow-sm p-4">
                        <i class="bi bi-star-fill text-warning"></i>
                        <i class="bi bi-star-fill text-warning"></i>
                        <i class="bi bi-star-fill text-warning"></i>
                        <i class="bi bi-star-fill text-warning"></i>
                        <i class="bi bi-star-fill text-warning"></i>
                        <p class="mt-3">"服务一流，后续维护也很到位，让我们很省心。"</p>
                        <h6 class="fw-bold">- 王总</h6>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 联系我们 -->
    <section id="contact" class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="fw-bold">联系我们</h2>
                <p class="text-secondary">有项目想法？让我们一起聊聊吧！</p>
            </div>
            <div class="row justify-content-center">
                <div class="col-md-8">
                    <form id="contactForm">
                        <div class="mb-3">
                            <label for="name" class="form-label">姓名</label>
                            <input type="text" class="form-control" id="name" required>
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">邮箱</label>
                            <input type="email" class="form-control" id="email" required>
                        </div>
                        <div class="mb-3">
                            <label for="message" class="form-label">留言</label>
                            <textarea class="form-control" id="message" rows="5" required></textarea>
                        </div>
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary btn-lg">发送消息</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5>我的品牌</h5>
                    <p>&copy; 2025 我的公司. 保留所有权利.</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <div class="social-links">
                        <a href="#"><i class="bi bi-wechat"></i></a>
                        <a href="#"><i class="bi bi-github"></i></a>
                        <a href="#"><i class="bi bi-linkedin"></i></a>
                        <a href="#"><i class="bi bi-twitter"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 自定义 JavaScript -->
    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('navbar-scrolled');
            } else {
                navbar.classList.remove('navbar-scrolled');
            }
        });
        // 导航高亮效果
        document.addEventListener("DOMContentLoaded", function() {
            // 获取所有导航链接和所有区块
            const navLinks = document.querySelectorAll('.nav-link');
            const sections = document.querySelectorAll('section');
            // 监听滚动事件
            window.addEventListener('scroll', () => {
                let current = '';
                sections.forEach(section => {
                    const sectionTop = section.offsetTop;
                    const sectionHeight = section.clientHeight;
                    if (scrollY >= (sectionTop - 200)) {
                        current = section.getAttribute('id');
                    }
                });
                navLinks.forEach(link => {
                    link.classList.remove('active');
                    if (link.getAttribute('href').slice(1) === current) {
                        link.classList.add('active');
                    }
                });
            });
        });
        // 联系表单提交 (示例，实际需要后端支持)
        document.getElementById('contactForm').addEventListener('submit', function(e) {
            e.preventDefault();
            // 这里可以添加表单验证逻辑
            // 模拟发送成功
            const alertDiv = document.createElement('div');
            alertDiv.className = 'alert alert-success alert-dismissible fade show mt-3';
            alertDiv.innerHTML = `
                感谢您的留言！我们会尽快与您联系。
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            `;
            this.appendChild(alertDiv);
            // 清空表单
            this.reset();
            // 3秒后自动关闭提示
            setTimeout(() => {
                alertDiv.remove();
            }, 3000);
        });
    </script>
</body>
</html>

如何使用和自定义

保存文件: 将上面的完整代码复制并粘贴到一个新的文本文件中，将其命名为 index.html。
打开预览: 用任何现代浏览器（如 Chrome, Firefox, Edge）打开这个 index.html 文件,你就能看到一个完整的单页网站。
:
- 文字: 直接在 HTML 中修改 <h1>, <p>, <h2> 等标签内的文字。
- 品牌名称: 修改 <a class="navbar-brand"> 里的文字。
- 图片: 将 src="https://via.placeholder.com/..." 替换为你自己的图片链接。hero-section 的背景图片也可以替换。
- 链接: 修改 <a href="#"> 中的 href 属性,指向你的实际页面或外部链接。
修改样式:
- 在 <style> 标签内，你可以修改颜色、字体大小、间距等。--bs-primary 是主色调变量,你可以修改它的值来改变整个网站的主题色。
功能说明:
- 平滑滚动: 由 html { scroll-behavior: smooth; } 实现。
- 导航高亮: 由底部的 JavaScript 代码实现，它会监听滚动事件，判断哪个区块在视口中，并给对应的导航链接添加 active 类。
- 滚动时导航栏变化: 由 JavaScript 监听 window.scrollY，当页面滚动超过 50px 时，给导航栏添加 navbar-scrolled 类,从而改变背景色和阴影。
- 表单提交: 表单提交目前只是前端模拟，会显示一个成功提示，要使其真正工作,你需要配置后端服务器来处理表单数据。

这个模板为您提供了一个坚实的基础，您可以在此基础上进行扩展和修改,以构建出符合您需求的独特网站。

（图片来源网络，侵删）