{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{# <link rel="stylesheet" href="/static/plugins/bootstrap-5.3.0/css/bootstrap.css">#}
<link rel="stylesheet" href="{% static '/plugins/bootstrap-5.3.0/css/bootstrap.css' %}">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="mt-3">用户列表</h1>.
<button type="button" class="btn btn-primary">测试按钮</button>
</div>
<div class="row mt-3">
<img src="{% static 'img/1.png' %}" alt="饼状图" width="300px">
</div>
<H1 class="mt-3">模板语法学习 </H1>
<div class="row mt-3">
<div class="">
<div>{{ name1 }}</div>
<hr>
<H3 class="mt-3">列表</H3>
<div>{{ roles }}</div>
<div>{{ roles.0 }}</div>
<div>{{ roles.1 }}</div>
<div>{{ roles.2 }}</div>
</div>
<hr>
</div>
<H3 class="mt-3">列表FOR循环</H3>
<div class="row mt-3">
<div class="">
{% for item in roles %}
<span>{{ item }}</span>
{% endfor %}
</div>
</div>
<hr>
<H3 class="mt-3">字典</H3>
<div class="row mt-3">
<div class="">
{{ u_info }}
</div>
<div class="">
{{ u_info.name }}
</div>
<div class="">
{{ u_info.age }}
</div>
<div class="">
{{ u_info.role }}
<H3 class="mt-3">字典FOR循环</H3>
</div>
<div class="">
{% for item in u_info.keys %}
<span>{{ item }}</span>
{% endfor %}
</div>
<div class="">
{% for item in u_info.values %}
<span>{{ item }}</span>
{% endfor %}
</div>
<div class="">
<ul>
{% for k,v in u_info.items %}
<li>{{ k }} = {{ v }}</li>
{% endfor %}
</ul>
</div>
<hr>
<H3 class="mt-3">条件语句</H3>
<div class="row mt-3">
<div class="">
{% if name1 == "刘备" %}
<h4>name1 == "刘备"</h4>
{% else %}
<h4>name1 不是 "刘备"</h4>
{% endif %}
</div>
</div>
<hr>
</div>
<script src="{% static 'js/jquery-3.6.4.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-5.3.0/js/bootstrap.js' %}"></script>
</body>
</html>
