Az Önhöz hasonló olvasók támogatják a MUO-t. Amikor a webhelyünkön található linkek használatával vásárol, társult jutalékot kaphatunk. Olvass tovább.

2013-as megjelenése óta a Bootstrap forradalmasította a fejlesztők weboldalak stílusát. A Bootstrap egy népszerű front-end keretrendszer, amelyet érzékeny webalkalmazások tervezésére használnak.

A Django a Bootstrap előre elkészített CSS-stílusait és JavaScript beépülő moduljait használja a weboldalak stílusához. Noha csökkenti a stílussal kapcsolatos nehézségeket, a Djangoban való konfigurálása kihívást jelenthet.

Tanuljuk meg a Bootstrap telepítését és konfigurálását egy Django alkalmazásban.

A Bootstrap telepítése

Ennek két módja van használd a Bootstrap 5-öt egy Django projektben. Telepítheti az alkalmazásba, vagy hivatkozhat a fájlokra Bootstrap CDN-je. Ez a projekt az előbbi módszert fogja használni.

A Bootstrap telepítése előtt hozzon létre egy Django projektet és egy galéria nevű alkalmazást. Az alkalmazás egy fotógaléria lesz, és a Bootstrap segítségével alakíthatja ki az alkalmazás navigációs sávját.

Ezután telepítse a Bootstrap programot a következő paranccsal:

pipenv telepítés django-bootstrap5 # telepíti a Bootstrap 5-ös verzióját

Ellenőrizze a Pipfile-t, és ellenőrizze, hogy van-e Bootstrap 5-függőség. Most értesítenie kell a Django projektet, hogy Bootstrap függőséget használ.

Ban,-ben settings.py fájl, regisztrálja a Bootstrap-et az alábbiak szerint:

INSTALLED_APPS = [
'Képtár',
'bootstrap5', 
]

A Bootstrap regisztrálása a projektbeállításokban összekapcsolja a django-bootstrap5 függőséget a projekttel. A projektben meghatározott bármely más alkalmazás számára elérhető lesz.

A Bootstrap alkalmazása sablonon

Először hozzon létre egy nevű mappát sablonokat az alkalmazás mappájában. Ebben a mappában hozzon létre egy base.html fájl és a navbar.html fájlt. A sablonok HTML-fájlokat fognak tartalmazni, amelyeket a Bootstrap fog stílusozni.

Miközben a Bootstrap alkalmazást a navbar.html sablon, az alapfájl használata hagyományos. A base.html fájl tartalmazza az összes szkriptet és hivatkozást, amelyek bármely oldalra vonatkoznak. Csökkenti az egyes sablonok összetettségét, így a kód tisztábbá és könnyebben érthetővé válik.

Ban,-ben base.html fájl, tartalmazza a következőket:

{% load bootstrap5 %}
<!DOCTYPE html>


<html lang="hu">


<fej>


<meta karakterkészlet="UTF-8">


<meta http-equiv="X-UA-kompatibilis" tartalom="IE=él">


<meta név="nézetablak" tartalom="szélesség=eszköz-szélesség, kezdeti lépték=1,0">
<cím> Képtár </title>


{% blokkstílusok %}


{% bootstrap_css %}


{% endblock %}
</head>
<test>
 {% tartalmazza 'navbar.html' %}
 {% blokktartalom %} {% endblock %}
 {% blokk szkriptek %}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integritás="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="névtelen">
</script>
 {% bootstrap_javascript %}
</body>
</html>

Először töltse be a bootstrap5 függőséget. Ezután hozzon létre két blokkstílust, ahol meghatározza a sablonok összes stílusát. Tartalmazza a {% bootstrap_css %} sablon címkét és egy hivatkozást a Bootstrap CSS fájlra.

Ezután hozzon létre egy blokk szkriptet, amely meghatározza a JavaScript funkciót.

Beleértve a navbar.html ban,-ben base.html a Bootstraphez kapcsolja.

Tesztelje a konfigurációt Bootstrap stílusok hozzáadásával navbar.html sablon:

<nav class="navbar navbar-expand-lg">
<div class="tartály-folyadék">
<h2 osztály="márka" stílus="szín: zöld">PICHA GALÉRIA</h2>
<gomb osztály="navbar-toggler" típus="gomb" data-toggle="összeomlás" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="hamis" aria-label="Kapcsolja be a navigációt"><i osztály="fas fa-bárok"></én></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul osztály="navbar-nav ml-auto mb-2 mb-lg-0">
<li class="nav-elem"><egy osztály="nav-link nav-link-1 aktív" ária-current="oldalon" href="{% url 'itthon' %}" stílus="szín: zöld">itthon</a></li>
<li class="nav-elem"><egy osztály="nav-link nav-link-2" href="#Képtár" stílus="szín: zöld">Képtár</a</li>
</ul>
</div>
</div>
</nav>

Most futtassa a szervert, és ellenőrizze webhelyét egy böngészőben. Látnia kell a stílust, amelyet a Bootstrap alkalmaz a navigációs sávon.

Miért használja a Bootstrapet a Django projektekben?

Leginkább a Django-t használod háttérfejlesztésre, de elképesztő front-end oldalakat is készíthet vele. A Bootstrap használata a front-end oldalak stílusozásához jó gyakorlat a Django kezdők számára. Ha teljes veremű alkalmazásokat hoz létre, akkor alaposan megismerheti a Django-t.

Mint minden front-end keretrendszer, a Bootstrap osztályokat is használhatja a Django projektekkel a weboldalak stílusának kialakításához. A Bootstrap 5 jobb összetevőkkel és gyors stíluslappal rendelkezik. Javított válaszkészséggel is rendelkezik a modern eszközökhöz.

Miért ne használja a Bootstrap-et Django-projektjei stílusához és lenyűgöző felhasználói felületek létrehozásához? A Django lenyűgözi Önt webfejlesztési képességeivel.