用bootstrap写一个小说商店的评论页面可以用于用户交流
时间: 2023-09-22 07:06:41 浏览: 44
好的,以下是一个使用Bootstrap 4的小说商店的评论页面的代码示例,可以用于用户交流:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小说商店评论页面</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 class="my-5">小说商店评论页面</h1>
<div class="row">
<div class="col-md-8">
<form>
<div class="form-group">
<label for="inputName">姓名:</label>
<input type="text" class="form-control" id="inputName" placeholder="请输入您的姓名">
</div>
<div class="form-group">
<label for="inputEmail">邮箱:</label>
<input type="email" class="form-control" id="inputEmail" placeholder="请输入您的邮箱">
</div>
<div class="form-group">
<label for="inputComment">评论:</label>
<textarea class="form-control" id="inputComment" rows="6" placeholder="请输入您的评论"></textarea>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
<div class="col-md-4">
<div class="card my-3">
<div class="card-header">热门评论</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">这本书真的很好看!</li>
<li class="list-group-item">作者写得真是太棒了!</li>
<li class="list-group-item">推荐大家一定要看看这本书!</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2 class="my-4">用户评论</h2>
<div class="media border p-3 my-3">
<img src="https://via.placeholder.com/64" alt="用户头像" class="mr-3 mt-3 rounded-circle">
<div class="media-body">
<h4>用户A <small><i>Posted on February 19, 2022</i></small></h4>
<p>这本书写得真好,值得一读!</p>
</div>
</div>
<div class="media border p-3 my-3">
<img src="https://via.placeholder.com/64" alt="用户头像" class="mr-3 mt-3 rounded-circle">
<div class="media-body">
<h4>用户B <small><i>Posted on February 20, 2022</i></small></h4>
<p>我觉得这本书还可以,但是结局有点令人失望。</p>
</div>
</div>
<div class="media border p-3 my-3">
<img src="https://via.placeholder.com/64" alt="用户头像" class="mr-3 mt-3 rounded-circle">
<div class="media-body">
<h4>用户C <small><i>Posted on February 21, 2022</i></small></h4>
<p>我刚开始看这本书的时候有点不感兴趣,但是看到后面就觉得很棒了!</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
```
该代码包含一个表单和一个热门评论的卡片。表单包含三个字段:姓名、邮箱和评论。它们都是使用Bootstrap表单组件创建的。提交按钮使用Bootstrap按钮组件创建。
下面是新添加的代码,用于显示用户评论:
- 首先,我们创建一个包含所有用户评论的一个大的 `div` 容器,它是一个行(row)组件,包含一个列(column)组件,宽度为12(`<div class="col-md-12">`)。
- 然后,在列中添加一个标题和三个评论,这里使用了Bootstrap的媒体对象组件(media object)来显示评论。每个评论都是一个媒体对象,包含一个用户头像、用户名、发布日期和评论内容。
希望这个示例能够帮助你开始创建小说商店的评论页面,可以用于用户交流!