Č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á.

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.

instagram viewer

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

pipenv Inštalácia django-bootstrap5 # nainštaluje Bootstrap verzie 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 = [
'galéria',
'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.

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 jazyk="en">


<hlavu>


<meta znaková sada="UTF-8">


<meta http-ekviv="X-UA-kompatibilné" obsah ="IE=okraj">


<meta meno="výrez" obsah ="šírka=šírka zariadenia, počiatočná mierka=1,0">
<titul> Galéria </title>


{% štýlov blokovania %}


{% bootstrap_css %}


{% koncový blok %}
</head>
<telo>
 {% zahŕňajú 'navbar.html' %}
 {% block content %} {% endblock %}
 {% blokových skriptov %}
<skript src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrita ="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymný">
</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:

<trieda navigácie="navbar navbar-expand-lg">
<trieda div="nádoba-kvapalina">
<h2 trieda="značka" štýl="farba: zelená">GALÉRIA PICHA</h2>
<trieda tlačidiel="navbar-toggler" typ="tlačidlo" data-toggle="kolaps" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="falošný" aria-label="Prepnúť navigáciu"><ja trieda="fas fa-bary"></i></button>
<trieda div="zbaliť navbar-collapse" id="navbarSupportedContent">
<ul trieda="navbar-nav ml-auto mb-2 mb-lg-0">
<li trieda="navigačná položka"><trieda ="nav-link nav-link-1 aktívny" ária-prúd="stránku" href="{% url 'Domov' %}" štýl="farba: zelená">Domov</a></li>
<li trieda="navigačná položka"><trieda ="nav-link nav-link-2" href="#galéria" štýl="farba: zelená">Galéria</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.