用bootstrap写一个购物车的订单信息页面
时间: 2023-08-22 19:04:19 浏览: 70
好的,以下是一个简单的购物车订单信息页面示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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-5">
<h1 class="mb-4">购物车订单信息</h1>
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h5 class="mb-0">收货地址</h5>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label for="name">姓名</label>
<input type="text" class="form-control" id="name" placeholder="请输入姓名">
</div>
<div class="form-group">
<label for="phone">手机号码</label>
<input type="text" class="form-control" id="phone" placeholder="请输入手机号码">
</div>
<div class="form-group">
<label for="address">详细地址</label>
<textarea class="form-control" id="address" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
</div>
<div class="card mt-4">
<div class="card-header">
<h5 class="mb-0">订单详情</h5>
</div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th>商品名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品1</td>
<td>100</td>
<td>2</td>
<td>200</td>
</tr>
<tr>
<td>商品2</td>
<td>50</td>
<td>3</td>
<td>150</td>
</tr>
<tr>
<td colspan="3" class="text-right">总计:</td>
<td>350</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h5 class="mb-0">订单支付</h5>
</div>
<div class="card-body">
<p>应付总额:<strong>350</strong> 元</p>
<button type="button" class="btn btn-success btn-block">立即支付</button>
</div>
</div>
</div>
</div>
</div>
<!-- 引入jQuery和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/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</body>
</html>
```
这个页面包含了收货地址、订单详情和订单支付三个部分,其中使用了Bootstrap的表单组件、表格组件和卡片组件等。你可以根据自己的需求修改样式和内容。