生成一段bootstrap的二手汽车交易系统的代码
时间: 2023-06-16 22:03:58 浏览: 86
基于Flask与Bootstrap的博客系统开源代码
好的,以下是一段简单的Bootstrap二手汽车交易系统的代码:
```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.0/css/bootstrap.min.css">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">二手汽车交易系统</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">车辆列表</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">发布信息</a>
</li>
</ul>
</div>
</nav>
<!-- 主体内容 -->
<div class="container mt-5">
<h1 class="text-center mb-5">二手车辆列表</h1>
<div class="row">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="https://via.placeholder.com/150x150.png" 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 class="card-img-top" src="https://via.placeholder.com/150x150.png" 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 class="card-img-top" src="https://via.placeholder.com/150x150.png" 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 JS文件 -->
<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.0/js/bootstrap.min.js"></script>
</body>
</html>
```
该代码包含一个导航栏和一个车辆列表。车辆列表使用了Bootstrap的卡片组件展示车辆的图片、名称和描述信息,并提供了一个查看详情的按钮。您可以根据实际需求修改和完善代码。
阅读全文