Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo. Preberi več.

Od izdaje leta 2013 je Bootstrap spremenil način oblikovanja spletnih strani razvijalcev. Bootstrap je priljubljeno front-end ogrodje, ki se uporablja za oblikovanje odzivnih spletnih aplikacij.

Django uporablja Bootstrapove vnaprej pripravljene sloge CSS in vtičnike JavaScript za oblikovanje spletnih strani. Medtem ko zmanjša težave pri oblikovanju, je konfiguracija v Djangu lahko izziv.

Naučimo se namestiti in konfigurirati Bootstrap v aplikaciji Django.

Kako namestiti Bootstrap

Obstajata dva načina za uporabite Bootstrap 5 v projektu Django. Lahko ga namestite v svojo aplikacijo ali pa se sklicujete na datoteke z uporabo Bootstrapov CDN. Ta projekt bo uporabil prejšnjo metodo.

Preden namestite Bootstrap, ustvarite projekt Django in aplikacijo, imenovano galerija. Aplikacija bo fotogalerija, za oblikovanje navigacijske vrstice aplikacije pa boste uporabili Bootstrap.

instagram viewer

Nato namestite Bootstrap z naslednjim ukazom:

pipenv namestite django-bootstrap5 # namesti Bootstrap različice 5

Preverite Pipfile in potrdite, da obstaja odvisnost od Bootstrap 5. Zdaj morate projekt Django obvestiti, da uporabljate odvisnost Bootstrap.

V nastavitve.py datoteko, registrirajte Bootstrap, kot je prikazano spodaj:

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

Registriranje Bootstrapa v nastavitvah projekta poveže odvisnost django-bootstrap5 z vašim projektom. Na voljo bo kateri koli drugi aplikaciji, definirani v projektu.

Uporabite Bootstrap na predlogi

Najprej ustvarite mapo z imenom predloge v mapi vaše aplikacije. Znotraj te mape ustvarite a base.html datoteka in a navbar.html mapa. Predloge bodo vsebovale datoteke HTML, ki jih bo Bootstrap oblikoval.

Medtem ko lahko uporabite Bootstrap na navbar.html predlogo, je uporaba osnovne datoteke običajna. A base.html datoteka bo vsebovala vse skripte in povezave za uporabo na kateri koli strani. Zmanjša zapletenost posameznih predlog, zaradi česar je vaša koda čistejša in lažja za razumevanje.

V base.html datoteko, vključite naslednje:

{% naloži bootstrap5 %}
<!DOCTYPE html>


<html lang="en">


<glavo>


<meta charset="UTF-8">


<meta http-ekviv="Združljiv z X-UA" vsebina="IE=rob">


<meta ime="vidno polje" vsebina="širina=širina naprave, začetna lestvica=1,0">
<naslov> Galerija </title>


{% slogi blokov %}


{% bootstrap_css %}


{% endblock %}
</head>
<telo>
 {% vključuje 'navbar.html' %}
 {% block content %} {% endblock %}
 {% blokiraj skripte %}
<skript src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integriteta="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" navzkrižno poreklo="anonimen">
</script>
 {% bootstrap_javascript %}
</body>
</html>

Najprej naložite odvisnost bootstrap5. Nato ustvarite dva sloga blokov, kjer boste določili vse sloge za predloge. Vključite {% bootstrap_css %} oznako predloge in povezavo do datoteke Bootstrap CSS.

Nato ustvarite blokovni skript, ki definira funkcionalnost JavaScript.

Vključno z navbar.html v base.html povezuje z Bootstrapom.

Preizkusite konfiguracijo tako, da dodate sloge Bootstrap v navbar.html predloga:

<nav class="navbar navbar-expand-lg">
<razred div="posoda-tekočina">
<h2 razred="znamka" slog="barva: zelena">GALERIJA PICHA</h2>
<razred gumba="navbar-preklopnik" vrsta="gumb" data-toggle="kolaps" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="lažno" aria-oznaka="Preklopi navigacijo"><jaz razred="fas fa-bars"></jaz></button>
<razred div="zruši navbar-zruši" id="navbarSupportedContent">
<ul razred="navbar-nav ml-auto mb-2 mb-lg-0">
<razred li="nav-item"><razred="nav-povezava nav-link-1 aktivna" aria-current="strani" href="{% url 'domov' %}" slog="barva: zelena">domov</a></li>
<razred li="nav-item"><razred="nav-povezava nav-povezava-2" href="#galerija" slog="barva: zelena">Galerija</a</li>
</ul>
</div>
</div>
</nav>

Zdaj zaženite strežnik in preverite svoje spletno mesto v brskalniku. Videti bi morali slog, ki ga Bootstrap uporabi za navigacijsko vrstico.

Zakaj uporabljati Bootstrap v projektih Django?

Django boste večinoma uporabljali za back-end razvoj, vendar lahko ustvari tudi neverjetne front-end strani. Uporaba Bootstrapa za oblikovanje sprednjih strani je dobra praksa za začetnike Djanga. Ko ustvarite aplikacije s polnim skladom, dobite poglobljeno razumevanje Djanga.

Kot vsako sprednje ogrodje lahko uporabite razrede Bootstrap s projektom Django za oblikovanje vaših spletnih strani. Bootstrap 5 ima boljše komponente in hiter slogovni list. Ima tudi izboljšano odzivnost za sodobne naprave.

Zakaj ne bi uporabili Bootstrapa za oblikovanje in ustvarjanje čudovitih uporabniških vmesnikov za vaše projekte Django? Django vas bo navdušil s svojimi zmožnostmi spletnega razvoja.