Teiesugused lugejad aitavad MUO-d toetada. Kui teete ostu meie saidil olevate linkide abil, võime teenida sidusettevõtte komisjonitasu. Loe rohkem.

Alates selle ilmumisest 2013. aastal on Bootstrap muutnud revolutsiooni seda, kuidas arendajad veebilehti kujundavad. Bootstrap on populaarne esiotsa raamistik, mida kasutatakse tundlike veebirakenduste kujundamiseks.

Django kasutab veebilehtede kujundamiseks Bootstrapi eelehitatud CSS-i stiile ja JavaScripti pistikprogramme. Kuigi see vähendab stiiliga seotud vaeva, võib selle konfigureerimine Djangos olla keeruline.

Õpime Bootstrapi installima ja konfigureerima Django rakenduses.

Kuidas installida Bootstrap

Selleks on kaks võimalust kasutage Bootstrap 5 Django projektis. Saate selle oma rakendusse installida või viidata failidele Bootstrapi CDN. See projekt kasutab endist meetodit.

Enne Bootstrapi installimist luua Django projekt ja rakendus nimega galerii. Rakendus on fotogalerii ja rakenduse navigeerimisriba kujundamiseks kasutate Bootstrapi.

instagram viewer

Järgmisena installige Bootstrap järgmise käsuga:

pipenv installida django-bootstrap5 # installib Bootstrapi versiooni 5

Kontrollige Pipfile'i ja veenduge, et see on Bootstrap 5 sõltuvus. Nüüd peate teavitama Django projekti, et kasutate Bootstrapi sõltuvust.

Aastal settings.py faili, registreerige Bootstrap, nagu allpool näidatud:

INSTALLED_APPS = [
'galerii',
'bootstrap5', 
]

Bootstrapi registreerimine projekti sätetes ühendab django-bootstrap5 sõltuvuse teie projektiga. See on kättesaadav kõikidele teistele projektis määratletud rakendustele.

Rakenda mallile Bootstrap

Esiteks looge kaust nimega mallid oma rakenduste kaustas. Looge selle kausta sees a base.html fail ja a navbar.html faili. Mallid sisaldavad HTML-faile, mida Bootstrap kujundab.

Kuigi saate Bootstrapi kasutada navbar.html malli, baasfaili kasutamine on tavapärane. A base.html fail sisaldab kõiki skripte ja linke, mida igale lehele rakendada. See vähendab üksikute mallide keerukust, muutes teie koodi puhtamaks ja hõlpsamini mõistetavaks.

Aastal base.html faili, lisage järgmine:

{% load bootstrap5 %}
<!DOCTYPE html>


<html lang="et">


<pea>


<metamärgistik="UTF-8">


<meta http-equiv="X-UA-ühilduv" sisu="IE = serv">


<meta nimi="vaateava" sisu="laius = seadme laius, esialgne skaala = 1,0">
<pealkiri> Galerii </title>


{% block styles %}


{% bootstrap_css %}


{% endblock %}
</head>
<keha>
 {% sealhulgas 'navbar.html' %}
 {% block content %} {% endblock %}
 {% blokeeri skriptid %}
<skript src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" terviklikkus="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonüümne">
</script>
 {% bootstrap_javascript %}
</body>
</html>

Esiteks laadige bootstrap5 sõltuvus. Seejärel looge kaks plokistiili, kus saate määratleda kõik mallide stiilid. Kaasa {% bootstrap_css %} malli silt ja link Bootstrap CSS-failile.

Järgmisena looge ploki skript, mis määratleb JavaScripti funktsiooni.

Sealhulgas navbar.html aastal base.html lingib selle Bootstrapiga.

Testige konfiguratsiooni, lisades alglaadimisstiile navbar.html mall:

<nav class="navigeerimisriba navbar-expand-lg">
<div klass="konteiner-vedelik">
<h2 klass="bränd" stiil="värvus: roheline">PICHA GALERII</h2>
<nupu klass="navigeerimisriba-lüliti" tüüp="nuppu" data-toggle="kollaps" data-target="#navbarSupportedContent" aria-controls="navbarToetatud sisu" aria-laiendatud="vale" aria-label="Lülitage navigeerimine sisse"><i klass ="fas fa-baarid"></i></button>
<div klass="kollaps navbar-collapse" id="navbarToetatud sisu">
<ul klass="navbar-nav ml-auto mb-2 mb-lg-0">
<li klass="nav-üksus"><klass ="nav-link nav-link-1 aktiivne" aria-current="lehel" href="{% url 'Kodu' %}" stiil="värvus: roheline">Kodu</a></li>
<li klass="nav-üksus"><klass ="nav-link nav-link-2" href="#galerii" stiil="värvus: roheline">Galerii</a</li>
</ul>
</div>
</div>
</nav>

Nüüd käivitage server ja kontrollige oma saiti brauseris. Peaksite nägema stiili, mida Bootstrap navigeerimisribal rakendab.

Miks kasutada Django projektides Bootstrapi?

Peamiselt kasutate Djangot taustaarenduseks, kuid see võib teha ka suurepäraseid esiotsa lehti. Bootstrapi kasutamine esiotsa lehtede kujundamiseks on Django algajatele hea tava. Täisviru rakendusi luues saate Djangost põhjaliku ülevaate.

Nagu iga esiotsa raamistik, saate oma veebilehtede stiili kujundamiseks kasutada Django projektiga Bootstrapi klasse. Bootstrap 5-l on paremad komponendid ja kiire stiilileht. Samuti on see kaasaegsete seadmete jaoks parem reageerimisvõime.

Miks mitte kasutada Bootstrapi oma Django projektide stiilimiseks ja hämmastavate kasutajaliideste loomiseks? Django hämmastab teid oma veebiarenduse võimalustega.