Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

--- django_bootstrap [2023/06/27 14:32]
mikel_lopez_villarroya [Extra: recomanacions per a fer templates]
+++ django_bootstrap [2023/06/27 15:26] (actual)
mikel_lopez_villarroya [Començant amb Bootstrap]
@@ Línia 5: / Línia 5: @@
 {{tag> #FpInfor #Daw #DawMp07 #DawMp07Uf02 #DawMp07Uf2 #DawMp07Uf02 #Ciber #Ceti #CiberMp03 #CetiMp03 django framework python web DevOps bootstrap bootstrap4}}
-====== Però, què és Bootstrap? ======
+===== Però, què és Bootstrap? =====
 Bootstrap és un framework de desenvolupament web front-end àmpliament utilitzat que ofereix un conjunt de components, estils i funcionalitats predefinides per a la creació ràpida d'interfícies d'usuari atractives i responsives. Bootstrap permet als desenvolupadors centrar-se en la lògica de negoci de les seves aplicacions sense haver de dedicar temps significatiu a desenvolupar estils i components des de zero.
 Amb Bootstrap, els desenvolupadors poden aprofitar les classes CSS i els components de JavaScript predefinits per crear fàcilment un aspecte professional per a les seves aplicacions web. A més, Bootstrap és totalment personalitzable, el que significa que es pot adaptar per satisfer les necessitats específiques del projecte.
-===== Començant amb Bootstrap =====
+==== Començant amb Bootstrap ====
 Per començar, primerament hem de vincular les biblioteques de Bootstrap a la nostra pàgina HTML. Això es pot fer afegint els següents enllaços als estils i als scripts de Bootstrap a l'encapçalament del document:
   <!DOCTYPE html>
@@ Línia 30: / Línia 30: @@
   </body>
 Això és només un exemple senzill de com utilitzar Bootstrap per generar una pàgina web des de zero. Amb Bootstrap, tenim accés a molts més components, classes i estils per personalitzar i millorar la nostra interfície d'usuari.
-===== El layout en Bootstrap =====
+==== El layout en Bootstrap ====
 El layout és una part fonamental de Bootstrap, ja que ens permet organitzar i estructurar els elements de la nostra pàgina web de manera senzilla i flexible. Amb Bootstrap, disposem de diferents classes i components per crear un layout adaptatiu i responsiu.
@@ Línia 46: / Línia 46: @@
 En resum, el layout en Bootstrap ens permet crear un disseny flexible i adaptatiu per a la nostra pàgina web. Amb les classes i components proporcionats, podem estructurar el contingut, controlar l'amplada de les columnes, adaptar-nos a diferents dispositius i afegir marges i premses. Bootstrap ens facilita la creació d'un layout atractiu i responsiu sense la necessitat de codificar tot des de zero.
-====== django-boostratp4 ======
+===== django-boostratp4 =====
 Django-Bootstrap4 és una biblioteca que proporciona una integració perfecta entre Django i Bootstrap4. Aquesta biblioteca ofereix una forma senzilla i eficient d'utilitzar els components, estils i funcionalitats de Bootstrap4 a les plantilles de Django.
 Django-Bootstrap4 proporciona etiquetes de plantilla personalitzades i utilitats que permeten aprofitar al màxim les funcionalitats de Bootstrap4 en les nostres aplicacions web Django. Amb aquesta biblioteca, podem integrar fàcilment els estils i components de Bootstrap4 a les nostres plantilles Django, estalviant temps i esforç en el desenvolupament d'interfícies d'usuari atractives i responsives.
-===== Instal·lació i configuració =====
+==== Instal·lació i configuració ====
 Per començar a utilitzar Django-Bootstrap4, primerament hem d'instal·lar-lo al nostre entorn de desenvolupament. Podem fer-ho utilitzant l'eina de gestió de paquets de Python, pip. Executem la següent comanda al nostre terminal:
@@ Línia 67: / Línia 67: @@
 Aquesta configuració indica a Django que inclogui Django-Bootstrap4 en el nostre projecte.
-===== Utilitzant Django-Bootstrap4 a les nostres plantilles =====
+==== Utilitzant Django-Bootstrap4 a les nostres plantilles ====
 Un cop hem instal·lat i configurat correctament Django-Bootstrap4, podem començar a utilitzar-lo a les nostres plantilles Django. Django-Bootstrap4 proporciona una varietat d'etiquetes de plantilla personalitzades que ens permeten generar fàcilment els components de Bootstrap4.
@@ Línia 80: / Línia 80: @@
 A més dels components predefinits, Django-Bootstrap4 també ens permet personalitzar fàcilment els estils i aspectes dels components de Bootstrap4 utilitzant les opcions i arguments addicionals proporcionats per les etiquetes de plantilla.
-====== Extra: recomanacions per a fer templates ======
+===== Extra: recomanacions per a fer templates =====
 En aquesta secció, explorarem les bones pràctiques per a la generació de plantilles amb Django utilitzant la llibreria Django-Bootstrap4 i el framework Bootstrap. Aprendrem com estructurar i organitzar les plantilles utilitzant una plantilla base, una plantilla amb la barra de navegació (navbar) i una plantilla amb el peu de pàgina (footer). Aquesta aproximació ens permetrà mantenir una estructura clara i reutilitzable per a les nostres plantilles Django.
-===== Creació de la Plantilla Base =====
+==== Creació de la Plantilla Base ====
 Comencem creant una plantilla base que servirà com a marc principal per a totes les altres plantilles. Aquesta plantilla base hauria d'incloure els elements comuns a totes les pàgines, com ara l'enllaç als arxius CSS i JS de Bootstrap, i el codi estructural bàsic. Utilitzarem la llibreria Django-Bootstrap4 per a integrar Bootstrap a la nostra plantilla.
+  <!-- plantilla_base.html -->
-===== Creació de la Plantilla amb la Barra de Navegació =====
+  <!DOCTYPE html>
+  <html>
+  <head>
+      <title>El meu lloc web</title>
+      {% load static %}
+      {% load bootstrap4 %}
+      {% bootstrap_css %}
+      {% bootstrap_javascript jquery=True %}
+      {% bootstrap_messages %}
+  </head>
+  <body>
+      {% include 'navbar.html' %}
+      <div class="container">
+          {% block content %}
+          {% endblock %}
+      </div>
+  </body>
+  </html>
+==== Creació de la Plantilla amb la Barra de Navegació ====
 A continuació, crearem una plantilla específica per a la barra de navegació (navbar). Aquesta plantilla hauria d'incloure el codi necessari per a generar la barra de navegació utilitzant les classes i components de Bootstrap. Podem utilitzar les etiquetes de plantilla de Django-Bootstrap4 per a generar fàcilment els elements de la barra de navegació, com ara els enllaços i els menús desplegables.
+  <!-- plantilla_navbar.html -->
-===== Creació de la Plantilla amb el Peu de Pàgina =====
+  {% block navbar %}
+  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+      <a class="navbar-brand" href="#">El meu lloc web</a>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarNav">
+          <ul class="navbar-nav">
+              <li class="nav-item active">
+                  <a class="nav-link" href="#">Inici</a>
+              </li>
+              <li class="nav-item">
+                  <a class="nav-link" href="#">Serveis</a>
+              </li>
+              <li class="nav-item">
+                  <a class="nav-link" href="#">Sobre Nosaltres</a>
+              </li>
+              <li class="nav-item">
+                  <a class="nav-link" href="#">Contacte</a>
+              </li>
+          </ul>
+      </div>
+  </nav>
+  {% endblock %}
+==== Creació de la Plantilla amb el Peu de Pàgina ====
 Finalment, crearem una plantilla específica per al peu de pàgina (footer). Aquesta plantilla hauria d'incloure el codi necessari per a generar el peu de pàgina utilitzant les classes i components de Bootstrap. Podem afegir informació addicional, enllaços o fins i tot formularis de contacte al peu de pàgina.
+  <!-- plantilla_footer.html -->
-===== Herència de Plantilles =====
+  {% block footer %}
+  <footer class="footer mt-auto py-3 bg-light">
+      <div class="container">
+          <span class="text-muted">© 2023 El meu lloc web. Tots els drets reservats.</span>
+      </div>
+  </footer>
+  {% endblock %}
+==== Herència de Plantilles ====
 Un cop hàgim creat les plantilles base, de la barra de navegació i del peu de pàgina, podem utilitzar el concepte d'herència de plantilles de Django per a crear les pàgines específiques del nostre lloc web. Per exemple, per a crear una pàgina principal, podem heretar la plantilla base i afegir el contingut específic d'aquesta pàgina. Això ens permet reutilitzar el codi i mantenir una estructura consistent per a les nostres plantilles.
-===== Personalització i Optimització =====
+Mostrem un exemple que utilitza també una etiqueta de django_bootstrap4 per a generar formularis amb classes bootstrap.
-Django-Bootstrap4 i Bootstrap ens ofereixen una àmplia gamma de classes i components per a personalitzar l'estil de les nostres plantilles. Podem utilitzar classes addicionals, estils personalitzats o fins i tot modificar els fitxers CSS de Bootstrap per a adaptar l'aparença del nostre lloc web a les nostres necessitats. A més, és important optimitzar el rendiment de les plantilles
+  {% extends 'base.html' %}
-====== Recursos ======
+  {% load bootstrap4 %}
+  {% block content %}
+  <div class="container">
+      <div class="row my-5">
+          <div class="col-md-12">
+              <form action="" method="post" class="form">
+                  {% csrf_token %}
+                  {% bootstrap_form form %}
+                  <button type="submit" class="btn btn-primary">Submit</button>
+              </form>
+          </div>
+      </div>
+  </div>
+  {% endblock %}
+===== Recursos =====
   * Documentació oficial de Bootstrap4: [[https://getbootstrap.com/docs/4.6/getting-started/introduction/|Link]]
   * Documentació oficial de la llibreria django_bootstrap4: [[https://pypi.org/project/django-bootstrap4/|Link]]

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina