Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

Seit seiner Veröffentlichung im Jahr 2013 hat Bootstrap die Gestaltung von Webseiten durch Entwickler revolutioniert. Bootstrap ist ein beliebtes Front-End-Framework, das zum Entwerfen von responsiven Webanwendungen verwendet wird.

Django verwendet die vorgefertigten CSS-Stile und JavaScript-Plugins von Bootstrap, um Webseiten zu gestalten. Während es den Styling-Aufwand reduziert, kann die Konfiguration in Django eine Herausforderung darstellen.

Lassen Sie uns lernen, wie man Bootstrap in einer Django-Anwendung installiert und konfiguriert.

So installieren Sie Bootstrap

Es gibt zwei Möglichkeiten Benutze Bootstrap5 in einem Django-Projekt. Sie können es in Ihrer Anwendung installieren oder mithilfe von auf die Dateien verweisen Bootstraps CDN. Dieses Projekt wird die frühere Methode verwenden.

Bevor Sie Bootstrap installieren,

instagram viewer
Erstellen Sie ein Django-Projekt und eine Anwendung namens Galerie. Die Anwendung wird eine Fotogalerie sein, und Sie werden Bootstrap verwenden, um die Navigationsleiste der Anwendung zu gestalten.

Als nächstes installieren Sie Bootstrap mit dem folgenden Befehl:

pipenv Installieren django-bootstrap5 # installiert Bootstrap-Version 5

Überprüfen Sie die Pipfile und bestätigen Sie, dass eine Bootstrap 5-Abhängigkeit besteht. Jetzt müssen Sie das Django-Projekt darüber informieren, dass Sie eine Bootstrap-Abhängigkeit verwenden.

Im settings.py Datei, registrieren Sie Bootstrap wie unten gezeigt:

INSTALLED_APPS = [
'Galerie',
'Bootstrap5', 
]

Die Registrierung von Bootstrap in den Projekteinstellungen verbindet die django-bootstrap5-Abhängigkeit mit Ihrem Projekt. Es steht allen anderen im Projekt definierten Anwendungen zur Verfügung.

Wenden Sie Bootstrap auf eine Vorlage an

Erstellen Sie zunächst einen Ordner mit dem Namen Vorlagen in Ihrer Bewerbungsmappe. Erstellen Sie in diesem Ordner eine basis.html Datei und ein Navigationsleiste.html Datei. Die Vorlagen enthalten HTML-Dateien, die von Bootstrap formatiert werden.

Während Sie Bootstrap auf die anwenden können Navigationsleiste.html Vorlage ist die Verwendung einer Basisdatei üblich. A basis.html Datei enthält alle Skripte und Links, die auf jede Seite angewendet werden können. Es reduziert die Komplexität einzelner Vorlagen und macht Ihren Code sauberer und leichter verständlich.

Im basis.html Datei, enthalten Sie Folgendes:

{% bootstrap5 laden %}
<!DOCTYPE html>


<htmllang="en">


<Kopf>


<Metazeichensatz="UTF-8">


<meta http-equiv="X-UA-kompatibel" Inhalt="IE=Rand">


<metaname="Ansichtsfenster" Inhalt="width=Gerätebreite, initial-scale=1.0">
<Titel> Galerie </title>


{% Blockstile %}


{% bootstrap_css %}


{% Endblock %}
</head>
<Körper>
 {% enthalten 'Navigationsleiste.html' %}
 {% Blockinhalt %} {% Endblock %}
 {% Blockskripte %}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" Integrität ="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" Crossorigin="anonym">
</script>
 {% bootstrap_javascript %}
</body>
</html>

Laden Sie zuerst die Bootstrap5-Abhängigkeit. Erstellen Sie dann zwei Blockstile, in denen Sie alle Stile für die Vorlagen definieren. Umfassen die {% bootstrap_css %} Template-Tag und einen Link zur Bootstrap-CSS-Datei.

Erstellen Sie als Nächstes ein Blockskript, das die JavaScript-Funktionalität definiert.

Einschließlich der Navigationsleiste.html im basis.html verbindet es mit Bootstrap.

Testen Sie die Konfiguration, indem Sie Bootstrap-Stile zu der hinzufügen Navigationsleiste.html Vorlage:

<Navigationsklasse ="navbar navbar-expand-lg">
<div-Klasse="Behälter-Flüssigkeit">
<h2 Klasse="Marke" Stil="Farbe grün">PICHA-GALERIE</h2>
<Schaltfläche Klasse="Navigationsleisten-Umschalter" Typ="Taste" data-toggle="Zusammenbruch" Datenziel="#navbarSupportedContent" aria-controls="NavigationsleisteSupportedContent" aria-expanded="FALSCH" aria-label="Navigation umschalten"><Ich Klasse ="fas fa-bars"></ich></button>
<div-Klasse="einklappen navbar-einklappen" id="NavigationsleisteSupportedContent">
<ul-Klasse="navbar-nav ml-auto mb-2 mb-lg-0">
<li Klasse="Navigationselement"><eine Klasse="Navigationsverbindung Navigationsverbindung-1 aktiv" aria-aktuell="Buchseite" href="{%-URL 'heim' %}" Stil="Farbe grün">Heim</A></li>
<li Klasse="Navigationselement"><eine Klasse="Navigationslink Navigationslink-2" href="#Galerie" Stil="Farbe grün">Galerie</A</li>
</ul>
</div>
</div>
</nav>

Führen Sie nun den Server aus und überprüfen Sie Ihre Site in einem Browser. Sie sollten das Styling sehen, das Bootstrap auf die Navigationsleiste anwendet.

Warum Bootstrap in Django-Projekten verwenden?

Sie werden Django hauptsächlich für die Back-End-Entwicklung verwenden, aber es kann auch erstaunliche Front-End-Seiten erstellen. Die Verwendung von Bootstrap zum Gestalten von Front-End-Seiten ist eine gute Übung für Django-Anfänger. Sie erhalten ein tiefes Verständnis von Django, wenn Sie Full-Stack-Anwendungen erstellen.

Wie bei jedem Front-End-Framework können Sie Bootstrap-Klassen mit einem Django-Projekt verwenden, um Ihre Webseiten zu gestalten. Bootstrap 5 hat bessere Komponenten und ein schnelles Stylesheet. Es hat auch eine verbesserte Reaktionsfähigkeit für moderne Geräte.

Warum nicht Bootstrap verwenden, um tolle UIs für Ihre Django-Projekte zu gestalten und zu erstellen? Django wird Sie mit seinen Fähigkeiten in der Webentwicklung in Erstaunen versetzen.