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.

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.

instagram viewer

Installera sedan Bootstrap med följande kommando:

pipenv Installera django-bootstrap5 # installerar 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 = [
'Galleri',
'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.

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="sv">


<huvud>


<meta teckenuppsättning="UTF-8">


<meta http-equiv="X-UA-kompatibel" innehåll="IE=kant">


<metanamn="utsiktsplats" innehåll="bredd=enhetsbredd, initialskala=1,0">
<titel> Galleri </title>


{% block styles %}


{% bootstrap_css %}


{% slutblock %}
</head>
<kropp>
 {% inkluderar 'navbar.html' %}
 {% block content %} {% endblock %}
 {% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integritet="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonym">
</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.

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 klass="navbar navbar-expand-lg">
<div klass="behållare-vätska">
<h2 klass="varumärke" stil="färg: grön">PICHA GALLERI</h2>
<knappklass="navbar-toggler" typ="knapp" data-toggle="kollaps" data-target="#navbarSupportedContent" aria-kontroller="navbarSupportedContent" aria-expanderad="falsk" aria-label="Växla navigering"><jag klass="fas fa-barer"></i></button>
<div klass="kollapsa navbar-kollaps" id="navbarSupportedContent">
<ul klass="navbar-nav ml-auto mb-2 mb-lg-0">
<li klass="nav-objekt"><en klass="nav-länk nav-länk-1 aktiv" aria-ström="sida" href="{% url 'Hem' %}" stil="färg: grön">Hem</a></li>
<li klass="nav-objekt"><en klass="nav-länk nav-länk-2" href="#Galleri" stil="färg: grön">Galleri</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.

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.