用bootstrap写一个douwuche订单信息
时间: 2023-08-24 22:05:05 浏览: 47
以下是一个简单的使用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.6.0/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h1>豆腐车订单信息</h1>
<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="tel" class="form-control" id="phone" placeholder="请输入手机号">
</div>
<div class="form-group">
<label for="address">收货地址</label>
<input type="text" class="form-control" id="address" placeholder="请输入收货地址">
</div>
<div class="form-group">
<label for="count">数量</label>
<input type="number" class="form-control" id="count" placeholder="请输入数量">
</div>
<div class="form-group">
<label for="notes">备注</label>
<textarea class="form-control" id="notes" rows="3" placeholder="请输入备注"></textarea>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
<!-- 引入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入Popper.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
<!-- 引入Bootstrap.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
```
以上代码中,我们使用了Bootstrap的表单组件,包括输入框、下拉框、多选框等。其中,`form-group`类用于包裹表单元素,并添加样式;`form-control`类用于设置表单元素的样式和大小。最后,通过`btn`类来创建一个提交按钮。
相关推荐
![](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)