Упростите дизайн вашего сайта Django с помощью мощного фреймворка
С момента своего выпуска в 2013 году Bootstrap произвел революцию в том, как разработчики оформляют веб-страницы.Bootstrap – это популярный front-end фреймворк, используемый для разработки отзывчивых веб-приложений
Django использует готовые стили CSS Bootstrap и плагины JavaScript для оформления веб-страниц. Хотя это и уменьшает хлопоты по созданию стиля, его настройка в Django может быть сложной
Давайте узнаем, как установить и настроить Bootstrap в приложении Django
Как установить Bootstrap
Есть два способа использовать Bootstrap 5 в проекте Django. Вы можете установить его в свое приложение или ссылаться на файлы, используя CDN Bootstrap. В данном проекте будет использован первый способ
Перед установкой Bootstrap создайте проект Django и приложение под названием gallery. Приложение будет представлять собой фотогалерею, и вы будете использовать Bootstrap для стилизации навигационной панели приложения
Затем установите Bootstrap с помощью следующей команды:
pipenv install django-bootstrap5 # installs Bootstrap version 5
Проверьте Pipfile и убедитесь, что в нем есть зависимость Bootstrap 5. Теперь вам нужно уведомить проект Django о том, что вы используете зависимость Bootstrap
В файле settings.py зарегистрируйте Bootstrap, как показано ниже:
INSTALLED_APPS = [
'gallery',
'bootstrap5',
]
Регистрация Bootstrap в настройках проекта подключает зависимость django-bootstrap5 к вашему проекту. Она будет доступна для любого другого приложения, определенного в проекте
Примените Bootstrap к шаблону
Сначала создайте папку с именем templates в папке приложения. Внутри этой папки создайте файл base.html и файл navbar.html. Шаблоны будут содержать HTML-файлы, которые Bootstrap будет стилизовать
Хотя вы можете применить Bootstrap на шаблоне navbar.html, использование базового файла является традиционным. Файл base.html будет содержать все скрипты и ссылки для применения к любой странице. Он уменьшает сложность отдельных шаблонов, делая ваш код чище и проще для понимания
В файл base.html включите следующее:
{% load bootstrap5 %}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1. 0'>
<title> Gallery </title>
{% block styles %}
{% bootstrap_css %}
{% endblock %}
</head>
<body>
{% include 'navbar.html' %}
{% block content %} {% endblock %}
{% block scripts %}
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5. 0. 2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'>
</script>
{% bootstrap_javascript %}
</body>
</html>
Сначала загрузите зависимость bootstrap5. Затем создайте два блока стилей, в которых вы определите все стили для шаблонов. Включите тег шаблона {% bootstrap_css %} и ссылку на файл Bootstrap CSS
Далее создайте блок скрипта, который определяет функциональность JavaScript
Включение navbar.html в base.html связывает его с Bootstrap
Проверьте конфигурацию, добавив стили Bootstrap в шаблон navbar.html:
<nav class='navbar navbar-expand-lg'>
<div class='container-fluid'>
<h2 class='brand' style='color:green'>PICHA GALLERY</h2>
<button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarSupportedContent' aria-controls='navbarSupportedContent' aria-expanded='false' aria-label='Toggle navigation'><i class='fas fa-bars'></i></button>
<div class='collapse navbar-collapse' id='navbarSupportedContent'>
<ul class='navbar-nav ml-auto mb-2 mb-lg-0'>
<li class='nav-item'><a class='nav-link nav-link-1 active' aria-current='page' href='{% url 'home' %}' style='color:green'>Home</a></li>
<li class='nav-item'><a class='nav-link nav-link-2' href='#gallery' style='color:green'>Gallery</a</li>
</ul>
</div>
</div>
</nav>
Теперь запустите сервер и проверьте свой сайт в браузере. Вы должны увидеть стилизацию, которую Bootstrap применяет к навигационной панели
Зачем использовать Bootstrap в проектах Django?
В основном вы будете использовать Django для разработки внутренних компонентов, но с его помощью можно создавать и потрясающие внешние страницы. Использование Bootstrap для стилизации внешних страниц – хорошая практика для начинающих Django. Вы получите глубокое понимание Django, когда будете создавать полнофункциональные приложения
Как и любой другой front-end фреймворк, вы можете использовать классы Bootstrap в проекте Django для стилизации ваших веб-страниц.Bootstrap 5 имеет улучшенные компоненты и быструю таблицу стилей. Он также обладает улучшенной отзывчивостью для современных устройств
Почему бы не использовать Bootstrap для стилизации и создания удивительных пользовательских интерфейсов для ваших проектов Django? Django поразит вас своими возможностями в веб-разработке
Комментировать