bootstrap写一个留言板的html 页面,继承base.html 留言板中用户输入名称,意见及联系方式 点击提交后显示在留言板上
时间: 2024-06-08 07:09:46 浏览: 127
可以尝试以下代码:
```html
{% extends 'base.html' %}
{% block content %}
<div class="container">
<h1>留言板</h1>
<form action="" method="post">
{% csrf_token %}
<div class="form-group">
<label for="name">姓名</label>
<input type="text" class="form-control" id="name" name="name" required>
</div>
<div class="form-group">
<label for="opinion">意见</label>
<textarea class="form-control" id="opinion" name="opinion" rows="3" required></textarea>
</div>
<div class="form-group">
<label for="contact">联系方式</label>
<input type="text" class="form-control" id="contact" name="contact" required>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
<hr>
{% if messages %}
<div class="alert alert-success" role="alert">
{{ messages }}
</div>
{% endif %}
{% for message in messages %}
<div class="card mb-3">
<div class="card-header">
{{ message.name }} 于 {{ message.timestamp }} 留言
</div>
<div class="card-body">
<p class="card-text">{{ message.opinion }}</p>
<p class="card-text">联系方式:{{ message.contact }}</p>
</div>
</div>
{% empty %}
<p>目前还没有留言。</p>
{% endfor %}
</div>
{% endblock %}
```
需要注意的是,这里使用了 Bootstrap 的样式,需要在 `base.html` 中引入 Bootstrap 的 CSS 和 JavaScript 文件。另外,需要在视图中处理表单数据,并将留言信息存储到数据库中。同时,还需在视图中将留言信息传递给模板以显示在留言板上。
阅读全文