Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

Nuo 2013 m. išleisto „Bootstrap“ sukėlė revoliuciją, kaip kūrėjai formuoja tinklalapių stilių. „Bootstrap“ yra populiari priekinė sistema, naudojama kuriant reaguojančias žiniatinklio programas.

„Django“ naudoja „Bootstrap“ iš anksto sukurtus CSS stilius ir „JavaScript“ papildinius, kad sukurtų tinklalapių stilių. Nors tai sumažina stiliaus kūrimo vargo, jį konfigūruoti Django gali būti sudėtinga.

Sužinokime, kaip įdiegti ir konfigūruoti „Bootstrap“ „Django“ programoje.

Kaip įdiegti „Bootstrap“.

Yra du būdai naudoti Bootstrap 5 Django projekte. Galite įdiegti jį savo programoje arba nurodyti failus naudodami „Bootstrap“ CDN. Šiame projekte bus naudojamas ankstesnis metodas.

Prieš įdiegdami „Bootstrap“, sukurti Django projektą ir programa, vadinama galerija. Programa bus nuotraukų galerija, o programos naršymo juostai stilizuoti naudosite „Bootstrap“.

instagram viewer

Tada įdiekite „Bootstrap“ naudodami šią komandą:

pipenv diegti django-bootstrap5 # įdiegia Bootstrap 5 versiją

Patikrinkite Pipfile ir patvirtinkite, kad yra Bootstrap 5 priklausomybė. Dabar turite pranešti „Django“ projektui, kad naudojate „Bootstrap“ priklausomybę.

Viduje settings.py failą, užregistruokite „Bootstrap“, kaip parodyta toliau:

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

Užregistravus Bootstrap projekto nustatymuose, django-bootstrap5 priklausomybė sujungiama su jūsų projektu. Jis bus prieinamas bet kuriai kitai projekte apibrėžtai programai.

Taikyti Bootstrap šablone

Pirmiausia sukurkite aplanką pavadinimu šablonus savo programos aplanke. Šiame aplanke sukurkite a base.html failas ir a navbar.html failą. Šabloniuose bus HTML failai, kuriuos „Bootstrap“ sukurs stiliumi.

Nors galite pritaikyti Bootstrap navbar.html šabloną, bazinio failo naudojimas yra įprastas. A base.html faile bus visi scenarijai ir nuorodos, kurios bus taikomos bet kuriam puslapiui. Tai sumažina atskirų šablonų sudėtingumą, todėl jūsų kodas tampa aiškesnis ir lengviau suprantamas.

Viduje base.html failą, įtraukite:

{% load bootstrap5 %}
<!DOCTYPE html>


<html lang="lt">


<galva>


<meta simbolių rinkinys ="UTF-8">


<meta http-equiv="Suderinamas su X-UA" turinys="IE = kraštas">


<meta vardas ="peržiūros sritis" turinys="plotis = įrenginio plotis, pradinė skalė = 1,0">
<titulą> Galerija </title>


{% blokuoti stiliai %}


{% bootstrap_css %}


{% endblock %}
</head>
<kūnas>
 {% įtraukti 'navbar.html' %}
 {% block content %} {% endblock %}
 {% blokuoti scenarijus %}
<scenarijus src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" vientisumas ="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="Anoniminis">
</script>
 {% bootstrap_javascript %}
</body>
</html>

Pirmiausia įkelkite „bootstrap5“ priklausomybę. Tada sukurkite du blokų stilius, kuriuose nustatysite visus šablonų stilius. Įtraukti {% bootstrap_css %} šablono žymą ir nuorodą į Bootstrap CSS failą.

Tada sukurkite bloko scenarijų, kuris apibrėžia JavaScript funkciją.

Įskaitant navbar.html viduje base.html susieja jį su Bootstrap.

Išbandykite konfigūraciją pridėdami Bootstrap stilius prie navbar.html šablonas:

<nav class="naršymo juosta navbar-expand-lg">
<div klasė ="konteineris-skystis">
<h2 klasė ="prekės ženklas" stilius ="spalva: žalia">PICHA GALERIJA</h2>
<mygtuko klasė="naršymo juosta-perjungiklis" tipas ="mygtuką" data-toggle="griūtis" data-target="#navbarSupportedContent" aria-controls="NavbarSupportedContent" arija-išskleista="klaidinga" aria-label="Perjungti navigaciją"><i klasė ="fas fa-barai"></i></button>
<div klasė ="griūti navbar-collapse" id="NavbarSupportedContent">
<ul klasė ="navbar-nav ml-auto mb-2 mb-lg-0">
<li klasė ="nav-elementas"><klasė ="nav-link nav-link-1 aktyvus" aria-current="puslapį" href="{% url 'namai' %}" stilius ="spalva: žalia">Namai</a></li>
<li klasė ="nav-elementas"><klasė ="nav-link nav-link-2" href="#galerija" stilius ="spalva: žalia">Galerija</a</li>
</ul>
</div>
</div>
</nav>

Dabar paleiskite serverį ir patikrinkite savo svetainę naršyklėje. Turėtumėte pamatyti stilių, kurį „Bootstrap“ taiko naršymo juostai.

Kodėl „Django“ projektuose naudoti „Bootstrap“?

Dažniausiai „Django“ naudosite galiniam kūrimui, tačiau jis taip pat gali sukurti nuostabius priekinius puslapius. „Bootstrap“ naudojimas priekinių puslapių stiliui yra gera praktika „Django“ pradedantiesiems. Kurdami visas programas gausite išsamų Django supratimą.

Kaip ir bet kuri priekinė sistema, galite naudoti „Bootstrap“ klases su „Django“ projektu, kad sukurtumėte savo tinklalapių stilių. „Bootstrap 5“ turi geresnius komponentus ir greitą stiliaus lapą. Jis taip pat pagerino šiuolaikinių įrenginių reagavimą.

Kodėl gi nepasinaudojus „Bootstrap“ stilizuoti ir sukurti nuostabias „Django“ projektų vartotojo sąsajas? „Django“ nustebins jus savo žiniatinklio kūrimo galimybėmis.