Bootstrap 5 提供了丰富的组件来构建现代化的网页布局，包括导航栏、卡片组件和响应式栅格系统。
导航栏 (Navbar)
创建响应式导航栏：
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" 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">
<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>
</ul>
<form class="d-flex ms-auto">
<input class="form-control me-2" type="search" placeholder="搜索">
<button class="btn btn-outline-light" type="submit">搜索</button>
</form>
</div>
</div>
</nav>
卡片组件 (Card)
创建商品卡片：
<div class="card" style="width: 18rem;">
<img src="product1.jpg" class="card-img-top" alt="商品图片">
<div class="card-body">
<h5 class="card-title">商品名称</h5>
<p class="card-text">这是一段商品描述，介绍商品的特性和优势。</p>
<div class="d-flex justify-content-between align-items-center">
<span class="h5 text-danger">¥299.00</span>
<button class="btn btn-primary">加入购物车</button>
</div>
<div class="mt-2">
<span class="badge bg-success">有货</span>
<span class="badge bg-warning text-dark">热卖</span>
</div>
</div>
</div>
栅格系统 (Grid System)
使用栅格系统创建响应式布局：
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
<!-- 内容 -->
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
<!-- 内容 -->
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
<!-- 内容 -->
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
<!-- 内容 -->
</div>
</div>
</div>
商品列表布局
结合栅格和卡片创建商品列表：
<div class="container mt-4">
<div class="row">
<!-- 商品1 -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-4">
<div class="card h-100">
<img src="product1.jpg" class="card-img-top" alt="商品1">
<div class="card-body d-flex flex-column">
<h5 class="card-title">智能手机</h5>
<p class="card-text flex-grow-1">高性能智能手机，配备最新处理器和优质摄像头。</p>
<div class="mt-auto">
<div class="d-flex justify-content-between align-items-center">
<span class="h5 text-danger">¥2999</span>
<button class="btn btn-sm btn-outline-primary">购买</button>
</div>
</div>
</div>
</div>
</div>
<!-- 商品2 -->
<div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-4">
<div class="card h-100">
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
新品
</span>
<img src="product2.jpg" class="card-img-top" alt="商品2">
<div class="card-body d-flex flex-column">
<h5 class="card-title">笔记本电脑</h5>
<p class="card-text flex-grow-1">轻薄便携，性能强劲，适合办公和娱乐。</p>
<div class="mt-auto">
<div class="d-flex justify-content-between align-items-center">
<span class="h5 text-danger">¥5999</span>
<button class="btn btn-sm btn-primary">加入购物车</button>
</div>
</div>
</div>
</div>
</div>
<!-- 更多商品... -->
</div>
</div>
标签页导航 (Tabs)
创建标签页导航：
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#home" type="button">
首页
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile" type="button">
商品分类
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#contact" type="button">
联系我们
</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home">
<!-- 首页内容 -->
</div>
<div class="tab-pane fade" id="profile">
<!-- 商品分类内容 -->
</div>
<div class="tab-pane fade" id="contact">
<!-- 联系我们内容 -->
</div>
</div>
分页组件 (Pagination)
为商品列表添加分页：
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<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"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">下一页</a>
</li>
</ul>
</nav>
实用CSS类
/* 自定义卡片悬停效果 */
.card-hover {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
/* 价格样式 */
.price-original {
text-decoration: line-through;
color: #6c757d;
font-size: 0.9em;
}
.price-discount {
color: #dc3545;
font-weight: bold;
}
/* 商品标签 */
.product-badge {
position: absolute;
top: 10px;
right: 10px;
z-index: 1;
}
最佳实践
- 使用
container 或 container-fluid 作为布局容器
- 合理使用响应式断点（xs, sm, md, lg, xl, xxl）
- 为移动设备优先设计布局
- 使用
mb-* 类为卡片添加间距
- 为导航栏添加适当的响应式断点
- 确保所有图片都有
alt 属性
- 使用语义化的HTML结构
注意：确保在项目中正确引入Bootstrap 5的CSS和JavaScript文件，所有组件才能正常工作。
提示： 这是一个重要的概念，需要特别注意理解和掌握。
注意： 这是一个常见的错误点，请避免犯同样的错误。