请将flask的render_template的HTML模板,并使用bootstrap框架,在模板中,我们使用一个for循环来遍历lines列表,并使用if语句来根据线路状态将相应的行标记为红色。
时间: 2024-02-23 09:57:59 浏览: 24
好的,以下是一个示例的HTML模板代码,使用了Bootstrap框架,并使用for循环和if语句来渲染lines列表:
```html
<!DOCTYPE html>
<html>
<head>
<title>Lines Status</title>
<meta charset="utf-8">
<!-- 引入Bootstrap框架 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Lines Status</h1>
<table class="table">
<thead>
<tr>
<th>Line</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{% for line in lines %}
<tr {% if line.status == "delayed" %}class="table-danger"{% endif %}>
<td>{{ line.name }}</td>
<td>{{ line.status }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<!-- 引入Bootstrap的JS文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
</body>
</html>
```
在这个模板中,我们使用了Bootstrap的表格样式,并使用了for循环来遍历lines列表,同时使用if语句来根据线路状态将相应的行标记为红色。具体来说,我们在每个tr标签中添加了一个class属性,并根据line.status的值来设置这个属性的值为"table-danger",这样就可以使用Bootstrap的表格样式来呈现红色的背景色。
在模板中,我们还使用了{{ line.name }}和{{ line.status }}来渲染每一行的线路名称和状态。需要注意的是,在这里我们使用了Flask的模板语法,即{% %}来包含for循环和if语句,以及{{ }}来包含变量。