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, que faciliten aquesta feina. En aquest article veurem estratègies per integrar bootstrap en el nostre projecte Django.
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.
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>
<html>
<head>
<title>Exemple de Bootstrap</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Aquí afegirem el contingut de la nostra pàgina web -->
</body>
</html>
Ara que hem vinculat correctament les biblioteques de Bootstrap, podem començar a utilitzar els seus components. Per exemple, afegim un títol i un botó a la nostra pàgina amb les classes Bootstrap:
<body>
<div class="container">
<h1>Exemple de Bootstrap</h1>
<button class="btn btn-primary">Clic aquí</button>
</div>
</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 é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.
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-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.
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:
pip install django-bootstrap4
Un cop instal·lat, hem d'afegir 'bootstrap4' a la llista d'aplicacions instal·lades al fitxer de configuració de Django (settings.py):
INSTALLED_APPS = [
...
'bootstrap4',
...
]
Aquesta configuració indica a Django que inclogui Django-Bootstrap4 en el nostre projecte.
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.
Per exemple, si volem mostrar un botó a la nostra plantilla, podem utilitzar l'etiqueta de plantilla bootstrap_button de la següent manera:
{% load bootstrap4 %}
...
{% bootstrap_button "Feu clic aquí" button_type="primary" %}
En aquest exemple, estem utilitzant l'etiqueta de plantilla bootstrap_button per generar un botó amb el text «Feu clic aquí» i l'estil de botó primari de Bootstrap4.
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.
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.
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>
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 %}
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 %}
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 %}