Cititorii ca tine ajută la sprijinirea MUO. Când efectuați o achiziție folosind link-uri de pe site-ul nostru, este posibil să câștigăm un comision de afiliat. Citeşte mai mult.

De la lansarea sa în 2013, Bootstrap a revoluționat modul în care dezvoltatorii stilează paginile web. Bootstrap este un cadru front-end popular folosit pentru a proiecta aplicații web receptive.

Django folosește stilurile CSS prefabricate de Bootstrap și pluginurile JavaScript pentru a stila paginile web. Deși reduce problemele legate de stil, configurarea acestuia în Django poate fi o provocare.

Să învățăm cum să instalăm și să configurați Bootstrap într-o aplicație Django.

Cum se instalează Bootstrap

Există două moduri de a utilizați Bootstrap 5 într-un proiect Django. Puteți să-l instalați în aplicația dvs. sau să faceți referire la fișiere folosind CDN-ul Bootstrap. Acest proiect va folosi metoda anterioară.

Înainte de a instala Bootstrap, creați un proiect Django și o aplicație numită galerie. Aplicația va fi o galerie foto și veți folosi Bootstrap pentru a stila bara de navigare a aplicației.

instagram viewer

Apoi, instalați Bootstrap cu următoarea comandă:

pipenv instalare django-bootstrap5 # instalează Bootstrap versiunea 5

Verificați fișierul Pip și confirmați că există o dependență de Bootstrap 5. Acum trebuie să notificați proiectul Django că utilizați o dependență Bootstrap.

În setări.py fișier, înregistrați Bootstrap așa cum se arată mai jos:

INSTALLED_APPS = [
'Galerie',
'bootstrap5', 
]

Înregistrarea Bootstrap în setările proiectului conectează dependența django-bootstrap5 la proiectul dvs. Acesta va fi disponibil oricărei alte aplicații definite în proiect.

Aplicați Bootstrap pe un șablon

Mai întâi, creați un folder numit șabloane în folderul aplicației dvs. În interiorul acestui folder, creați un baza.html dosar și a navbar.html fişier. Șabloanele vor conține fișiere HTML pe care Bootstrap le va stila.

În timp ce puteți aplica Bootstrap pe navbar.html șablon, utilizarea unui fișier de bază este convențională. A baza.html fișierul va conține toate scripturile și linkurile de aplicat oricărei pagini. Reduce complexitatea șabloanelor individuale, făcând codul mai curat și mai ușor de înțeles.

În baza.html fișier, includeți următoarele:

{% load bootstrap5 %}
<!DOCTYPE html>


<html lang="ro">


<cap>


<meta charset="UTF-8">


<meta http-equiv="Compatibil X-UA" continut="IE=marginea">


<meta nume="fereastra" continut="lățime=lățime-dispozitiv, scară inițială=1,0">
<titlu> Galerie </title>


{% stiluri de bloc %}


{% bootstrap_css %}


{% endblock %}
</head>
<corp>
 {% include 'navbar.html' %}
 {% block content %} {% endblock %}
 {% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integritate="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" origine încrucișată="anonim">
</script>
 {% bootstrap_javascript %}
</body>
</html>

Mai întâi, încărcați dependența bootstrap5. Apoi creați două stiluri de bloc în care veți defini toate stilurile pentru șabloane. Includeți {% bootstrap_css %} etichetă șablon și un link către fișierul CSS Bootstrap.

Apoi, creați un script de bloc care definește funcționalitatea JavaScript.

Incluzând navbar.html în baza.html îl conectează la Bootstrap.

Testați configurația adăugând stiluri Bootstrap la navbar.html șablon:

<nav class="navbar navbar-expand-lg">
<div class="recipient-fluid">
<clasa h2="marca" stil="culoare: verde">GALERIA PICHA</h2>
<clasa de buton="navbar-toggler" tip="buton" comutare-date="colaps" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="fals" aria-label="Comutare navigare"><i clasa="fas fa-bars"></i></button>
<div class="colaps navbar-colaps" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mb-2 mb-lg-0">
<li class="nav-element"><o clasă="nav-link nav-link-1 activ" aria-curent="pagină" href="{% URL 'Acasă' %}" stil="culoare: verde">Acasă</A></li>
<li class="nav-element"><o clasă="nav-link nav-link-2" href="#Galerie" stil="culoare: verde">Galerie</A</li>
</ul>
</div>
</div>
</nav>

Acum, rulați serverul și verificați site-ul într-un browser. Ar trebui să vedeți stilul pe care Bootstrap îl aplică barei de navigare.

De ce să folosiți Bootstrap în proiectele Django?

Veți folosi în mare parte Django pentru dezvoltarea back-end, dar poate face și pagini uimitoare pentru front-end. Utilizarea Bootstrap pentru stilarea paginilor front-end este o practică bună pentru începătorii Django. Obțineți o înțelegere aprofundată a Django atunci când creați aplicații full-stack.

Ca orice cadru front-end, puteți folosi clasele Bootstrap cu un proiect Django pentru a vă stila paginile web. Bootstrap 5 are componente mai bune și o foaie de stil rapidă. De asemenea, are o capacitate de răspuns îmbunătățită pentru dispozitivele moderne.

De ce să nu folosiți Bootstrap pentru a stila și a crea interfețe de utilizare uimitoare pentru proiectele dvs. Django? Django vă va uimi cu capacitățile sale în dezvoltarea web.