Hur man använder Bootstrap i ett Django-projekt

Läsare som du hjälper till att stödja MUO. När du gör ett köp med hjälp av länkar på vår webbplats kan vi tjäna en affiliate-provision. Läs mer.

Sedan lanseringen 2013 har Bootstrap revolutionerat hur utvecklare utformar webbsidor. Bootstrap är ett populärt front-end-ramverk som används för att designa responsiva webbapplikationer.

Django använder Bootstraps förbyggda CSS-stilar och JavaScript-plugins för att utforma webbsidor. Även om det minskar besväret med styling, kan det vara utmanande att konfigurera det i Django.

MAKEUSE AV DAGENS VIDEO

Låt oss lära oss hur man installerar och konfigurerar Bootstrap i en Django-applikation.

Hur man installerar Bootstrap

Det finns två sätt att använd Bootstrap 5 i ett Django-projekt. Du kan installera det i din applikation eller referera till filerna med Bootstraps CDN . Detta projekt kommer att använda den tidigare metoden.

Innan du installerar Bootstrap, skapa ett Django-projekt och ett program som heter galleri. Applikationen kommer att vara ett fotogalleri, och du kommer att använda Bootstrap för att utforma applikationens navigeringsfält.

Installera sedan Bootstrap med följande kommando:

android auto fungerar inte med s8

pipenv install django-bootstrap5  # installs Bootstrap version 5

Kontrollera Pipfilen och bekräfta att det finns ett Bootstrap 5-beroende. Du måste nu meddela Django-projektet att du använder ett Bootstrap-beroende.

I den settings.py fil, registrera Bootstrap enligt nedan:

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

Genom att registrera Bootstrap i projektinställningarna kopplas django-bootstrap5-beroendet till ditt projekt. Den kommer att vara tillgänglig för alla andra applikationer som definieras i projektet.

flytta Google Drive -mappen till ett annat konto

Applicera Bootstrap på en mall

Skapa först en mapp med namnet mallar i din ansökningsmapp. Inuti den här mappen skapar du en base.html fil och en navbar.html fil. Mallarna kommer att innehålla HTML-filer som Bootstrap kommer att utforma.

Medan du kan använda Bootstrap på navbar.html mall är det vanligt att använda en basfil. A base.html filen kommer att innehålla alla skript och länkar som ska tillämpas på vilken sida som helst. Det minskar komplexiteten hos individuella mallar, vilket gör din kod renare och lättare att förstå.

I den base.html fil, inkludera följande:

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

Ladda först bootstrap5-beroendet. Skapa sedan två blockstilar där du ska definiera alla stilar för mallarna. Inkludera {% bootstrap_css %} malltagg och en länk till Bootstrap CSS-filen.

Windows 10 stoppkod systemtjänst undantag

Skapa sedan ett blockskript som definierar JavaScript-funktionaliteten.

Inklusive navbar.html i base.html länkar den till Bootstrap.

Testa konfigurationen genom att lägga till Bootstrap-stilar till navbar.html mall:

<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 servern och kontrollera din webbplats i en webbläsare. Du bör se stilen som Bootstrap tillämpar på navigeringsfältet.

formaterad navigeringsfält i webbläsaren

Varför använda Bootstrap i Django-projekt?

Du kommer mest att använda Django för back-end-utveckling, men det kan också skapa fantastiska front-end-sidor. Att använda Bootstrap för att styla front-end-sidor är bra praxis för Django-nybörjare. Du får en djupgående förståelse för Django när du skapar fullstack-applikationer.

Som alla front-end-ramverk kan du använda Bootstrap-klasser med ett Django-projekt för att styla dina webbsidor. Bootstrap 5 har bättre komponenter och en snabb stilmall. Den har också förbättrad lyhördhet för moderna enheter.

Varför inte använda Bootstrap för att styla och skapa fantastiska användargränssnitt för dina Django-projekt? Django kommer att förvåna dig med dess förmåga inom webbutveckling.