用bootstrap框架写一个购物车页面
时间: 2023-11-26 22:04:20 浏览: 94
好的,下面是一个简单的购物车页面的代码示例,使用了Bootstrap框架:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<!-- 引入Bootstrap样式文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
<h1>购物车</h1>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">商品名称</th>
<th scope="col">价格</th>
<th scope="col">数量</th>
<th scope="col">操作</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>iPhone 12</td>
<td>6999元</td>
<td><input type="number" value="1" min="1" max="10"></td>
<td><button class="btn btn-danger">删除</button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>iPad Air</td>
<td>4999元</td>
<td><input type="number" value="1" min="1" max="10"></td>
<td><button class="btn btn-danger">删除</button></td>
</tr>
</tbody>
</table>
<div class="text-right">
<h3>总计:11998元</h3>
<button class="btn btn-primary">结算</button>
</div>
</div>
<!-- 引入Bootstrap JavaScript文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</body>
</html>
```
代码解释:
- `<link>` 标签引入了 Bootstrap 的样式文件,`<script>` 标签引入了 Bootstrap 的 JavaScript 文件,这样就可以使用 Bootstrap 的样式和组件了。
- `<table>` 表格用来展示购物车中的商品列表。
- `<thead>` 表头显示了每一列的标题。
- `<tbody>` 表体显示了每个商品的信息,包括名称、价格、数量和操作。
- 数量使用了 `<input>` 标签,可以输入数字,最小值为1,最大值为10。
- 操作列使用了一个 `<button>` 按钮,点击删除对应的商品。
- 最后的总计和结算按钮使用了 Bootstrap 的样式。
以上是一个简单的购物车页面示例,你可以根据自己的需求进行修改和完善。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)