Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

С момента своего выпуска в 2013 году Bootstrap произвел революцию в том, как разработчики оформляют веб-страницы. Bootstrap — это популярный интерфейсный фреймворк, используемый для разработки адаптивных веб-приложений.

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

Давайте узнаем, как установить и настроить Bootstrap в приложении Django.

Как установить Bootstrap

Есть два способа использовать бутстрап 5 в проекте Django. Вы можете установить его в свое приложение или ссылаться на файлы, используя CDN Bootstrap. В этом проекте будет использоваться первый метод.

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

instagram viewer

Затем установите Bootstrap с помощью следующей команды:

пипенв установить джанго-бутстрап5 # устанавливает Bootstrap версии 5

Проверьте Pipfile и убедитесь, что есть зависимость от Bootstrap 5. Теперь вам нужно уведомить проект Django, что вы используете зависимость Bootstrap.

в settings.py файл, зарегистрируйте Bootstrap, как показано ниже:

УСТАНОВЛЕННЫЕ_ПРИЛОЖЕНИЯ = [
'галерея',
'бутстрап5', 
]

Регистрация Bootstrap в настройках проекта подключает зависимость django-bootstrap5 к вашему проекту. Он будет доступен для любого другого приложения, определенного в проекте.

Применение Bootstrap к шаблону

Сначала создайте папку с именем шаблоны в папке вашего приложения. Внутри этой папки создайте base.html файл и navbar.html файл. Шаблоны будут содержать файлы HTML, которые Bootstrap будет стилизовать.

Хотя вы можете применить Bootstrap на navbar.html шаблон, использование базового файла является обычным. А base.html файл будет содержать все сценарии и ссылки для применения к любой странице. Это снижает сложность отдельных шаблонов, делая ваш код чище и проще для понимания.

в base.html файл, включите следующее:

{% загрузить бутстрап5%}
<!ДОКТИП HTML>


<html язык="en">


<голова>


<мета кодировка ="UTF-8">


<мета http-эквивалент="X-UA-совместимый" содержание ="IE=край">


<мета имя ="окно просмотра" содержание ="ширина = ширина устройства, начальный масштаб = 1,0">
<заголовок> Галерея </title>


{% стилей блоков %}


{% bootstrap_css%}


{% конечный блок%}
</head>
<тело>
 {% включать 'navbar.html' %}
 {% блокировать содержимое %} {% endblock %}
 {% заблокировать скрипты %}
<источник сценария ="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" целостность ="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MSXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" перекрестное происхождение ="анонимный">
</script>
 {% bootstrap_javascript%}
</body>
</html>

Сначала загрузите зависимость bootstrap5. Затем создайте два стиля блока, в которых вы определите все стили для шаблонов. Включить {% bootstrap_css%} тег шаблона и ссылку на CSS-файл Bootstrap.

Затем создайте блочный скрипт, определяющий функциональность JavaScript.

В том числе navbar.html в base.html связывает его с Bootstrap.

Протестируйте конфигурацию, добавив стили Bootstrap в navbar.html шаблон:

<класс навигации ="navbar navbar-expand-lg">
<раздел класс ="емкость-жидкость">
<h2 класс="марка" стиль="цвет: зеленый">ПИЧА ГАЛЕРЕЯ</h2>
<класс кнопки ="навигационная панель-переключатель" тип="кнопка" данные-переключатель ="крах" цель данных ="#navbarSupportedContent" ария-управление="navbarSupportedContent" ария-расширенная ="ЛОЖЬ" ария-лейбл ="Переключить навигацию"><я класс ="фас фа-барс"></я></button>
<раздел класс ="свернуть navbar-свернуть" идентификатор ="navbarSupportedContent">
<ул класс="navbar-nav мл-авто mb-2 mb-lg-0">
<ли класс ="элемент навигации"><класс ="nav-link nav-link-1 активен" ария-ток ="страница" ссылка="{% URL-адрес 'дом' %}" стиль="цвет: зеленый">Дом</ а></li>
<ли класс ="элемент навигации"><класс ="нав-ссылка нав-ссылка-2" ссылка="#галерея" стиль="цвет: зеленый">Галерея</ а</li>
</ul>
</div>
</div>
</nav>

Теперь запустите сервер и проверьте свой сайт в браузере. Вы должны увидеть стиль, который Bootstrap применяет к панели навигации.

Зачем использовать Bootstrap в проектах Django?

В основном вы будете использовать Django для внутренней разработки, но он также может создавать потрясающие внешние страницы. Использование Bootstrap для оформления интерфейсных страниц — хорошая практика для новичков в Django. Вы получаете глубокое понимание Django при создании полнофункциональных приложений.

Как и любой интерфейсный фреймворк, вы можете использовать классы Bootstrap с проектом Django для оформления своих веб-страниц. Bootstrap 5 имеет лучшие компоненты и быструю таблицу стилей. Он также имеет улучшенную отзывчивость для современных устройств.

Почему бы не использовать Bootstrap для стилизации и создания потрясающих пользовательских интерфейсов для ваших проектов Django? Django поразит вас своими возможностями в веб-разработке.