Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

Sinds de release in 2013 heeft Bootstrap een revolutie teweeggebracht in de manier waarop ontwikkelaars webpagina's vormgeven. Bootstrap is een populair front-end framework dat wordt gebruikt om responsieve webapplicaties te ontwerpen.

Django gebruikt Bootstrap's vooraf gebouwde CSS-stijlen en JavaScript-plug-ins om webpagina's te stylen. Hoewel het het gedoe met stylen vermindert, kan het configureren ervan in Django een uitdaging zijn.

Laten we leren hoe Bootstrap in een Django-toepassing te installeren en configureren.

Bootstrap installeren

Er zijn twee manieren om Gebruik Bootstrap 5 in een Django-project. U kunt het in uw toepassing installeren of naar de bestanden verwijzen met behulp van Bootstraps CDN. Dit project zal de vorige methode gebruiken.

Voordat u Bootstrap installeert, maak een Django-project aan en een applicatie genaamd galerij. De applicatie wordt een fotogalerij en je gebruikt Bootstrap om de navigatiebalk van de applicatie vorm te geven.

instagram viewer

Installeer vervolgens Bootstrap met de volgende opdracht:

pipenv installeren django bootstrap5 # installeert Bootstrap versie 5

Controleer het Pip-bestand en bevestig dat er een Bootstrap 5-afhankelijkheid is. U moet nu het Django-project laten weten dat u een Bootstrap-afhankelijkheid gebruikt.

In de instellingen.py bestand, registreer Bootstrap zoals hieronder weergegeven:

GEÏNSTALLEERDE_APPS = [
'galerij',
'bootstrap5', 
]

Het registreren van Bootstrap in de projectinstellingen verbindt de django-bootstrap5-afhankelijkheid met uw project. Het zal beschikbaar zijn voor elke andere toepassing die in het project is gedefinieerd.

Bootstrap toepassen op een sjabloon

Maak eerst een map met de naam Sjablonen in je sollicitatiemap. Maak in deze map een basis.html bestand en een navbar.html bestand. De sjablonen bevatten HTML-bestanden die Bootstrap zal stylen.

Terwijl je Bootstrap kunt toepassen op de navbar.html sjabloon, het gebruik van een basisbestand is conventioneel. A basis.html bestand bevat alle scripts en koppelingen die op elke pagina kunnen worden toegepast. Het vermindert de complexiteit van individuele sjablonen, waardoor uw code schoner en gemakkelijker te begrijpen is.

In de basis.html bestand, bevat het volgende:

{% belasting bootstrap5 %}
<!DOCTYPE html>


<html lang="nl">


<hoofd>


<meta tekenset="UTF-8">


<meta http-equiv="X-UA-compatibel" inhoud="IE=rand">


<metanaam="uitkijk postje" inhoud="breedte=apparaatbreedte, beginschaal=1,0">
<titel> Galerij </title>


{% blokstijlen %}


{% bootstrap_css %}


{% eindblok %}
</head>
<lichaam>
 {% erbij betrekken 'navbar.html' %}
 {% blokinhoud %} {% eindblok %}
 {% blokscripts %}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integriteit="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" kruisoorsprong="anoniem">
</script>
 {% bootstrap_javascript %}
</body>
</html>

Laad eerst de bootstrap5-afhankelijkheid. Maak vervolgens twee blokstijlen waarin u alle stijlen voor de sjablonen definieert. Inclusief de {% bootstrap_css %} sjabloontag en een link naar het Bootstrap CSS-bestand.

Maak vervolgens een blokscript dat de JavaScript-functionaliteit definieert.

Inclusief de navbar.html in de basis.html koppelt het aan Bootstrap.

Test de configuratie door Bootstrap-stijlen toe te voegen aan het navbar.html sjabloon:

<navigatieklasse="navbar navbar-uitbreiden-lg">
<div klasse="container-vloeistof">
<h2 klasse="merk" stijl="kleur groen">PICHA-GALERIJ</h2>
<knop klasse="navbar-toggler" type="knop" data-toggle="instorten" gegevensdoel="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-uitgebreid="vals" aria-label="Schakel tussen navigatie"><ik klasse="fas fa-bars"></i></button>
<div klasse="instorten navbar-instorten" identiteitsbewijs="navbarSupportedContent">
<ul klasse="navbar-nav ml-auto mb-2 mb-lg-0">
<li klasse="nav-item"><een klas="nav-link nav-link-1 actief" aria-current="bladzijde" href="{% url 'thuis' %}" stijl="kleur groen">Thuis</A></li>
<li klasse="nav-item"><een klas="nav-link nav-link-2" href="#galerij" stijl="kleur groen">Galerij</A</li>
</ul>
</div>
</div>
</nav>

Voer nu de server uit en controleer uw site in een browser. Je zou de stijl moeten zien die Bootstrap toepast op de navigatiebalk.

Waarom Bootstrap gebruiken in Django-projecten?

Je zult Django meestal gebruiken voor back-end-ontwikkeling, maar het kan ook geweldige front-end-pagina's maken. Het gebruik van Bootstrap om front-end-pagina's te stylen is een goede gewoonte voor Django-beginners. Je krijgt een diepgaand inzicht in Django wanneer je full-stack applicaties maakt.

Zoals elk front-end framework, kunt u Bootstrap-klassen gebruiken met een Django-project om uw webpagina's te stylen. Bootstrap 5 heeft betere componenten en een snelle stylesheet. Het heeft ook een verbeterde responsiviteit voor moderne apparaten.

Waarom zou u Bootstrap niet gebruiken om geweldige gebruikersinterfaces voor uw Django-projecten te stylen en te maken? Django zal u verbazen met zijn mogelijkheden op het gebied van webontwikkeling.