Django 与 Bootstrap

2024 年 8 月 29 日 | 阅读 2 分钟

Bootstrap 是一个用于在 Web 应用程序中创建用户界面的框架。它提供 CSS、JS 和其他工具，可帮助创建所需的界面。

在 Django 中，我们可以使用 Bootstrap 来创建更友好的应用程序。

要实现 Bootstrap，我们需要遵循以下步骤。

1. 下载 Bootstrap

访问官方网站 https://bootstrap.ac.cn 在本地计算机上下载 Bootstrap。它是一个 zip 文件，解压缩后可以看到它包含两个文件夹。

2. 创建一个目录

在创建的应用程序中创建一个名为 static 的目录，并将 CSS 和 JS 文件夹放在其中。这些文件夹包含许多文件，请参见屏幕截图。

3. 创建一个模板

首先在应用程序中创建一个 templates 文件夹，然后创建一个 index.htm 文件来实施（链接）Bootstrap CSS 和 JS 文件。

4. 加载 Bootstrap

加载位于 static 文件夹中的 Bootstrap 文件。使用以下代码。

并通过提供文件位置（来源）链接文件。请参阅 index.html 文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load staticfiles %}
    <link href="{% static 'css/bootstrap.min.css' %}" >
    <script src="{% static 'bootstrap.min.js' %}"></script>
    <script>alert();</script>
</head>
<body>
</body>
</html>

在此模板中，我们链接了两个文件，一个是 bootstrap.min.css，第二个是 bootstrap.min.js。让我们看看如何在应用程序中使用它们。

假设，如果我们不使用 Bootstrap，我们的 HTML 登录表单看起来像这样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
</head>
<body>
 <form action="/save" method="post">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
</body>
</html>

输出

加载 Bootstrap 文件后，我们的代码看起来像这样

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    {% load staticfiles %}
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>
<body>
 <form action="/save" method="post">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
</body>
</html>

输出