Подключение Bootstrap к сайту на Django и создание базового стилизованного интерфейса. Без стилей сайт выглядит неудовлетворительно, поэтому использование готового фреймворка, такого как Bootstrap, значительно упрощает процесс. Bootstrap — набор готовых стилей, которые можно использовать без написания собственных CSS-правил. Рекомендуется изучить основы Bootstrap (ссылка на видеокурс может быть предоставлена). В этом уроке основное внимание уделено подключению статических файлов в Django.
Подключение Bootstrap
Вместо использования удаленного сервера с файлами Bootstrap, скачаем файлы на компьютер и разместим их как статические файлы на сайте. Это продемонстрирует, как подключать статические файлы к проекту Django, что пригодится при работе с другими CSS-файлами, картинками и JavaScript-кодом.
- Загрузите Bootstrap с официального сайта. Разархивируйте скачанный архив. Внутри находятся папки css и js с необходимыми файлами.
- В приложении Django (например, main), создайте папку static. Это зарезервированное имя для хранения статических файлов.
- Внутри папки static создайте подпапку с именем приложения (например, main).
- Переместите папки 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.