下面是一个使用 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>© 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的间距和排版工具类
-
💡 使用建议
-
将占位图片URL替换为您自己的图片资源
-
根据实际需求调整颜色方案和内容文本
-
可以添加更多Bootstrap组件如模态框、表单等
-
确保所有链接指向正确的页面地址
这个模板使用了Bootstrap 5的最新特性，完全响应式，并在各种设备上都能良好显示。您可以直接使用并根据需要进行定制修改。