html card 列表 组件
时间: 2023-10-08 12:04:33 浏览: 41
Bootstrap 中提供了很多卡片(card)相关的组件,其中包括卡片列表(card list)。卡片列表可以用来展示一组相关的信息,例如产品列表、文章列表等。以下是一个简单的卡片列表示例:
```html
<div class="card-list">
<div class="card">
<img src="https://via.placeholder.com/150x150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">产品名称1</h5>
<p class="card-text">产品描述1</p>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/150x150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">产品名称2</h5>
<p class="card-text">产品描述2</p>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/150x150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">产品名称3</h5>
<p class="card-text">产品描述3</p>
</div>
</div>
</div>
```
在上面的代码中,我们使用了 "card-list" 类来设置卡片列表的样式。每个卡片都包含了一个图片、一个标题和一个描述。通过在一个容器元素上添加 "card" 类来创建卡片。