El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Bootstrap és un dels frameworks de CSS més populars i àmpliament utilitzats per crear llocs web responsius i moderns. En aquest tema, aprendrem com integrar Bootstrap en els nostres projectes i utilitzar les seves classes i components per agilitzar el procés de desenvolupament.

Què és Bootstrap?

Bootstrap és un framework de codi obert desenvolupat per Twitter que proporciona una col·lecció de classes CSS i components JavaScript per crear dissenys web responsius i atractius de manera ràpida i senzilla.

Avantatges de Bootstrap

Responsivitat: Bootstrap utilitza un sistema de graelles (grid system) que facilita la creació de dissenys responsius.
Components Predefinits: Inclou una àmplia gamma de components com botons, formularis, navegació, etc.
Personalització: És fàcilment personalitzable per adaptar-se a les necessitats específiques del projecte.
Compatibilitat: És compatible amb tots els navegadors moderns.

Integració de Bootstrap en un Projecte

Mètode 1: Utilitzar el CDN de Bootstrap

El mètode més senzill per començar a utilitzar Bootstrap és incloure els enllaços al CDN (Content Delivery Network) en el fitxer HTML.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projecte Bootstrap</title>
    <!-- Enllaç al CSS de Bootstrap -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-center">Hola, Bootstrap!</h1>
    <!-- Enllaç al JavaScript de Bootstrap i dependències -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Mètode 2: Descarregar Bootstrap

També pots descarregar Bootstrap i incloure els fitxers localment en el teu projecte.

Descarrega Bootstrap des del lloc oficial.
Inclou els fitxers CSS i JavaScript en el teu projecte.

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Projecte Bootstrap</title>
    <!-- Enllaç al CSS de Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-center">Hola, Bootstrap!</h1>
    <!-- Enllaç al JavaScript de Bootstrap i dependències -->
    <script src="js/jquery-3.5.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

Sistema de Graelles de Bootstrap

El sistema de graelles de Bootstrap és una de les seves característiques més potents. Permet crear dissenys responsius utilitzant una estructura basada en files (.row) i columnes (.col).

Exemple de Sistema de Graelles

<div class="container">
    <div class="row">
        <div class="col-md-4">Columna 1</div>
        <div class="col-md-4">Columna 2</div>
        <div class="col-md-4">Columna 3</div>
    </div>
</div>

En aquest exemple, hem creat una fila amb tres columnes que ocuparan 4 unitats de la graella en pantalles de mida mitjana (md) o superior.

Components de Bootstrap

Bootstrap inclou una àmplia gamma de components predefinits que pots utilitzar per crear interfícies d'usuari atractives i funcionals.

Botons

<button type="button" class="btn btn-primary">Botó Primari</button>
<button type="button" class="btn btn-secondary">Botó Secundari</button>

Formularis

<form>
    <div class="form-group">
        <label for="exampleInputEmail1">Adreça de correu electrònic</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Contrasenya</label>
        <input type="password" class="form-control" id="exampleInputPassword1">
    </div>
    <button type="submit" class="btn btn-primary">Enviar</button>
</form>

Targetes

<div class="card" style="width: 18rem;">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Títol de la Targeta</h5>
        <p class="card-text">Alguns textos ràpids per construir el contingut de la targeta.</p>
        <a href="#" class="btn btn-primary">Anar a algun lloc</a>
    </div>
</div>

Exercici Pràctic

Objectiu

Crear una pàgina web senzilla utilitzant Bootstrap que contingui una barra de navegació, una secció de contingut amb una graella de tres columnes i un formulari de contacte.

Instruccions

Crea un fitxer HTML nou.
Inclou Bootstrap utilitzant el CDN.
Afegeix una barra de navegació amb tres enllaços.
Crea una secció de contingut amb una graella de tres columnes.
Afegeix un formulari de contacte amb camps per al nom, correu electrònic i missatge.

Solució

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pàgina Bootstrap</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <!-- Barra de Navegació -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navbar</a>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Inici</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Característiques</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Preus</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- Contingut Principal -->
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-4">
                <h2>Columna 1</h2>
                <p>Contingut de la columna 1.</p>
            </div>
            <div class="col-md-4">
                <h2>Columna 2</h2>
                <p>Contingut de la columna 2.</p>
            </div>
            <div class="col-md-4">
                <h2>Columna 3</h2>
                <p>Contingut de la columna 3.</p>
            </div>
        </div>
    </div>

    <!-- Formulari de Contacte -->
    <div class="container mt-5">
        <h2>Contacta'ns</h2>
        <form>
            <div class="form-group">
                <label for="name">Nom</label>
                <input type="text" class="form-control" id="name">
            </div>
            <div class="form-group">
                <label for="email">Correu Electrònic</label>
                <input type="email" class="form-control" id="email">
            </div>
            <div class="form-group">
                <label for="message">Missatge</label>
                <textarea class="form-control" id="message" rows="3"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Enviar</button>
        </form>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Conclusió

Bootstrap és una eina poderosa que pot accelerar significativament el desenvolupament de llocs web responsius i atractius. Amb el seu sistema de graelles, components predefinits i facilitat d'ús, és una excel·lent opció per a desenvolupadors de tots els nivells. Practica integrant Bootstrap en els teus projectes per aprofitar al màxim les seves capacitats.

Ús de Bootstrap

Què és Bootstrap?

Avantatges de Bootstrap

Integració de Bootstrap en un Projecte

Mètode 1: Utilitzar el CDN de Bootstrap

Mètode 2: Descarregar Bootstrap

Sistema de Graelles de Bootstrap

Exemple de Sistema de Graelles

Components de Bootstrap

Botons

Formularis

Targetes

Exercici Pràctic

Objectiu

Instruccions

Solució

Conclusió

Domini del CSS: De Principiant a Avançat

Mòdul 1: Introducció al CSS

Mòdul 2: Estilització de Text i Fonts

Mòdul 3: Model de Caixa i Disseny

Mòdul 4: Posicionament i Flotació

Mòdul 5: Flexbox

Mòdul 6: CSS Grid

Mòdul 7: Tècniques Avançades de CSS

Mòdul 8: Disseny Responsiu

Mòdul 9: Preprocessadors i Frameworks

Mòdul 10: Millors Pràctiques i Optimització

Mòdul 11: Projecte: Construir un Lloc Web Responsiu