Ako používať Bootstrap v projekte Django

Čitatelia ako vy pomáhajú podporovať MUO. Keď uskutočníte nákup pomocou odkazov na našej stránke, môžeme získať pridruženú províziu. Čítaj viac.

Od svojho vydania v roku 2013, Bootstrap spôsobil revolúciu v spôsobe, akým vývojári upravujú webové stránky. Bootstrap je populárny front-end framework používaný na navrhovanie responzívnych webových aplikácií.

Django používa na úpravu webových stránok vopred vytvorené štýly CSS a doplnky JavaScript od Bootstrapu. Aj keď to znižuje problémy so štýlom, jeho konfigurácia v Django môže byť náročná.

VYUŽITIE VIDEA DŇA

Poďme sa naučiť, ako nainštalovať a nakonfigurovať Bootstrap v aplikácii Django.

Ako nainštalovať Bootstrap

Existujú dva spôsoby použite Bootstrap 5 v projekte Django. Môžete si ho nainštalovať do svojej aplikácie alebo použiť odkaz na súbory Bootstrap's CDN . Tento projekt bude používať predchádzajúcu metódu.

Pred inštaláciou Bootstrapu vytvoriť projekt Django a aplikáciu s názvom galéria. Aplikácia bude fotogaléria a pomocou Bootstrapu upravíte navigačnú lištu aplikácie.

Potom nainštalujte Bootstrap pomocou nasledujúceho príkazu:

pipenv install django-bootstrap5  # installs Bootstrap version 5

Skontrolujte súbor Pipfile a potvrďte, že existuje závislosť od Bootstrap 5. Teraz musíte projektu Django oznámiť, že používate závislosť Bootstrap.

V settings.py súbor, zaregistrujte Bootstrap, ako je uvedené nižšie:

INSTALLED_APPS = [ 
    'gallery', 
    'bootstrap5',    
]

Registrácia Bootstrapu v nastaveniach projektu pripojí závislosť django-bootstrap5 k vášmu projektu. Bude k dispozícii pre akúkoľvek inú aplikáciu definovanú v projekte.

inštaláciu mac os nebolo možné dokončiť

Použiť Bootstrap na šablónu

Najprv vytvorte priečinok s názvom šablóny v priečinku aplikácie. V tomto priečinku vytvorte a base.html súbor a a navbar.html súbor. Šablóny budú obsahovať HTML súbory, ktoré Bootstrap upraví.

Aj keď môžete použiť Bootstrap na navbar.html šablóny, použitie základného súboru je bežné. A base.html bude obsahovať všetky skripty a odkazy, ktoré sa majú použiť na ľubovoľnú stránku. Znižuje zložitosť jednotlivých šablón, vďaka čomu je váš kód čistejší a zrozumiteľnejší.

V base.html súbor, zahŕňajú nasledovné:

{% 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>

Najprv načítajte závislosť bootstrap5. Potom vytvorte dva štýly blokov, kde zadefinujete všetky štýly pre šablóny. Zahrňte {% bootstrap_css %} šablónu a odkaz na súbor CSS Bootstrap.

Ďalej vytvorte blokový skript, ktorý definuje funkčnosť JavaScriptu.

Vrátane navbar.html v base.html prepojí ho s Bootstrap.

Otestujte konfiguráciu pridaním štýlov Bootstrap do súboru navbar.html šablóna:

streamovanie televíznych relácií zdarma, bez registrácie

<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>

Teraz spustite server a skontrolujte svoje stránky v prehliadači. Mali by ste vidieť štýl, ktorý Bootstrap aplikuje na navigačnú lištu.

Prečo používať Bootstrap v projektoch Django?

Django budete väčšinou používať na vývoj back-endu, ale dokáže vytvoriť aj úžasné front-end stránky. Použitie Bootstrapu na úpravu front-end stránok je dobrou praxou pre začiatočníkov Django. Pri vytváraní úplných aplikácií získate hĺbkové pochopenie Django.

Ako každý front-end framework, môžete použiť triedy Bootstrap s projektom Django na štýl vašich webových stránok. Bootstrap 5 má lepšie komponenty a rýchly štýl. Má tiež zlepšenú odozvu pre moderné zariadenia.

Prečo nepoužiť Bootstrap na štýl a vytvorenie úžasných používateľských rozhraní pre vaše projekty Django? Django vás ohromí svojimi schopnosťami vo vývoji webu.