bootstrap上下两行卡片 每行三个 卡片由图片和文字构成 怎么写代码
时间: 2024-10-20 21:02:58 浏览: 13
bootstrap卡片图文列表布局特效代码
Bootstrap中创建两行三列的卡片布局,你可以使用`card`、`row`和`col-md-4`等响应式网格系统组件。假设每个卡片由图片(img)和标题(h3或p)组成,这里是一个基本示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Bootstrap Card Layout</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<!-- 第一行 -->
<div class="col-md-4 mb-4">
<div class="card">
<img src="图片路径1" alt="图片描述1" class="card-img-top">
<div class="card-body">
<h3 class="card-title">卡片标题1</h3>
<p class="card-text">这是卡片内容1...</p>
</div>
</div>
</div>
<!-- 另两个卡片... (以此类推) -->
</div>
<div class="row mt-4"> <!-- 行间距调整 -->
<!-- 第二行 -->
<div class="col-md-4 mb-4">
<div class="card">
<img src="图片路径2" alt="图片描述2" class="card-img-top">
<div class="card-body">
<h3 class="card-title">卡片标题2</h3>
<p class="card-text">这是卡片内容2...</p>
</div>
</div>
</div>
<!-- 再两个卡片... (同样编写) -->
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
</body>
</html>
```
记得替换`图片路径1`, `图片路径2`以及实际的卡片标题和内容。如果你需要自适应屏幕大小,可以考虑使用媒体查询调整布局。
阅读全文