Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

Kopš izlaišanas 2013. gadā, Bootstrap ir mainījis to, kā izstrādātāji veido tīmekļa lapas. Bootstrap ir populārs priekšgala ietvars, ko izmanto, lai izstrādātu atsaucīgas tīmekļa lietojumprogrammas.

Django izmanto Bootstrap iepriekš izveidotos CSS stilus un JavaScript spraudņus, lai veidotu tīmekļa lapas. Lai gan tas samazina stila veidošanas grūtības, tā konfigurēšana programmā Django var būt sarežģīta.

Uzzināsim, kā instalēt un konfigurēt Bootstrap Django lietojumprogrammā.

Kā instalēt Bootstrap

Ir divi veidi, kā izmantojiet Bootstrap 5 Django projektā. Varat to instalēt savā lietojumprogrammā vai atsaukties uz failiem, izmantojot Bootstrap CDN. Šajā projektā tiks izmantota iepriekšējā metode.

Pirms Bootstrap instalēšanas, izveidot Django projektu un lietojumprogramma ar nosaukumu galerija. Lietojumprogramma būs fotoattēlu galerija, un jūs izmantosit Bootstrap, lai veidotu lietojumprogrammas navigācijas joslu.

instagram viewer

Pēc tam instalējiet Bootstrap ar šādu komandu:

pipenv uzstādīt django-bootstrap5 # instalē Bootstrap versiju 5

Pārbaudiet Pipfile un pārbaudiet, vai ir atkarība no Bootstrap 5. Tagad jums ir jāpaziņo Django projektam, ka izmantojat Bootstrap atkarību.

Iekš settings.py failu, reģistrējiet Bootstrap, kā parādīts zemāk:

INSTALLED_APPS = [
'galerija',
'bootstrap5', 
]

Reģistrējot Bootstrap projekta iestatījumos, django-bootstrap5 atkarība tiek savienota ar jūsu projektu. Tas būs pieejams jebkuram citam projektā definētajam pieteikumam.

Lietojiet Bootstrap veidnei

Vispirms izveidojiet mapi ar nosaukumu veidnes lietojumprogrammas mapē. Šajā mapē izveidojiet a base.html fails un a navbar.html failu. Veidnēs būs HTML faili, kurus veidos Bootstrap.

Kamēr jūs varat lietot Bootstrap uz navbar.html veidnē, pamata faila izmantošana ir ierasta. A base.html failā būs visi skripti un saites, kas attiecas uz jebkuru lapu. Tas samazina atsevišķu veidņu sarežģītību, padarot kodu tīrāku un vieglāk saprotamu.

Iekš base.html failu, iekļaujiet šādu informāciju:

{% load bootstrap5 %}
<!DOCTYPE html>


<html lang="lv">


<galvu>


<meta rakstzīmju kopa ="UTF-8">


<meta http-equiv="X-UA saderīgs" saturs="IE=mala">


<meta nosaukums ="skata logs" saturs="platums = ierīces platums, sākotnējais mērogs = 1,0">
<virsraksts> Galerija </title>


{% bloķēšanas stili %}


{% bootstrap_css %}


{% endblock %}
</head>
<ķermeni>
 {% ietver 'navbar.html' %}
 {% block content %} {% endblock %}
 {% bloķēt skriptus %}
<skripts src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integritāte ="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="Anonīms">
</script>
 {% bootstrap_javascript %}
</body>
</html>

Vispirms ielādējiet bootstrap5 atkarību. Pēc tam izveidojiet divus bloku stilus, kuros definēsit visus veidņu stilus. Iekļauts {% bootstrap_css %} veidnes tagu un saiti uz Bootstrap CSS failu.

Pēc tam izveidojiet bloka skriptu, kas definē JavaScript funkcionalitāti.

Ieskaitot navbar.html iekš base.html savieno to ar Bootstrap.

Pārbaudiet konfigurāciju, pievienojot Bootstrap stilus navbar.html veidne:

<nav klase="navigācijas josla navbar-expand-lg">
<div klase="konteiners-šķidrums">
<h2 klase="Zīmols" stils ="krāsa: zaļa">PICHA GALERIJA</h2>
<pogas klase="Navbar-toggler" tips="pogu" data-toggle="sabrukt" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-paplašināts="viltus" aria-label="Pārslēgt navigāciju"><i klase ="fas fa-bāri"></i></button>
<div klase="sabrukt navbar-collapse" id="navbarSupportedContent">
<ul klase="navbar-nav ml-auto mb-2 mb-lg-0">
<li klase="nav vienums"><klase ="nav-link nav-link-1 ir aktīvs" aria-current="lappuse" href="{% url 'mājas' %}" stils ="krāsa: zaļa">Mājas</a></li>
<li klase="nav vienums"><klase ="nav-link nav-link-2" href="#galerija" stils ="krāsa: zaļa">Galerija</a</li>
</ul>
</div>
</div>
</nav>

Tagad palaidiet serveri un pārlūkprogrammā pārbaudiet savu vietni. Jums vajadzētu redzēt stilu, ko Bootstrap piemēro navigācijas joslai.

Kāpēc Django projektos izmantot Bootstrap?

Jūs galvenokārt izmantosit Django aizmugures izstrādei, taču tas var izveidot arī pārsteidzošas priekšgala lapas. Bootstrap izmantošana priekšgala lapu veidošanai ir laba prakse Django iesācējiem. Jūs iegūstat padziļinātu izpratni par Django, veidojot pilnas kaudzes lietojumprogrammas.

Tāpat kā jebkuru priekšgala sistēmu, varat izmantot Bootstrap klases ar Django projektu, lai veidotu savas tīmekļa lapas. Bootstrap 5 ir labāki komponenti un ātra stila lapa. Tam ir arī uzlabota reakcija uz modernām ierīcēm.

Kāpēc neizmantot Bootstrap, lai veidotu un izveidotu pārsteidzošas lietotāja saskarnes saviem Django projektiem? Django jūs pārsteigs ar savām iespējām tīmekļa izstrādē.