<!-- 引入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>
