Создание сайта на Django: Урок 12, добавление Bootstrap 5.2 в Django 4.1

Создание сайта на Django: Урок 12, добавление Bootstrap 5.2 в Django 4.1

avatar
7 | (offline)
❤️‍🔥Notehunter Developer
Добавлено:
Категория: Руководства «Django»
Комментариев: 0

Добавление Bootstrap 5.2 в Django 4.1

И так, bootstrap вы можете скачать с официального сайта. 

Скачанный архив будет называться: bootstrap-5.2.0-dist. Все ещё будет зависеть от скачанной версии bs.

Пока оставьте архив, перейдите в наш проект и создайте в папке templates папку src, в папке src я создам папку plugins, куда и сложу все файлы от bs.

Если вы сделали все верно, получится как на скрине ниже:

Ладно, это ещё не все. Теперь нам нужно, чтоб из папки src, Django подхватывал статику. Для этого идем в settings.py и находим то, что мы добавляли в уроке

backend/settings.py

STATIC_URL = '/static/'
STATIC_ROOT = (BASE_DIR / 'static')

MEDIA_ROOT = (BASE_DIR / 'media')
MEDIA_URL = '/media/'

И делаем так:

STATIC_URL = '/static/'
STATIC_ROOT = (BASE_DIR / 'static')

STATICFILES_DIRS = [BASE_DIR / 'templates/src']

MEDIA_ROOT = (BASE_DIR / 'media')
MEDIA_URL = '/media/'

Пояснения:

  • Мы добавили для чтения статических файлов папку templates/src в дебаг режиме.
  • Когда мы будем делать деплой, все уйдет в папку static, но об этом уже в другой раз.

И так, а теперь подключим наш bootstrap 5.2 в шаблоны Django.

Идем в main.html

templates/main.html

Меняем это

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
</head>
<body>
{% block content %}

{% endblock %}
</body>
</html>

На следующее:

<!DOCTYPE html>
<html lang="ru">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>{{ title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- INCLUDE CSS -->
    <link href="{% static 'plugins/bootstrap-5.2.0-dist/css/bootstrap.min.css' %}" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container">
    {% block content %}

    {% endblock %}
</div>
<script src="{% static 'plugins/bootstrap-5.2.0-dist/js/bootstrap.bundle.min.js' %}"></script>
</body>
</html>

Пояснения:

  •  {% load static %} необходимый тег для подгрузки статических файлов (img,css,js)
  • <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> для адаптивности
  • <link href="{% static 'plugins/bootstrap-5.2.0-dist/css/bootstrap.min.css' %}" type="text/css" rel="stylesheet"> - подключили css от bs
  • <script src="{% static 'plugins/bootstrap-5.2.0-dist/js/bootstrap.bundle.min.js' %}"></script> - подключили js от bs
  • Ну и добавил container для показа, что мы поставили boostrap
Теги записи: DjangoDev, Уроки Django, Создание сайта,
Комментарии к статье 0
Комментариев нет
Форма добавления комментария (необходима регистрация)