使用Django中的Bootstrap5

2 年 ago

韵, 科

2 minutes

使用Django时使用Bootstrap的步骤。

总结

当开始创建Django应用程序时，其中一项要做的事是设置Bootstrap。
目标操作系统为Windows。
我们将使用Visual Studio Code（以下简称VSCode）。
请按照以下步骤进行创建。

创建views.py文件

请参阅以下内容以创建环境。

预计在事前进行了以下设置。

安装django-bootstrap。

在虚拟环境中安装django-bootstrap5。

(venv) PS C:\ws\sample> pip install django-bootstrap5
Collecting django-bootstrap5
  Downloading django_bootstrap5-22.2-py3-none-any.whl (24 kB)
Requirement already satisfied: Django>=3.2 in c:\ws\sample\venv\lib\site-packages (from django-bootstrap5) (4.1.5)
Requirement already satisfied: asgiref<4,>=3.5.2 in c:\ws\sample\venv\lib\site-packages (from Django>=3.2->django-bootstrap5) (3.6.0)
Requirement already satisfied: tzdata in c:\ws\sample\venv\lib\site-packages (from Django>=3.2->django-bootstrap5) (2022.7)
Requirement already satisfied: sqlparse>=0.2.2 in c:\ws\sample\venv\lib\site-packages (from Django>=3.2->django-bootstrap5) (0.4.3)
Installing collected packages: django-bootstrap5
Successfully installed django-bootstrap5-22.2

将其注册到settings.py中

将django-bootstrap5添加到settings.py中。

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
+    'django_bootstrap5',
    'app01',
]

创建基本模板

接下来将以此HTML的公共部分作为基准模板进行创建。
以后创建的模板将继承该基准模板进行创建。

{% load django_bootstrap5 %}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>{{title}}</title>
    <meta charset="utf-8">
    {% bootstrap_css %}
    {% bootstrap_javascript %}
  </head>
  <body>
    {% block content %}
    {% endblock content %}
  </body>
</html>

创建模板

将模板文件中的内容继承基础模板。

{% extends 'app01/base.html' %}
{% block content %}
  <div class="bg-primary text-white">
    {{text}}
  </div>
{% endblock content %}

创建views.py文件

我给基础模板取了一个标题，所以我会添加该部分的内容。

from django.shortcuts import render

# Create your views here.

def index(request):
    message = {
        'title':'app01',
        'text':'Hello',
    }
    return render(request, 'app01/index.html', message)

通过这个，你将可以使用Bootstrap。