使用bootstrap展示后端上传的数据
时间: 2023-11-28 13:04:30 浏览: 31
要展示后端上传的数据,我们可以使用Bootstrap的表格组件。以下是一个简单的示例代码:
```html
<!-- 引入Bootstrap的CSS和JS文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 表格结构 -->
<table class="table">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<!-- 使用后端数据循环生成表格行 -->
{% for user in users %}
<tr>
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
<td>{{ user.gender }}</td>
</tr>
{% endfor %}
</tbody>
</table>
```
在上面的代码中,我们使用了Bootstrap的`table`组件来创建一个表格,使用`thead`和`tbody`标签分别定义表头和表体。在表头中,我们定义了四个列,分别是编号、姓名、年龄和性别。在表体中,我们使用后端传递过来的数据循环生成表格行,使用`{{ }}`语法来输出变量值,其中`users`是后端传递过来的数据。这样就可以在前端页面中展示后端上传的数据了。