Taula de continguts

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 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.

#FpInfor, #Daw, #DawMp07, #DawMp07Uf02, #DawMp07Uf2, #DawMp07Uf02, #Ciber, #Ceti, #CiberMp03, #CetiMp03, django, framework, python, web, DevOps, bootstrap, bootstrap4

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

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 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.

Contenidor: El primer element clau és el «container». Aquest component envolta tot el contingut de la pàgina i el centra horitzontalment a la pantalla.
Fileres i columnes: Bootstrap utilitza un sistema de graella basat en un sistema de 12 columnes. Podem utilitzar les classes «row» i «col» per organitzar els elements en fileres i assignar-los diferents amplades de columnes.
Amplades de columnes: Amb les classes «col-XX», on «XX» representa el nombre de columnes que volem ocupar, podem controlar l'amplada de les columnes en funció de les necessitats de la nostra pàgina.
Responsivitat: Bootstrap ens permet crear un layout responsiu mitjançant l'ús de les classes «col-sm-XX», «col-md-XX», «col-lg-XX» i «col-xl-XX». Això ens permet adaptar el layout en diferents dispositius, com ara tauletes i telèfons mòbils.
Classes d'offset: Amb les classes «offset-XX», podem desplaçar les columnes cap a la dreta per crear espais en blanc o marges entre els elements.
Centrat vertical: Utilitzant la classe «align-items-center» en una fila, podem centrar verticalment els elements continguts en ella.
Marges i premses: Bootstrap ofereix classes per afegir marges i premses als elements. Podem utilitzar les classes «m-XX» i «p-XX», on «XX» representa el nombre de píxels de marge o premsa que volem aplicar.
Navegació: Bootstrap proporciona components per crear fàcilment barres de navegació responsives, com ara la classe «navbar». Amb aquesta classe, podem crear una barra de navegació horitzontal o vertical amb diferents opcions de personalització.
Peus de pàgina: Podem utilitzar la classe «footer» per crear un peu de pàgina atractiu. Aquest component ens permet afegir informació addicional o enllaços a la part inferior de la pàgina.
Ample total: Si volem que un element ocupi tot l'ample disponible, podem utilitzar la classe «w-100».

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-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ó

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.

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.

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.

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

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: Link
Documentació oficial de la llibreria django_bootstrap4: Link

bytes.cat

Barra lateral

Taula de continguts

Fent servir Bootstrap4 en la nostra aplicació Django

Però, què és Bootstrap?

Començant amb Bootstrap

El layout en Bootstrap

django-boostratp4

Instal·lació i configuració

Utilitzant Django-Bootstrap4 a les nostres plantilles

Extra: recomanacions per a fer templates

Creació de la Plantilla Base

Creació de la Plantilla amb la Barra de Navegació

Creació de la Plantilla amb el Peu de Pàgina

Herència de Plantilles

Recursos

bytes.cat

Eines de l'usuari

Eines del lloc

Barra lateral

Taula de continguts

Fent servir Bootstrap4 en la nostra aplicació Django

Però, què és Bootstrap?

Començant amb Bootstrap

El layout en Bootstrap

django-boostratp4

Instal·lació i configuració

Utilitzant Django-Bootstrap4 a les nostres plantilles

Extra: recomanacions per a fer templates

Creació de la Plantilla Base

Creació de la Plantilla amb la Barra de Navegació

Creació de la Plantilla amb el Peu de Pàgina

Herència de Plantilles

Recursos

Eines de la pàgina