Django урок 5: Bootstrap стилизация сайта

Подключение Bootstrap к сайту на Django и создание базового стилизованного интерфейса. Без стилей сайт выглядит неудовлетворительно, поэтому использование готового фреймворка, такого как Bootstrap, значительно упрощает процесс. Bootstrap — набор готовых стилей, которые можно использовать без написания собственных CSS-правил. Рекомендуется изучить основы Bootstrap (ссылка на видеокурс может быть предоставлена). В этом уроке основное внимание уделено подключению статических файлов в Django.

Подключение Bootstrap

Вместо использования удаленного сервера с файлами Bootstrap, скачаем файлы на компьютер и разместим их как статические файлы на сайте. Это продемонстрирует, как подключать статические файлы к проекту Django, что пригодится при работе с другими CSS-файлами, картинками и JavaScript-кодом.

  1. Загрузите Bootstrap с официального сайта. Разархивируйте скачанный архив. Внутри находятся папки css и js с необходимыми файлами.
  2. В приложении Django (например, main), создайте папку static. Это зарезервированное имя для хранения статических файлов.
  3. Внутри папки static создайте подпапку с именем приложения (например, main).
  4. Переместите папки css и js из архива Bootstrap в созданную подпапку. Удалите все лишние файлы, оставив только bootstrap.min.css и bootstrap.min.js.

Настройка Django для работы со статическими файлами

В файле settings.py проекта, в разделе STATICFILES_DIRS, укажите путь к папке static. Если такой записи нет, добавьте её. Django собирает статические файлы из всех приложений в одну общую папку. Для избежания конфликтов имен файлов рекомендуется создавать вложенные папки внутри static для каждого приложения.

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

Подключение Bootstrap к шаблону

Подключим файлы Bootstrap к основному шаблону (например, base.html). Для подключения статических файлов используется синтаксис Jinja2.

{% load static %}
<link rel="stylesheet" href="{% static 'main/css/bootstrap.min.css' %}"><

После обновления страницы сайт изменит свой внешний вид в соответствии со стилями Bootstrap. {% static ‘main/css/bootstrap.min.css’ %} динамически генерирует корректный путь к файлу. Это позволяет использовать один и тот же код во всех шаблонах, при этом Django корректно обрабатывает пути к статическим файлам.

Использование Bootstrap в шаблоне

Добавим различные блоки контента на сайт и стилизуем их с помощью классов Bootstrap. Пример кода (полный код доступен по ссылке на сайт):

<div class="container">
  <div class="jumbotron">
    <div class="container">
      <h1>Заголовок</h1>
      <p>{{ blog_content }}</p>
    </div>
  </div>
</div>

Этот код создает блок с использованием классов Bootstrap: container, jumbotron и container для центрирования текста внутри блока jumbotron.

Добавление изображений

Для добавления изображений, создайте папку с именем приложения внутри папки static (например, main/images). Добавьте изображение и подключите его в шаблон используя {% static %}:

<img src="{% static 'main/images/mercedes.png' %}" alt="Mercedes"><

В этом уроке мы научились подключать Bootstrap и другие статические файлы (CSS, JavaScript, изображения) к сайту на Django, используя механизм статических файлов Django и синтаксис Jinja2. Мы также создали простой, но стилизованный веб-сайт с использованием классов Bootstrap. В дальнейшем будем улучшать этот сайт и изучать дополнительные возможности Django.

Что будем искать? Например,программа