A Bootstrap használata egy Django projektben

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.

MAKEUSEOF A NAP VIDEÓJA

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

talál egy dalt a videóban

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 install django-bootstrap5  # installs Bootstrap version 5

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:

hogyan lehet módosítani a dpi -t a gimp -ben

INSTALLED_APPS = [ 
    'gallery', 
    '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="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>

Először töltse be a bootstrap5 függőséget. Ezután hozzon létre két blokkstílust, ahol meghatározhatja 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:

hogyan lehet kijavítani egy sor elhalt pixelt a tévében

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

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.