bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí: • django_lliga • vagrant_dotnet • entorn_grafic_docker • sql_injection • android_recyclerview • ftp_aws • vagrant_ubuntu_libvirt • django_heroku • android_imatges • playground
django_bootstrap

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ó

Ambdós costats versió prèvia Revisió prèvia
Següent revisió 		Revisió prèvia
django_bootstrap [2023/06/27 13:56]
mikel_lopez_villarroya [django-boostratp4] 		django_bootstrap [2023/06/27 15:26] (actual)
mikel_lopez_villarroya [Començant amb Bootstrap]
Línia 1: Línia 1:
 ====== Fent servir Bootstrap4 en la nostra aplicació Django ====== ====== Fent servir Bootstrap4 en la nostra aplicació Django ======
-A l'hora de dissenyar aplicacions, una de les parts més importants és el disseny de la interfície gràfica. Django ens ofereix una arquitectura model-view-template, que facilita entendre i dissenyar tota l'estructura de l'aplicació, però no ens dona cap eina extra en el disseny html. +A l'hora de dissenyar aplicacions, una de les parts més importants és el disseny de la interfície gràfica. Django ens ofereix una arquitectura model-view-template, que permet entendre i dissenyar tota l'estructura de l'aplicació, però no ens dona cap eina extra en el disseny HTML. 
-Existeixen frameworks, com ara Bootstrap.+Existeixen frameworks, com ara Bootstrap, que faciliten aquesta feina. En aquest article veurem estratègies per integrar bootstrap en el nostre projecte Django. 
 + 
 +{{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? =====
Línia 44: 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. 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 é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.
  
Línia 78: 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. 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 =====
 +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 ====
  
-====== Recursos ======+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 --> 
 + 
 +  <!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 --> 
 +   
 + 
 +  {% 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 --> 
 + 
 + 
 +   
 +  {% 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. 
 +Mostrem un exemple que utilitza també una etiqueta de django_bootstrap4 per a generar formularis amb classes bootstrap. 
 +  {% extends 'base.html' %} 
 +  {% 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 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]]   * Documentació oficial de la llibreria django_bootstrap4: [[https://pypi.org/project/django-bootstrap4/|Link]]
  
  
django_bootstrap.1687874164.txt.gz · Darrera modificació: 2023/06/27 13:56 per mikel_lopez_villarroya

Eines de la pàgina

Excepte on es digui una altra cosa, el contingut d'aquest wiki està subjecte a la llicència següent: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki