Как подключить Bootstrap 4 к Django: простое руководство с пошаговой инструкцией ✨

Для подключения Bootstrap 4 к Django, вам необходимо выполнить следующие шаги: 1. Установите пакет django-bootstrap4 с помощью следующей команды: 

    pip install django-bootstrap4
2. Добавьте 'bootstrap4' в раздел INSTALLED_APPS своего файла настроек settings.py: 

    INSTALLED_APPS = [
        ...
        'bootstrap4',
        ...
    ]
3. Добавьте теги шаблона Bootstrap 4 к вашему HTML-коду, чтобы использовать его стили и компоненты. Например: 

    {% load bootstrap4 %}
    
    
    
        ...
        {% bootstrap_css %}
        ...
    
    
        ...
        {% bootstrap_javascript jquery='full' %}
        ...
Теперь Bootstrap 4 будет подключен к вашему проекту Django. Вы можете использовать его классы стилей и компоненты для создания красивых пользовательских интерфейсов.

Детальный ответ

Как подключить Bootstrap 4 к Django

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

Шаг 1: Установка Bootstrap 4

Первым шагом является установка Bootstrap 4 в ваш проект Django. Существует несколько способов установки Bootstrap 4, но мы воспользуемся самым простым и быстрым способом, который подразумевает использование CDN (Content Delivery Network).

Для этого вам понадобится добавить следующий код в раздел <head> вашего HTML-файла:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">

Теперь Bootstrap 4 будет загружаться в ваш проект через CDN при открытии вашего веб-приложения.

Шаг 2: Подключение JavaScript-библиотеки

После установки основного CSS-файла Bootstrap 4, вам также потребуется подключить JavaScript-библиотеку, чтобы использовать все функциональные возможности Bootstrap.

Добавьте следующий код перед закрывающим тегом </body> вашего HTML-файла:

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>

Теперь JavaScript-функциональность Bootstrap будет доступна в вашем проекте.

Шаг 3: Создание шаблона Django

Когда у вас есть установленный Bootstrap 4 и подключены соответствующие файлы CSS и JavaScript, вы можете начать использовать его в ваших Django-шаблонах.

Давайте создадим простой шаблон Django с использованием Bootstrap 4. Создайте новую директорию внутри вашего проекта Django и назовите ее "templates". Внутри этой директории создайте новый файл с именем "base.html". Ваша директория файлов Django должна выглядеть следующим образом:

myproject/
├── manage.py
├── myproject/
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── templates/
    └── base.html

Откройте файл "base.html" и добавьте следующий код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мой проект Django с Bootstrap 4</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Мой проект</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Главная</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">О нас</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Контакты</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container mt-4">
        <h1>Привет, мир!</h1>
        <p>Это мой первый проект Django с использованием Bootstrap 4.</p>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>
</body>
</html>

Теперь вы можете использовать этот базовый шаблон ваших Django-представлений и расширять его по мере необходимости для каждой страницы.

Заключение

В этой статье мы рассмотрели, как подключить Bootstrap 4 к проекту Django. Мы установили Bootstrap 4 через CDN, подключили соответствующие файлы CSS и JavaScript, а также создали простой базовый шаблон Django, использующий Bootstrap 4 стили.

Теперь вы можете использовать все преимущества и функциональность Bootstrap 4 в своем проекте Django и создавать красивый и отзывчивый веб-интерфейс.

Видео по теме

Как Подключить Bootstrap К Django?

Уроки Django (Создание сайта) / Урок #5 - Добавление Bootstrap стилей к сайту

#15. Подключение статических файлов | Уроки по Django 4

Похожие статьи:

Как подключить Bootstrap 4 к Django: простое руководство с пошаговой инструкцией ✨