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 14:34]
mikel_lopez_villarroya [Creació de la Plantilla Base] 		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}} {{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. 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. 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: 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>   <!DOCTYPE html>
Línia 30: Línia 30:
   </body>   </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. 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. 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. 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.
  
 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. 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: 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. 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. 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. 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. 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. 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 -->   <!-- plantilla_base.html -->
-  +
   <!DOCTYPE html>   <!DOCTYPE html>
   <html>   <html>
   <head>   <head>
       <title>El meu lloc web</title>       <title>El meu lloc web</title>
-      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2  /css/bootstrap.min.css"> +      {% load static %} 
-      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>+      {% load bootstrap4 %} 
 +      {% bootstrap_css %} 
 +      {% bootstrap_javascript jquery=True %} 
 +      {% bootstrap_messages %}
   </head>   </head>
   <body>   <body>
 +      {% include 'navbar.html' %}
       <div class="container">       <div class="container">
           {% block content %}           {% block content %}
Línia 103: Línia 107:
   </html>   </html>
  
-===== Creació de la Plantilla amb la Barra de Navegació =====+==== 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. 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. 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 ===== 
  
-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.+   
 +  {% 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 %}
  
-====== Recursos ======+==== 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.1687876481.txt.gz · Darrera modificació: 2023/06/27 14:34 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