Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

От пускането си през 2013 г. Bootstrap революционизира начина, по който разработчиците стилизират уеб страниците. Bootstrap е популярна предна рамка, използвана за проектиране на адаптивни уеб приложения.

Django използва предварително изградените CSS стилове на Bootstrap и плъгини за JavaScript за стилизиране на уеб страници. Въпреки че намалява неприятностите при стилизирането, конфигурирането му в Django може да бъде предизвикателство.

Нека научим как да инсталираме и конфигурираме Bootstrap в приложение на Django.

Как да инсталирате Bootstrap

Има два начина за използвайте Bootstrap 5 в проект на Django. Можете да го инсталирате във вашето приложение или да препратите към файловете, като използвате CDN на Bootstrap. Този проект ще използва предишния метод.

Преди да инсталирате Bootstrap, създайте Django проект и приложение, наречено галерия. Приложението ще бъде фотогалерия и ще използвате Bootstrap, за да оформите навигационната лента на приложението.

instagram viewer

След това инсталирайте Bootstrap със следната команда:

pipenv Инсталирай django-bootstrap5 # инсталира Bootstrap версия 5

Проверете Pipfile и потвърдете, че има зависимост от Bootstrap 5. Сега трябва да уведомите проекта Django, че използвате зависимост от Bootstrap.

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

INSTALLED_APPS = [
'галерия',
'bootstrap5', 
]

Регистрирането на Bootstrap в настройките на проекта свързва зависимостта django-bootstrap5 с вашия проект. Той ще бъде достъпен за всяко друго приложение, дефинирано в проекта.

Приложете Bootstrap върху шаблон

Първо създайте папка с име шаблони в папката на вашето приложение. В тази папка създайте a база.html файл и a navbar.html файл. Шаблоните ще съдържат HTML файлове, които Bootstrap ще стилизира.

Докато можете да приложите Bootstrap на navbar.html шаблон, използването на основен файл е конвенционално. А база.html ще съдържа всички скриптове и връзки, които да се приложат към всяка страница. Той намалява сложността на отделните шаблони, като прави кода ви по-чист и по-лесен за разбиране.

В база.html файл, включва следното:

{% зареждане на bootstrap5 %}
<!DOCTYPE html>


<html lang="en">


<глава>


<мета charset="UTF-8">


<мета http-equiv="X-UA-съвместим" съдържание="IE=ръб">


<мета име="прозорец за изглед" съдържание="ширина=ширина на устройството, начален мащаб=1.0">
<заглавие> Галерия </title>


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


{% bootstrap_css %}


{% endblock %}
</head>
<тяло>
 {% включват 'navbar.html' %}
 {% block content %} {% endblock %}
 {% блокиране на скриптове %}
<скрипт src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" почтеност="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" кръстосано начало="анонимен">
</script>
 {% bootstrap_javascript %}
</body>
</html>

Първо заредете зависимостта bootstrap5. След това създайте два блокови стила, където ще дефинирате всички стилове за шаблоните. Включете {% bootstrap_css %} шаблонен етикет и връзка към CSS файла на Bootstrap.

След това създайте блоков скрипт, който дефинира функционалността на JavaScript.

Включително navbar.html в база.html го свързва с Bootstrap.

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

<навигационен клас="navbar navbar-expand-lg">
<div клас="контейнер-течност">
<h2 клас="марка" стил="цвят: зелен">ГАЛЕРИЯ ПИЧА</h2>
<бутон клас="превключвател на навигационната лента" тип="бутон" data-toggle="колапс" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" ария-разширена="невярно" ария-етикет="Превключване на навигацията"><аз клас="фас фа-барове"></i></button>
<div клас="свиване на навигационната лента-свиване" id="navbarSupportedContent">
<ул клас="navbar-nav ml-auto mb-2 mb-lg-0">
<ли клас="навигационен елемент"><клас="nav-link nav-link-1 активен" ария-ток="страница" href="{% url 'У дома' %}" стил="цвят: зелен">У дома</a></li>
<ли клас="навигационен елемент"><клас="nav-link nav-link-2" href="#галерия" стил="цвят: зелен">Галерия</a</li>
</ul>
</div>
</div>
</nav>

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

Защо да използвате Bootstrap в Django проекти?

Най-вече ще използвате Django за бек-енд разработка, но може да създаде и невероятни предни страници. Използването на Bootstrap за стилизиране на предни страници е добра практика за начинаещи в Django. Получавате задълбочено разбиране на Django, когато създавате приложения с пълен стек.

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

Защо не използвате Bootstrap за стилизиране и създаване на невероятни потребителски интерфейси за вашите Django проекти? Django ще ви удиви с възможностите си в уеб разработката.