El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Introducció a Bootstrap

Següent ►
►

Bootstrap és un dels frameworks de front-end més populars per al desenvolupament de llocs web responsius i mòbils. Creat per Twitter, Bootstrap proporciona una col·lecció d'eines que faciliten el disseny de pàgines web amb un aspecte professional i adaptatiu. En aquesta secció, explorarem els conceptes bàsics de Bootstrap, com començar a utilitzar-lo i alguns dels seus components clau.

Què és Bootstrap?

Bootstrap és un framework de codi obert que inclou:

  • HTML, CSS i JavaScript: Per crear interfícies d'usuari atractives i responsives.
  • Components predefinits: Com botons, formularis, menús de navegació, etc.
  • Sistema de graella: Per facilitar el disseny de layouts responsius.
  • Compatibilitat amb navegadors: Funciona bé en la majoria dels navegadors moderns.

Avantatges de Bootstrap

  1. Facilitat d'ús: Bootstrap és fàcil d'aprendre i utilitzar, fins i tot per a principiants.
  2. Disseny Responsive: Els llocs web creats amb Bootstrap s'adapten automàticament a diferents mides de pantalla.
  3. Components Reutilitzables: Ofereix una àmplia gamma de components que es poden reutilitzar en diferents projectes.
  4. Comunitat Activa: Una gran comunitat de desenvolupadors que contribueixen amb temes, plugins i extensions.

Com Començar amb Bootstrap

  1. Incloure Bootstrap en el teu Projecte

Pots incloure Bootstrap al teu projecte de dues maneres principals:

  • CDN (Content Delivery Network): La manera més senzilla d'incloure Bootstrap és mitjançant un CDN. Afegeix les següents línies al teu document HTML dins de la secció <head>:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  • Descàrrega Local: Pots descarregar Bootstrap des del seu lloc web oficial i incloure els fitxers CSS i JS al teu projecte.

  1. Estructura Bàsica d'un Document HTML amb Bootstrap

Aquí tens un exemple d'una estructura bàsica d'un document HTML que utilitza Bootstrap:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple Bootstrap</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1 class="text-center">Hola, Bootstrap!</h1>
        <p class="lead">Aquest és un exemple senzill d'una pàgina amb Bootstrap.</p>
    </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.9.2/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

  1. Sistema de Graella de Bootstrap

El sistema de graella de Bootstrap és una de les seves característiques més potents. Permet crear layouts responsius utilitzant una sèrie de files i columnes.

  • Files i Columnes: Utilitza la classe .row per crear files i .col-* per crear columnes dins d'aquestes files.
  • Punts de Trencament: Bootstrap utilitza punts de trencament per adaptar el disseny a diferents mides de pantalla (xs, sm, md, lg, xl).

Exemple d'ús del sistema de graella:

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

Components Clau de Bootstrap

Bootstrap inclou una àmplia gamma de components que pots utilitzar per enriquir el teu lloc web:

  • Botons: Utilitza classes com .btn, .btn-primary, .btn-secondary, etc.
  • Navegació: Crea menús de navegació responsius amb .navbar.
  • Formularis: Estilitza formularis amb classes com .form-control, .form-group, etc.
  • Alertes: Mostra missatges d'alerta amb .alert, .alert-success, .alert-danger, etc.

Exercici Pràctic

Crea una pàgina web senzilla utilitzant Bootstrap que inclogui:

  • Un títol centrat.
  • Un paràgraf amb text descriptiu.
  • Un botó que canviï de color quan el ratolí passi per sobre.

Solució

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercici Bootstrap</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container text-center mt-5">
        <h1>Benvingut a Bootstrap</h1>
        <p class="lead">Aquest és un exemple d'una pàgina senzilla amb Bootstrap.</p>
        <button class="btn btn-primary">Fes clic aquí</button>
    </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.9.2/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 per al desenvolupament de llocs web responsius. Amb el seu sistema de graella, components predefinits i facilitat d'ús, pots crear dissenys atractius i adaptatius amb poc esforç. En el següent mòdul, explorarem com utilitzar Foundation, un altre framework popular per al disseny responsive.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats