Sådan bruger du Bootstrap i et Django-projekt

Læsere som dig hjælper med at støtte MUO. Når du foretager et køb ved hjælp af links på vores websted, kan vi optjene en affiliate-kommission. Læs mere.

Siden udgivelsen i 2013 har Bootstrap revolutioneret, hvordan udviklere style websider. Bootstrap er en populær front-end-ramme, der bruges til at designe responsive webapplikationer.

Django bruger Bootstraps forudbyggede CSS-stile og JavaScript-plugins til at style websider. Selvom det reducerer besværet med styling, kan det være udfordrende at konfigurere det i Django.

MAKEUSE AF DAGENS VIDEO

Lad os lære, hvordan du installerer og konfigurerer Bootstrap i en Django-applikation.

Sådan installeres Bootstrap

Der er to måder at brug Bootstrap 5 i et Django-projekt. Du kan installere det i din applikation eller henvise til filerne ved hjælp af Bootstraps CDN . Dette projekt vil bruge den førstnævnte metode.

Før du installerer Bootstrap, oprette et Django-projekt og en applikation kaldet galleri. Applikationen vil være et fotogalleri, og du vil bruge Bootstrap til at style applikationens navigationslinje.

Installer derefter Bootstrap med følgende kommando:

pipenv install django-bootstrap5  # installs Bootstrap version 5

Tjek Pip-filen og bekræft, at der er en Bootstrap 5-afhængighed. Du skal nu give Django-projektet besked om, at du bruger en Bootstrap-afhængighed.

I den settings.py fil, skal du registrere Bootstrap som vist nedenfor:

INSTALLED_APPS = [ 
    'gallery', 
    'bootstrap5',    
]

Registrering af Bootstrap i projektindstillingerne forbinder django-bootstrap5-afhængigheden til dit projekt. Den vil være tilgængelig for enhver anden applikation, der er defineret i projektet.

Anvend Bootstrap på en skabelon

Først skal du oprette en mappe med navnet skabeloner i din ansøgningsmappe. Inde i denne mappe skal du oprette en base.html fil og en navbar.html fil. Skabelonerne vil indeholde HTML-filer, som Bootstrap vil style.

Mens du kan anvende Bootstrap på navbar.html skabelon, er det konventionelt at bruge en basisfil. EN base.html filen vil indeholde alle de scripts og links, der skal anvendes på enhver side. Det reducerer kompleksiteten af individuelle skabeloner, hvilket gør din kode renere og lettere at forstå.

I den base.html fil, inkludere følgende:

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

Først skal du indlæse bootstrap5-afhængigheden. Opret derefter to blokstile, hvor du vil definere alle stile for skabelonerne. Inkluder {% bootstrap_css %} skabelontag og et link til Bootstrap CSS-filen.

Derefter skal du oprette et blokscript, der definerer JavaScript-funktionaliteten.

Herunder navbar.html i base.html linker det til Bootstrap.

Test konfigurationen ved at tilføje Bootstrap-stile til navbar.html skabelon:

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

Kør nu serveren og tjek dit websted i en browser. Du bør se den stil, som Bootstrap anvender på navigationslinjen.

Hvorfor bruge Bootstrap i Django-projekter?

Du vil for det meste bruge Django til back-end-udvikling, men det kan også lave fantastiske front-end-sider. At bruge Bootstrap til at style frontend-sider er god praksis for Django-begyndere. Du får en dybdegående forståelse af Django, når du opretter full-stack applikationer.

Som enhver front-end framework kan du bruge Bootstrap-klasser med et Django-projekt til at style dine websider. Bootstrap 5 har bedre komponenter og et hurtigt stilark. Det har også forbedret lydhørhed for moderne enheder.

Hvorfor ikke bruge Bootstrap til at style og skabe fantastiske brugergrænseflader til dine Django-projekter? Django vil forbløffe dig med sine muligheder inden for webudvikling.

wifi har ikke en gyldig konfiguration