bootstrap商品列表
时间: 2023-08-05 11:02:06 浏览: 37
Bootstrap是一个流行的前端开发框架,可以用它来创建漂亮的商品列表。以下是一个简单的示例:
```html
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">商品名称</h5>
<p class="card-text">商品描述</p>
<a href="#" class="btn btn-primary">购买</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">商品名称</h5>
<p class="card-text">商品描述</p>
<a href="#" class="btn btn-primary">购买</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">商品名称</h5>
<p class="card-text">商品描述</p>
<a href="#" class="btn btn-primary">购买</a>
</div>
</div>
</div>
</div>
</div>
```
这是一个基于Bootstrap的商品列表,使用了栅格系统来排列商品卡片。每个商品卡片包含商品图片、名称、描述和购买按钮。你可以根据需要调整卡片的样式和布局。