Bootstrap

Bootstrap és un framework de desenvolupament web de codi obert que facilita la creació de llocs web amb un disseny modern i responsive.

Hem de tindre en compte que, quan dissenyem pàgines web amb HTML i CSS, moltes vegades acabem repetint els mateixos estils: botons, formularis, taules, marges o estructures semblants. Bootstrap naix precisament per a evitar haver de crear estos estils des de zero en cada projecte.

Bootstrap va ser creat inicialment per Twitter i, hui en dia, és un dels frameworks CSS més utilitzats en el desenvolupament web.

1.- Bootstrap com a llibreria d’estils

Bootstrap és, principalment, una llibreria d’estils CSS.

A la pràctica, això significa que:

  • afegim un fitxer CSS al nostre projecte
  • i podem utilitzar una sèrie de classes ja definides

Aquestes classes s’apliquen directament als elements HTML i ens permeten:

  • donar estil a la pàgina
  • maquetar el contingut
  • utilitzar components habituals

Tot això sense necessitat d’escriure tot el CSS manualment.

Per a incloure Bootstrap en un projecte, normalment utilitzem un CDN (Content Delivery Network) que ens permet carregar els fitxers CSS directament des d’un servidor extern.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

Bootstrap també inclou fitxers JavaScript, però no tots els components els necessiten.
Els components més bàsics funcionen només amb HTML i CSS, mentre que altres components més avançats, com els modals o els carrusels, necessiten JavaScript.

Per a utilitzar aquests components, cal incloure el fitxer JavaScript de Bootstrap, que habitualment s’afegeix mitjançant un CDN (Content Delivery Network).

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

2.- CDN (Content Delivery Network)

Un CDN és una xarxa de servidors que permet carregar fitxers externs (CSS, JavaScript…) de manera ràpida, sense haver-los de guardar dins del projecte.

La manera més segura d’obtenir un enllaç CDN és consultar la documentació oficial de la llibreria o framework.

Com a alternativa, podem utilitzar repositoris de CDN reconeguts, com:

No és recomanable copiar enllaços de pàgines desconegudes o tutorials antics.

3.- Què ens ofereix Bootstrap

Bootstrap ens ofereix un conjunt d’eines per a construir pàgines web de manera més ràpida i ordenada.

Principalment, ens proporciona:

  • un sistema de graella responsiu, que s’adapta a diferents mides de pantalla
  • components reutilitzables, com botons, formularis, taules o targetes
  • classes d’estil i utilitat, per a gestionar espais, alineació i text

Aquests elements són els que normalment necessitem per a maquetar una pàgina web completa.

Exemple bàsic amb Bootstrap

Vegem un exemple senzill d’ús de Bootstrap. Hem afegit el fitxer CSS de Bootstrap i hem aplicat algunes classes bàsiques per a donar estil a la pàgina.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

    <title>Bootstrap</title>
</head>
<body>

<header class="bg-dark text-white text-center py-5">
    <h1>Pàgina d'Exemple amb Bootstrap</h1>
</header>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">

        <a class="navbar-brand" href="#">Inici</a>

        <button class="navbar-toggler" type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbarNav"
                aria-controls="navbarNav"
                aria-expanded="false"
                aria-label="Mostrar navegació">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Secció 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Secció 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Secció 3</a>
                </li>
            </ul>
        </div>

    </div>
</nav>

<div class="container mt-4">
    <h2>Contingut Principal</h2>
    <p>
        Ací pots afegir el teu contingut principal utilitzant
        les classes de Bootstrap per a estil i format.
    </p>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

Al codi anterior, hem utilitzat diverses classes de Bootstrap per a donar estil a diferents seccions de la pàgina.

  • Encapçalament (header)

S’utilitza per a mostrar el títol principal de la pàgina.

<header class="bg-dark text-white text-center py-5">

Classes utilitzades:

  • bg-dark → defineix el color de fons
  • text-white → canvia el color del text
  • text-center → centra el contingut
  • py-5 → afegeix espai vertical
  • Barra de navegació (navbar)

Permet crear un menú de navegació responsive.

<nav class="navbar navbar-expand-lg navbar-light bg-light">

Classes utilitzades:

  • navbar → component de navegació
  • navbar-expand-lg → el menú es desplega en pantalles grans
  • navbar-light → estil clar del text
  • bg-light → fons clar
  • navbar-brand → marca o enllaç principal
  • navbar-toggler → botó de menú en pantalles xicotetes
  • navbar-nav → llista de navegació
  • nav-item → element del menú
  • nav-link → enllaç del menú
  • active → indica l’enllaç actiu

Contenidor principal (container)

Agrupa i centra el contingut principal de la pàgina.

Classes utilitzades:

  • container → limita l’amplària i centra el contingut

  • mt-4 → afegeix marge superior

Amb Bootstrap podem construir una estructura web completa utilitzant components i classes ja definides, sense escriure CSS.

4.- Com utilitzem Bootstrap

Per a utilitzar Bootstrap en un projecte, no cal instal·lar cap programa ni cap eina especial. La manera més senzilla és afegir els fitxers CSS i JavaScript mitjançant CDN dins del document HTML.

Una vegada afegits aquests fitxers, ja podem començar a utilitzar les classes de Bootstrap directament en els nostres elements HTML.

  • 1-Afegir Bootstrap al document HTML

En primer lloc, afegim el fitxer CSS de Bootstrap dins de l’etiqueta <head>:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

Aquest fitxer conté:

  • tots els estils
  • el sistema de graella
  • les classes d’utilitat
  • els components visuals de Bootstrap

Si volem utilitzar components que necessiten JavaScript (com la barra de navegació desplegable), cal afegir també el fitxer JavaScript abans de tancar el <body>:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  • 2-Ús de classes de Bootstrap

Bootstrap funciona a través de classes CSS que s’afegeixen als elements HTML.

Per exemple, per a crear un botó amb estil de Bootstrap, només cal afegir les classes corresponents:

<button class="btn btn-primary">Botó Bootstrap</button>

No estem creant cap CSS propi, sinó que estem reutilitzant estils ja definits.

  • 3-Manera de treballar amb Bootstrap

Quan treballem amb Bootstrap:

  • escrivim HTML normal
  • afegim classes de Bootstrap als elements
  • observem el resultat
  • i ajustem el disseny canviant les classes

Aquesta manera de treballar permet:

  • anar més ràpid
  • mantindre una coherència visual
  • centrar-nos en l’estructura i el contingut

5.- Components bàsics de Bootstrap

1. Contenidors (container)

Els contenidors en Bootstrap s’utilitzen per a centrar i controlar l’amplària del contingut de la pàgina web. Són la base sobre la qual es construeix tota l’estructura del lloc.

Classes principals:

  • container
  • container-fluid
<div class="container mt-4">
    <h2>Notícies destacades</h2>
    <p class="text-muted">Últimes actualitzacions del lloc web.</p>
</div>

Classes utilitzades:

  • container: centra el contingut i limita l’amplària
  • mt-4: afegeix marge superior
  • text-muted: mostra el text amb un color suau

2. Sistema de Graella (Grid)

El sistema de graella permet organitzar el contingut en files i columnes responsives. És fonamental per a crear dissenys adaptables a diferents pantalles.

Classes principals:

  • container
  • row
  • col-*
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <h5>Article 1</h5>
            <p>Resum del contingut.</p>
        </div>
        <div class="col-md-4">
            <h5>Article 2</h5>
            <p>Resum del contingut.</p>
        </div>
        <div class="col-md-4">
            <h5>Article 3</h5>
            <p>Resum del contingut.</p>
        </div>
    </div>
</div>

Classes utilitzades:

  • row: crea una fila
  • col-md-4: crea columnes que ocupen 4 de les 12 columnes en pantalles mitjanes o grans

3. Barra de navegació (navbar)

La barra de navegació permet crear menús adaptables a dispositius mòbils.

Classes principals:

  • navbar
  • navbar-expand-*
  • navbar-brand
  • navbar-nav
  • nav-item
  • nav-link
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#">El Meu Lloc</a>
        <ul class="navbar-nav ms-auto">
            <li class="nav-item">
                <a class="nav-link active" href="#">Inici</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Blog</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contacte</a>
            </li>
        </ul>
    </div>
</nav>

Classes utilitzades:

  • navbar: component de navegació
  • navbar-expand-lg: menú desplegable només en pantalles xicotetes
  • bg-dark, navbar-dark: colors de fons i text
  • ms-auto: envia el menú cap a la dreta

4. Botons (buttons)

Els botons s’utilitzen per a realitzar accions dins de la pàgina.

Classes principals:

  • btn
  • btn-primary
  • btn-success
  • btn-danger
<div class="mt-3">
    <button class="btn btn-primary">Veure detalls</button>
    <button class="btn btn-success">Guardar</button>
    <button class="btn btn-danger">Eliminar</button>
</div>

Classes utilitzades:

  • btn: classe base del botó
  • btn-primary, btn-success, btn-danger: indiquen el tipus d’acció

5. Alertes (alerts)

Les alertes s’utilitzen per mostrar missatges informatius o d’estat.

Classes principals:

  • alert
  • alert-success
  • alert-warning
  • alert-danger
<div class="alert alert-success">
    Les dades s’han guardat correctament.
</div>

<div class="alert alert-warning">
    Revisa els camps abans de continuar.
</div>

Classes utilitzades:

  • alert: component base
  • alert-success, alert-warning: defineixen el tipus de missatge

6. Targetes (cards)

Les targetes permeten agrupar informació dins d’un bloc visual.

Classes principals:

  • card
  • card-body
  • card-title
  • card-text
<div class="card mb-3">
    <div class="card-body">
        <h5 class="card-title">Producte destacat</h5>
        <p class="card-text">Descripció breu del producte.</p>
        <button class="btn btn-primary">Comprar</button>
    </div>
</div>

Classes utilitzades:

  • card: contenidor principal
  • card-body: zona de contingut
  • mb-3: marge inferior

7. Formularis (forms)

Bootstrap facilita la creació de formularis coherents i responsius.

Classes principals:

  • form-label
  • form-control
  • btn
<form class="w-50">
    <div class="mb-3">
        <label class="form-label">Email</label>
        <input type="email" class="form-control" placeholder="usuari@email.com">
    </div>
    <button class="btn btn-success">Registrar-se</button>
</form>

Classes utilitzades:

  • form-control: estilitza el camp d’entrada
  • form-label: estil de l’etiqueta
  • w-50: limita l’amplària del formulari

8. Badges

Els badges mostren informació xicoteta o estats.

Classes principals:

  • badge
  • bg-*
<h5>
    Missatges
    <span class="badge bg-danger">3</span>
</h5>

Classes utilitzades:

  • badge: crea l’etiqueta
  • bg-danger: color de fons

El carrusel permet mostrar imatges o contingut de manera dinàmica.

Classes principals:

  • carousel
  • carousel-inner
  • carousel-item
<div id="carouselExample" class="carousel slide mb-4" data-bs-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="banner1.jpg" class="d-block w-100">
        </div>
        <div class="carousel-item">
            <img src="banner2.jpg" class="d-block w-100">
        </div>
    </div>
</div>

Classes utilitzades:

  • carousel: component principal
  • carousel-item: cada diapositiva
  • d-block w-100: imatge adaptada a l’amplària

10. Modals (modal)

Els modals són finestres emergents que es mostren sobre la pàgina.

Classes principals:

  • modal
  • modal-dialog
  • modal-content
<div class="modal fade" id="confirmModal">
    <div class="modal-dialog">
        <div class="modal-content p-3">
            <h5>Confirmar acció</h5>
            <p>Estàs segur que vols eliminar aquest element?</p>
            <button class="btn btn-danger">Confirmar</button>
        </div>
    </div>
</div>

Classes utilitzades:

  • modal: component del modal
  • modal-dialog: estructura del diàleg
  • p-3: espaiat interior

Exemple Complet Bootstrap 

<!DOCTYPE html>
<html lang="ca">
<head>
    <!-- Configuració de la pàgina -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Enllaç a l'estil de Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Títol de la pàgina -->
    <title>Exemple Bootstrap 5 (Components principals)</title>
</head>
<body>

<!-- 3. Barra de navegació (navbar) -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <!-- Marca -->
        <a class="navbar-brand" href="#">Logo</a>

        <!-- Botó de desplegament en pantalles xicotetes -->
        <button class="navbar-toggler" type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbarNav"
                aria-controls="navbarNav"
                aria-expanded="false"
                aria-label="Mostrar navegació">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Contingut de la barra de navegació -->
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="#destacat">Inici</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#cards">Targetes</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#formulari">Formulari</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- 1. Contenidors (container) -->
<div class="container my-4">

    <!-- Bloc destacat (substitució del Jumbotron en Bootstrap 5) -->
    <section id="destacat" class="p-5 bg-light rounded">
        <h1 class="display-4">Bootstrap 5</h1>
        <p class="lead">Pàgina d'exemple amb els components principals de Bootstrap.</p>
        <p class="mb-0">En aquesta pàgina es veu clarament cada component en una secció diferent.</p>
    </section>

    <!-- 5. Alertes (alerts) -->
    <div class="alert alert-success mt-4" role="alert">
        Aquesta és una caixa d'alerta d'èxit.
    </div>

    <!-- 4. Botons (buttons) -->
    <div class="mt-3">
        <button type="button" class="btn btn-primary">Acció principal</button>
        <button type="button" class="btn btn-success">Confirmar</button>
        <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#confirmModal">
            Obrir modal
        </button>
    </div>

    <!-- 8. Badges -->
    <h5 class="mt-4">
        Missatges
        <span class="badge bg-danger">3</span>
    </h5>

    <!-- 2. Sistema de graella (grid) -->
    <div class="mt-4">
        <h3 class="mb-3">Sistema de graella</h3>

        <div class="row g-3">
            <div class="col-md-4">
                <div class="p-3 border rounded">
                    <h5>Columna 1</h5>
                    <p class="mb-0">Contingut dins de la primera columna.</p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="p-3 border rounded">
                    <h5>Columna 2</h5>
                    <p class="mb-0">Contingut dins de la segona columna.</p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="p-3 border rounded">
                    <h5>Columna 3</h5>
                    <p class="mb-0">Contingut dins de la tercera columna.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 6. Targetes (cards) -->
    <div id="cards" class="mt-5">
        <h3 class="mb-3">Targetes</h3>

        <div class="row g-3">
            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title">Targeta 1</h5>
                        <p class="card-text">Exemple de targeta amb títol, text i botó.</p>
                        <a href="#" class="btn btn-primary">Llegir més</a>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title">Targeta 2</h5>
                        <p class="card-text">Una altra targeta per a veure la coherència visual.</p>
                        <a href="#" class="btn btn-success">Veure</a>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title">Targeta 3</h5>
                        <p class="card-text">Targetes molt útils per a llistats, productes o entrades.</p>
                        <a href="#" class="btn btn-danger">Eliminar</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 7. Formularis (forms) -->
    <div id="formulari" class="mt-5">
        <h3 class="mb-3">Formulari</h3>

        <form class="row g-3">
            <div class="col-md-6">
                <label for="email" class="form-label">Email</label>
                <input type="email" class="form-control" id="email" placeholder="nom@exemple.com">
            </div>

            <div class="col-md-6">
                <label for="opcio" class="form-label">Exemple control de selecció</label>
                <select class="form-select" id="opcio">
                    <option selected>Tria una opció</option>
                    <option>Opció 1</option>
                    <option>Opció 2</option>
                    <option>Opció 3</option>
                </select>
            </div>

            <div class="col-12">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="check">
                    <label class="form-check-label" for="check">
                        Acceptar condicions
                    </label>
                </div>
            </div>

            <div class="col-12">
                <button type="submit" class="btn btn-primary">Enviar</button>
            </div>
        </form>
    </div>

    <!-- 9. Carrusel (carousel) -->
    <div class="mt-5">
        <h3 class="mb-3">Carrusel</h3>

        <div id="carouselExample" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner rounded">
                <div class="carousel-item active">
                    <img src="https://picsum.photos/1200/400?random=1" class="d-block w-100" alt="Imatge 1">
                </div>
                <div class="carousel-item">
                    <img src="https://picsum.photos/1200/400?random=2" class="d-block w-100" alt="Imatge 2">
                </div>
                <div class="carousel-item">
                    <img src="https://picsum.photos/1200/400?random=3" class="d-block w-100" alt="Imatge 3">
                </div>
            </div>

            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Anterior</span>
            </button>

            <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Següent</span>
            </button>
        </div>
    </div>

</div>

<!-- 10. Modals (modal) -->
<div class="modal fade" id="confirmModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmar acció</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tancar"></button>
            </div>
            <div class="modal-body">
                Estàs segur que vols continuar amb aquesta acció?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel·lar</button>
                <button type="button" class="btn btn-danger">Confirmar</button>
            </div>
        </div>
    </div>
</div>

<!-- Scripts de Bootstrap 5 (bundle inclou Popper) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

Exemple Complet Bootstrap

Nota: Bundle i Popper són necessaris per a components que requereixen JavaScript, El primer s’utilitza per a funcionalitats bàsiques, mentre que Popper s’encarrega de la posició d’elements emergents com els menús desplegables i les finestres modals.

iframe src=”BootsTrap.pdf” width=”100%” height=”600px” style=”border: none;”></iframe>