bootstrap写一个结算订单页面
时间: 2023-12-16 07:06:25 浏览: 68
好的,我可以为您提供一个简单的结算订单页面的Bootstrap代码。以下是一个示例代码,您可以根据您的需求进行更改和调整。
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>结算订单页面</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>结算订单</h2>
<div class="row">
<div class="col-md-8">
<form>
<div class="form-group">
<label for="name">姓名:</label>
<input type="text" class="form-control" id="name" placeholder="请输入您的姓名" name="name">
</div>
<div class="form-group">
<label for="email">邮箱:</label>
<input type="email" class="form-control" id="email" placeholder="请输入您的邮箱" name="email">
</div>
<div class="form-group">
<label for="phone">电话:</label>
<input type="tel" class="form-control" id="phone" placeholder="请输入您的电话" name="phone">
</div>
<div class="form-group">
<label for="address">地址:</label>
<input type="text" class="form-control" id="address" placeholder="请输入您的地址" name="address">
</div>
<div class="form-group">
<label for="cardname">持卡人姓名:</label>
<input type="text" class="form-control" id="cardname" placeholder="请输入您的持卡人姓名" name="cardname">
</div>
<div class="form-group">
<label for="cardnumber">卡号:</label>
<input type="text" class="form-control" id="cardnumber" placeholder="请输入您的卡号" name="cardnumber">
</div>
<div class="form-group">
<label for="expmonth">过期月份:</label>
<input type="text" class="form-control" id="expmonth" placeholder="请输入您的过期月份" name="expmonth">
</div>
<div class="form-group">
<label for="expyear">过期年份:</label>
<input type="text" class="form-control" id="expyear" placeholder="请输入您的过期年份" name="expyear">
</div>
<div class="form-group">
<label for="cvv">CVV:</label>
<input type="text" class="form-control" id="cvv" placeholder="请输入您的CVV" name="cvv">
</div>
<button type="submit" class="btn btn-default">提交订单</button>
</form>
</div>
<div class="col-md-4">
<h3>订单总览</h3>
<table class="table table-striped">
<thead>
<tr>
<th>产品</th>
<th>数量</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>产品名称</td>
<td>1</td>
<td>$100.00</td>
</tr>
<tr>
<td>产品名称</td>
<td>2</td>
<td>$200.00</td>
</tr>
<tr>
<td>产品名称</td>
<td>3</td>
<td>$300.00</td>
</tr>
</tbody>
</table>
<p>总价: $600.00</p>
</div>
</div>
</div>
</body>
</html>
```
这个结算订单页面由一个表单和一个订单总览表格组成。您可以将表单中的字段更改为您需要的字段,并根据需要更新订单总览表格。希望这可以帮助到您!