Čitatelji poput vas podržavaju MUO. Kada kupite putem poveznica na našoj stranici, možemo zaraditi partnersku proviziju. Čitaj više.

Od svog izdanja 2013., Bootstrap je revolucionirao način na koji programeri stiliziraju web stranice. Bootstrap je popularan front-end okvir koji se koristi za dizajn responzivnih web aplikacija.

Django koristi Bootstrapove unaprijed izgrađene CSS stilove i JavaScript dodatke za stiliziranje web stranica. Iako smanjuje gnjavažu oko stiliziranja, njegovo konfiguriranje u Djangu može biti izazovno.

Naučimo kako instalirati i konfigurirati Bootstrap u Django aplikaciji.

Kako instalirati Bootstrap

Postoje dva načina za koristiti Bootstrap 5 u Django projektu. Možete ga instalirati u svoju aplikaciju ili referencirati datoteke pomoću Bootstrapov CDN. Ovaj će projekt koristiti prethodnu metodu.

Prije instaliranja Bootstrapa, stvoriti Django projekt i aplikacija pod nazivom galerija. Aplikacija će biti fotogalerija, a koristit ćete Bootstrap za stiliziranje navigacijske trake aplikacije.

instagram viewer

Zatim instalirajte Bootstrap sljedećom naredbom:

pipenv instalirati django-bootstrap5 # instalira Bootstrap verziju 5

Provjerite Pipfile i potvrdite da postoji ovisnost o Bootstrapu 5. Sada morate obavijestiti Django projekt da koristite Bootstrap ovisnost.

u postavke.py datoteku, registrirajte Bootstrap kao što je prikazano u nastavku:

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

Registriranje Bootstrapa u postavkama projekta povezuje ovisnost django-bootstrap5 s vašim projektom. Bit će dostupna bilo kojoj drugoj aplikaciji definiranoj u projektu.

Primijenite Bootstrap na predložak

Najprije stvorite mapu pod nazivom šablone u mapi aplikacije. Unutar ove mape stvorite a baza.html datoteka i a navbar.html datoteka. Predlošci će sadržavati HTML datoteke koje će Bootstrap stilizirati.

Iako možete primijeniti Bootstrap na navbar.html predloška, ​​korištenje osnovne datoteke je uobičajeno. A baza.html datoteka će sadržavati sve skripte i veze za primjenu na bilo koju stranicu. Smanjuje složenost pojedinačnih predložaka, čineći vaš kod čišćim i lakšim za razumijevanje.

u baza.html datoteku, uključite sljedeće:

{% load bootstrap5 %}
<!DOCTYPE html>


<html lang="hr">


<glava>


<meta charset="UTF-8">


<meta http-ekviv="X-UA-kompatibilan" sadržaj="IE=rub">


<meta naziv="prozor za prikaz" sadržaj="širina=širina-uređaja, početna skala=1,0">
<titula> Galerija </title>


{% blok stilova %}


{% bootstrap_css %}


{% endblock %}
</head>
<tijelo>
 {% uključuje 'navbar.html' %}
 {% block content %} {% endblock %}
 {% blokiraj skripte %}
<skripta src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" cjelovitost="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" unakrsno podrijetlo="anoniman">
</script>
 {% bootstrap_javascript %}
</body>
</html>

Prvo učitajte bootstrap5 ovisnost. Zatim izradite dva stila blokova u kojima ćete definirati sve stilove za predloške. Uključite {% bootstrap_css %} oznaku predloška i vezu na Bootstrap CSS datoteku.

Zatim izradite blok skriptu koja definira JavaScript funkcionalnost.

Uključujući i navbar.html u baza.html povezuje ga s Bootstrapom.

Testirajte konfiguraciju dodavanjem Bootstrap stilova u navbar.html predložak:

<nav klasa="navbar navbar-expand-lg">
<div klasa="kontejner-tekućina">
<h2 klasa="marka" stil="boja: zelena">PICHA GALERIJA</h2>
<gumb klasa="navigacijska traka za prebacivanje" vrsta="dugme" data-toggle="kolaps" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" arija-proširena="lažno" arija-oznaka="Uključi/isključi navigaciju"><ja razred="fas fa-barovi"></i></button>
<div klasa="kolaps navbar-kolaps" id="navbarSupportedContent">
<ul klasa="navbar-nav ml-auto mb-2 mb-lg-0">
<li klasa="navigacijska stavka"><razred="nav-link nav-link-1 aktivan" arija-struja="stranica" href="{% url 'Dom' %}" stil="boja: zelena">Dom</a></li>
<li klasa="navigacijska stavka"><razred="navigacijska veza navigacijska veza-2" href="#galerija" stil="boja: zelena">Galerija</a</li>
</ul>
</div>
</div>
</nav>

Sada pokrenite poslužitelj i provjerite svoju stranicu u pregledniku. Trebali biste vidjeti stil koji Bootstrap primjenjuje na navigacijsku traku.

Zašto koristiti Bootstrap u Django projektima?

Uglavnom ćete koristiti Django za back-end razvoj, ali može napraviti i nevjerojatne front-end stranice. Korištenje Bootstrapa za stiliziranje front-end stranica dobra je praksa za Django početnike. Dobivate dubinsko razumijevanje Djanga kada stvarate full-stack aplikacije.

Kao i svaki front-end framework, možete koristiti Bootstrap klase s Django projektom za stiliziranje vaših web stranica. Bootstrap 5 ima bolje komponente i brzu tablicu stilova. Također ima poboljšani odziv za moderne uređaje.

Zašto ne biste koristili Bootstrap za stiliziranje i stvaranje nevjerojatnih korisničkih sučelja za svoje Django projekte? Django će vas oduševiti svojim mogućnostima u web razvoju.