Как да използвате Bootstrap в Django проект

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

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

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

MAKEUSEOF ВИДЕО НА ДЕНЯ

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

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

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

Преди да инсталирате Bootstrap, създайте Django проект и приложение, наречено галерия. Приложението ще бъде фотогалерия и ще използвате 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 върху шаблон

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

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

В база.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 %} шаблонен етикет и връзка към CSS файла на Bootstrap.

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

Включително navbar.html в база.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, когато създавате приложения с пълен стек.

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

игри, които не се нуждаят от флаш плейър

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