Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Vuoden 2013 julkaisustaan ​​lähtien Bootstrap on mullistanut tavan, jolla kehittäjät tyylittävät verkkosivuja. Bootstrap on suosittu käyttöliittymäkehys, jota käytetään responsiivisten verkkosovellusten suunnitteluun.

Django käyttää Bootstrapin valmiita CSS-tyylejä ja JavaScript-laajennuksia web-sivujen tyylittämiseen. Vaikka se vähentää muotoilun vaivaa, sen määrittäminen Djangossa voi olla haastavaa.

Opitaan asentamaan ja konfiguroimaan Bootstrap Django-sovelluksessa.

Kuinka asentaa Bootstrap

On kaksi tapaa käytä Bootstrap 5:tä Django-projektissa. Voit asentaa sen sovellukseesi tai viitata tiedostoihin käyttämällä Bootstrapin CDN. Tässä projektissa käytetään edellistä menetelmää.

Ennen Bootstrapin asentamista, luoda Django-projekti ja galleria-niminen sovellus. Sovellus on valokuvagalleria, ja käytät Bootstrapia sovelluksen navigointipalkin tyyliin.

instagram viewer

Asenna seuraavaksi Bootstrap seuraavalla komennolla:

pipenv Asentaa django-bootstrap5 # asentaa Bootstrap-version 5

Tarkista Pipfile ja varmista, että Bootstrap 5 -riippuvuus on olemassa. Sinun on nyt ilmoitettava Django-projektille, että käytät Bootstrap-riippuvuutta.

Vuonna settings.py tiedosto, rekisteröi Bootstrap alla olevan kuvan mukaisesti:

INSTALLED_APPS = [
'galleria',
'bootstrap5', 
]

Bootstrapin rekisteröinti projektiasetuksiin yhdistää django-bootstrap5-riippuvuuden projektiisi. Se on kaikkien muiden hankkeessa määriteltyjen sovellusten käytettävissä.

Käytä Bootstrapia malliin

Luo ensin kansio nimeltä malleja sovelluskansiossasi. Luo tähän kansioon a base.html tiedosto ja a navbar.html tiedosto. Mallit sisältävät HTML-tiedostoja, jotka Bootstrap tyylittää.

Vaikka voit käyttää Bootstrapia navbar.html malliin, perustiedoston käyttö on tavallista. A base.html tiedosto sisältää kaikki skriptit ja linkit, joita voidaan soveltaa mille tahansa sivulle. Se vähentää yksittäisten mallien monimutkaisuutta, mikä tekee koodistasi selkeämmän ja helpommin ymmärrettävän.

Vuonna base.html tiedosto, sisältää seuraavat:

{% load bootstrap5 %}
<!DOCTYPE html>


<html lang="fi">


<pää>


<meta charset="UTF-8">


<meta http-equiv="X-UA-yhteensopiva" sisältö="IE = reuna">


<metanimi="näkymä" sisältö="leveys = laitteen leveys, alkumittakaava = 1,0">
<otsikko> Galleria </title>


{% block styles %}


{% bootstrap_css %}


{% endblock %}
</head>
<kehon>
 {% sisältää 'navbar.html' %}
 {% block content %} {% endblock %}
 {% block scripts %}
<komentosarja src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" eheys ="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonyymi">
</script>
 {% bootstrap_javascript %}
</body>
</html>

Lataa ensin bootstrap5-riippuvuus. Luo sitten kaksi lohkotyyliä, joissa määrität kaikki mallien tyylit. Sisällytä {% bootstrap_css %} mallitunniste ja linkki Bootstrap CSS -tiedostoon.

Luo seuraavaksi lohkokomentosarja, joka määrittää JavaScript-toiminnallisuuden.

Sisältäen navbar.html in base.html linkittää sen Bootstrapiin.

Testaa kokoonpanoa lisäämällä Bootstrap-tyylejä navbar.html sapluuna:

<nav class="navbar navbar-expand-lg">
<div class="säiliö-neste">
<h2 luokka="brändi" tyyli ="väri: vihreä">PICHA GALLERIA</h2>
<painikeluokka="navbar-toggler" tyyppi="-painiketta" data-toggle="romahdus" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-laajennettu="väärä" aria-label="Vaihda navigointi"><i luokka ="fas fa-baareja"></i></button>
<div class="tiivistää navbar-collapse" id="navbarSupportedContent">
<ul luokka ="navbar-nav ml-auto mb-2 mb-lg-0">
<li luokka ="nav-kohde"><luokka ="nav-link nav-link-1 aktiivinen" aria-current="sivu" href="{% url 'Koti' %}" tyyli ="väri: vihreä">Koti</a></li>
<li luokka ="nav-kohde"><luokka ="nav-link nav-link-2" href="#galleria" tyyli ="väri: vihreä">Galleria</a</li>
</ul>
</div>
</div>
</nav>

Suorita nyt palvelin ja tarkista sivustosi selaimessa. Sinun pitäisi nähdä tyyli, jota Bootstrap käyttää navigointipalkissa.

Miksi käyttää Bootstrapia Django-projekteissa?

Käytät enimmäkseen Djangoa taustakehitykseen, mutta se voi myös tehdä upeita etusivuja. Bootstrapin käyttö etusivujen muotoiluun on hyvä käytäntö Django-aloittelijoille. Saat syvällisen käsityksen Djangosta, kun luot täyden pinon sovelluksia.

Kuten minkä tahansa käyttöliittymäkehyksen, voit käyttää Bootstrap-luokkia Django-projektin kanssa verkkosivujesi tyylin muokkaamiseen. Bootstrap 5:ssä on parempia komponentteja ja nopea tyylisivu. Sillä on myös parantunut reagointikyky nykyaikaisille laitteille.

Mikset käytä Bootstrapia tyylistämiseen ja upeiden käyttöliittymien luomiseen Django-projekteihisi? Django hämmästyttää sinut verkkokehityksen ominaisuuksillaan.