<!-- 引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> 为什么最后引入
例子
<!-- templates/inspection_records.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>机房巡检记录</title>
<!-- 引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<h1 class="mb-4">机房巡检记录</h1>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>机房名称</th>
<th>巡检人员</th>
<th>巡检日期</th>
<th>温度（摄氏度）</th>
<th>湿度（百分比）</th>
<th>服务器状态</th>
<th>交换机状态</th>
<th>发现的问题</th>
</tr>
</thead>
<tbody>
{% for record in records %}
<tr>
<td>{{ record.room_name }}</td>
<td>{{ record.inspector }}</td>
<td>{{ record.inspection_date }}</td>
<td>{{ record.temperature }}</td>
<td>{{ record.humidity }}</td>
<td>{{ record.get_server_status_display }}</td>
<td>{{ record.get_switch_status_display }}</td>
<td>{{ record.issues_found }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<!-- 引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
在典型的Web开发流程中，通常将页面的样式（CSS）文件放在 <head> 标签中引入，而将页面的脚本（JavaScript）文件放在页面底部，即在 </body> 标签之前引入。这样做有几个原因：
-
提高性能: 将 JavaScript 文件放在页面底部可以提高页面加载性能。当浏览器遇到 JavaScript 文件时，它会阻塞页面的渲染，直到该文件完全加载和执行。通过将 JavaScript 文件置于页面底部，可以使页面其他内容更快地加载和呈现给用户。
-
避免阻塞渲染: 放置 JavaScript 文件在底部有助于避免阻塞页面内容的渲染。如果 JavaScript 文件位于页面顶部，浏览器会等待 JavaScript 加载和执行后才继续渲染其余内容，导致页面显示延迟。
-
保证脚本依赖性: 通常，JavaScript 文件可能依赖于页面上已经存在的元素或结构。将 JavaScript 文件放在底部可以确保页面上所需的 HTML 结构已经加载，避免了可能由于缺少依赖项而导致的错误。
总结来说，将 JavaScript 文件放在页面底部可以改善页面加载性能并确保更好的用户体验。在上述示例中，我们将 Bootstrap 的 JavaScript 文件放在页面底部，以便达到这些优势。
展示效果
根据这个文章 使用django model 建立一个机房巡检记录表
然后写了一个前端页面
再次优化
<!-- templates/inspection_records.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>机房巡检记录</title>
<!-- 引入Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<h1 class="mb-4">机房巡检记录</h1>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>机房名称</th>
<th>巡检人员</th>
<th>巡检日期</th>
<th>温度（摄氏度）</th>
<th>湿度（百分比）</th>
<th>服务器状态</th>
<th>交换机状态</th>
<th>发现的问题</th>
</tr>
</thead>
<tbody>
{% for record in records %}
<tr>
<td>{{ record.room_name }}</td>
<td>{{ record.inspector }}</td>
<td>{{ record.inspection_date }}</td>
<td style="color: {% if record.temperature > 25 %}red{% else %}green{% endif %}">{{ record.temperature }}</td>
<td style="color: {% if record.humidity > 70 %}red{% else %}green{% endif %}">{{ record.humidity }}</td>
<td style="background-color: {% if record.server_status == '异常' %}red{% else %}green{% endif %}">{{ record.get_server_status_display }}</td>
<td style="background-color: {% if record.switch_status == '异常' %}red{% else %}green{% endif %}">{{ record.get_switch_status_display }}</td>
<td>{{ record.issues_found }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<!-- 引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
