Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti. Přečtěte si více.

Od svého vydání v roce 2013 způsobil Bootstrap revoluci ve způsobu, jakým vývojáři stylizují webové stránky. Bootstrap je populární front-end framework používaný k navrhování responzivních webových aplikací.

Django používá ke stylování webových stránek předem vytvořené styly CSS a pluginy JavaScriptu Bootstrap. I když to snižuje potíže se stylingem, jeho konfigurace v Django může být náročná.

Pojďme se naučit, jak nainstalovat a nakonfigurovat Bootstrap v aplikaci Django.

Jak nainstalovat Bootstrap

Existují dva způsoby použijte Bootstrap 5 v projektu Django. Můžete jej nainstalovat do aplikace nebo odkazovat na soubory pomocí Bootstrap's CDN. Tento projekt bude používat předchozí metodu.

Před instalací Bootstrapu vytvořit projekt Django a aplikaci s názvem galerie. Aplikace bude fotogalerií a pomocí Bootstrapu budete stylizovat navigační lištu aplikace.

instagram viewer

Dále nainstalujte Bootstrap pomocí následujícího příkazu:

pipenv Nainstalujte django-bootstrap5 # nainstaluje Bootstrap verze 5

Zkontrolujte Pipfile a potvrďte, že existuje závislost na Bootstrap 5. Nyní musíte projektu Django oznámit, že používáte závislost Bootstrap.

V settings.py soubor, zaregistrujte Bootstrap, jak je znázorněno níže:

INSTALLED_APPS = [
'galerie',
'bootstrap5', 
]

Registrace Bootstrap v nastavení projektu propojí závislost django-bootstrap5 s vaším projektem. Bude k dispozici jakékoli jiné aplikaci definované v projektu.

Použijte Bootstrap na šablonu

Nejprve vytvořte složku s názvem šablony ve vaší složce aplikace. Uvnitř této složky vytvořte a základna.html soubor a navbar.html soubor. Šablony budou obsahovat soubory HTML, které Bootstrap upraví.

Zatímco můžete použít Bootstrap na navbar.html šablony, použití základního souboru je běžné. A základna.html bude obsahovat všechny skripty a odkazy, které lze použít na libovolnou stránku. Snižuje složitost jednotlivých šablon, díky čemuž je váš kód čistší a snáze srozumitelný.

V základna.html soubor, zahrnují následující:

{% load bootstrap5 %}
<!DOCTYPE html>


<html jazyk="en">


<hlava>


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


<meta http-equiv="X-UA-kompatibilní" obsah ="IE=hrana">


<meta jméno="výřez" obsah ="width=device-width, initial-scale=1.0">
<titul> Galerie </title>


{% stylů blokování %}


{% bootstrap_css %}


{% endblock %}
</head>
<tělo>
 {% zahrnout 'navbar.html' %}
 {% block content %} {% endblock %}
 {% blokových skriptů %}
<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>

Nejprve načtěte závislost bootstrap5. Poté vytvořte dva styly bloků, kde nadefinujete všechny styly pro šablony. Zahrnout {% bootstrap_css %} šablonu a odkaz na soubor CSS Bootstrap.

Dále vytvořte blokový skript, který definuje funkčnost JavaScriptu.

Včetně navbar.html v základna.html propojí jej s Bootstrap.

Otestujte konfiguraci přidáním stylů Bootstrap do navbar.html šablona:

<třída navigace="navbar navbar-expand-lg">
<třída div="nádoba-tekutina">
<třída h2="značka" styl="barva: zelená">GALERIE PICHA</h2>
<třída tlačítka="navbar-toggler" typ="knoflík" data-toggle="kolaps" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="Nepravdivé" aria-label="Přepnout navigaci"><i třída ="fas fa-bary"></i></button>
<třída div="sbalit navbar-collapse" id="navbarSupportedContent">
<ul třída="navbar-nav ml-auto mb-2 mb-lg-0">
<li třída="navigační položka"><třída ="nav-link nav-link-1 aktivní" árie-proud="strana" href="{% url 'Domov' %}" styl="barva: zelená">Domov</A></li>
<li třída="navigační položka"><třída ="nav-link nav-link-2" href="#galerie" styl="barva: zelená">Galerie</A</li>
</ul>
</div>
</div>
</nav>

Nyní spusťte server a zkontrolujte svůj web v prohlížeči. Měli byste vidět styl, který Bootstrap aplikuje na navigační panel.

Proč používat Bootstrap v projektech Django?

Django budete většinou používat pro vývoj back-endu, ale dokáže vytvořit úžasné front-endové stránky. Použití Bootstrapu ke stylování front-end stránek je dobrou praxí pro začátečníky Django. Když vytváříte full-stack aplikace, Django do hloubky pochopíte.

Jako každý front-end framework můžete ke stylování webových stránek použít třídy Bootstrap s projektem Django. Bootstrap 5 má lepší komponenty a rychlý styl. Má také zlepšenou odezvu pro moderní zařízení.

Proč nepoužít Bootstrap ke stylování a vytváření úžasných uživatelských rozhraní pro vaše projekty Django? Django vás ohromí svými schopnostmi ve vývoji webu.