当前位置：首页 > news >正文

Bootstrap 5 响应式网站首页模板

news 2025/10/17 13:30:43

下面是一个使用 Bootstrap 5 创建的现代化响应式网站首页模板，包含导航栏、轮播图、功能卡片和页脚等常见部分。✨

🌐 Bootstrap 5 网站首页模板

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</title><!-- Bootstrap 5 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><!-- Bootstrap Icons --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"><style>.hero-section {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: white;padding: 100px 0;}.feature-icon {width: 60px;height: 60px;background: rgba(79, 70, 229, 0.1);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-bottom: 1rem;color: #4f46e5;font-size: 1.5rem;}.card {transition: transform 0.3s ease;border: none;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);}.card:hover {transform: translateY(-5px);}.carousel-item img {height: 500px;object-fit: cover;}</style>
</head>
<body><!-- 导航栏 --><nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top shadow-sm"><div class="container"><a class="navbar-brand fw-bold text-primary" href="#"><i class="bi bi-stack"></i> 企业品牌</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 me-auto"><li class="nav-item"><a class="nav-link active" 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><li class="nav-item"><a class="nav-link" href="#">联系我们</a></li></ul><form class="d-flex"><button class="btn btn-outline-primary me-2" type="button">登录</button><button class="btn btn-primary" type="button">免费试用</button></form></div></div></nav><!-- 轮播图 --><div id="mainCarousel" class="carousel slide" data-bs-ride="carousel"><div class="carousel-indicators"><button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="0" class="active"></button><button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="1"></button><button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="2"></button></div><div class="carousel-inner"><div class="carousel-item active"><img src="https://via.placeholder.com/1920x500/4f46e5/ffffff?text=第一张幻灯片" class="d-block w-100" alt="第一张幻灯片"><div class="carousel-caption d-none d-md-block"><h2>创新科技解决方案</h2><p>为企业提供最先进的数字化转型升级方案</p></div></div><div class="carousel-item"><img src="https://via.placeholder.com/1920x500/10b981/ffffff?text=第二张幻灯片" class="d-block w-100" alt="第二张幻灯片"><div class="carousel-caption d-none d-md-block"><h2>专业团队服务</h2><p>拥有十年行业经验的技术专家团队</p></div></div><div class="carousel-item"><img src="https://via.placeholder.com/1920x500/ef4444/ffffff?text=第三张幻灯片" class="d-block w-100" alt="第三张幻灯片"><div class="carousel-caption d-none d-md-block"><h2>客户成功案例</h2><p>已为500+企业提供优质服务</p></div></div></div><button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span></button><button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next"><span class="carousel-control-next-icon"></span></button></div><!-- 主要内容区 --><div class="container my-5"><!-- 特性介绍 --><div class="row text-center mb-5"><div class="col-lg-4 col-md-6 mb-4"><div class="feature-icon mx-auto"><i class="bi bi-lightning-charge"></i></div><h3>高效性能</h3><p class="text-muted">采用最新技术栈，确保系统运行流畅稳定，提升用户体验</p></div><div class="col-lg-4 col-md-6 mb-4"><div class="feature-icon mx-auto"><i class="bi bi-shield-check"></i></div><h3>安全可靠</h3><p class="text-muted">多重安全防护机制，保障企业数据安全和业务连续性</p></div><div class="col-lg-4 col-md-6 mb-4"><div class="feature-icon mx-auto"><i class="bi bi-phone"></i></div><h3>响应式设计</h3><p class="text-muted">完美适配各种终端设备，随时随地访问您的业务系统</p></div></div><!-- 产品卡片 --><h2 class="text-center mb-4">我们的产品</h2><div class="row"><div class="col-lg-4 col-md-6 mb-4"><div class="card h-100"><img src="https://via.placeholder.com/400x250/6366f1/ffffff?text=产品一" 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/400x250/10b981/ffffff?text=产品二" 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/400x250/f59e0b/ffffff?text=产品三" 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><!-- 页脚 --><footer class="bg-dark text-white py-5"><div class="container"><div class="row"><div class="col-lg-4 col-md-6 mb-4"><h5>关于我们</h5><p>我们是一家专注于企业数字化转型的技术公司，致力于为客户提供最优质的解决方案。</p><div class="d-flex"><a href="#" class="text-white me-3"><i class="bi bi-wechat"></i></a><a href="#" class="text-white me-3"><i class="bi bi-weibo"></i></a><a href="#" class="text-white me-3"><i class="bi bi-linkedin"></i></a><a href="#" class="text-white"><i class="bi bi-github"></i></a></div></div><div class="col-lg-2 col-md-6 mb-4"><h5>快速链接</h5><ul class="list-unstyled"><li><a href="#" class="text-white-50 text-decoration-none">首页</a></li><li><a href="#" class="text-white-50 text-decoration-none">关于我们</a></li><li><a href="#" class="text-white-50 text-decoration-none">产品服务</a></li><li><a href="#" class="text-white-50 text-decoration-none">联系我们</a></li></ul></div><div class="col-lg-3 col-md-6 mb-4"><h5>联系我们</h5><ul class="list-unstyled"><li><i class="bi bi-geo-alt me-2"></i> 北京市朝阳区某某大厦</li><li><i class="bi bi-telephone me-2"></i> 400-123-4567</li><li><i class="bi bi-envelope me-2"></i> contact@company.com</li></ul></div><div class="col-lg-3 col-md-6 mb-4"><h5>新闻资讯</h5><p>订阅我们的新闻通讯，获取最新产品更新和行业洞察</p><div class="input-group"><input type="email" class="form-control" placeholder="请输入邮箱"><button class="btn btn-primary" type="button">订阅</button></div></div></div><hr class="mt-4"><div class="text-center"><p>&copy; 2023 企业品牌. 保留所有权利.</p></div></div></footer><!-- Bootstrap 5 JS --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

🛠️ 主要功能与组件说明

响应式导航栏
- 使用 navbar-expand-lg 实现大屏幕展开、小屏幕折叠
- 包含品牌logo、导航链接和行动按钮
- sticky-top 类实现滚动时导航栏固定顶部
轮播图组件
- 使用Bootstrap Carousel展示多张横幅图片
- 包含指示器和左右控制按钮
- 支持自动轮播和手动切换
栅格布局系统
- 使用 container、row、col 类创建响应式布局
- 在不同屏幕尺寸下自动调整列数和排列方式
功能卡片设计
- 使用Bootstrap Card组件展示产品特性
- 添加悬停效果提升交互体验
- 图标与文字结合，提升视觉吸引力
页脚信息
- 包含公司介绍、快速链接、联系信息和邮件订阅
- 使用Bootstrap的间距和排版工具类