Skip to content

Unidad 4: Introducción a Bootstrap

4.1 ¿Qué es Bootstrap y por qué usarlo?

Bootstrap es un framework de CSS diseñado para facilitar la creación de interfaces web modernas y responsivas. Proporciona un conjunto de herramientas listas para usar, incluyendo sistema de rejilla, componentes UI predefinidos, y clases de utilidad que agilizan el desarrollo sin necesidad de escribir CSS desde cero.

🔹 Ventajas de usar Bootstrap

  • 📱 Diseño responsivo: Se adapta automáticamente a distintos tamaños de pantalla.
  • 🎨 Componentes predefinidos: Contiene botones, formularios, tarjetas, modales y más.
  • 🚀 Rápida implementación: Permite desarrollar interfaces atractivas en poco tiempo.
  • 🎭 Personalizable: Se pueden sobrescribir estilos con CSS o usar variables en SASS.
  • 🌐 Compatible con la mayoría de los navegadores modernos.

4.2 Diferencias entre CSS puro y Bootstrap

Característica CSS Puro Bootstrap
Estilos predefinidos ❌ No ✅ Sí
Sistema de rejilla ❌ No ✅ Sí
Responsividad integrada ❌ No ✅ Sí
Componentes UI listos ❌ No ✅ Sí
Curva de aprendizaje 📈 Más lenta 📉 Más rápida

Si bien Bootstrap acelera el desarrollo, es recomendable comprender CSS puro para realizar personalizaciones avanzadas.

4.3 Instalación de Bootstrap

Bootstrap se puede integrar en un proyecto de tres maneras:

1️⃣ Usando el CDN (Método recomendado)

Es la forma más rápida y sencilla, ya que no requiere descarga de archivos.

1
2
3
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>

2️⃣ Descargando los archivos manualmente

  1. Descarga Bootstrap desde su sitio web oficial.
  2. Extrae los archivos y vincula bootstrap.min.css en tu proyecto.
1
2
3
<head>
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

3️⃣ Instalación con npm

Para proyectos más estructurados o que usan herramientas como Webpack.

npm install bootstrap

Luego, en tu archivo principal de estilos:

@import "node_modules/bootstrap/dist/css/bootstrap.min.css";

Comprobando que Bootstrap está instalado

Para verificar que Bootstrap está funcionando correctamente, agrega el siguiente código en tu HTML y abre el archivo en un navegador:

<button class="btn btn-primary">Botón de prueba</button>

Si el botón aparece estilizado con el diseño de Bootstrap, la instalación ha sido exitosa.

4.4 Estructura básica de un proyecto con Bootstrap

Un proyecto con Bootstrap suele seguir esta estructura:

📁 mi-proyecto/
 ├── 📄 index.html
 ├── 📁 css/
 │   ├── bootstrap.min.css
 │   ├── styles.css
 ├── 📁 js/
 │   ├── bootstrap.bundle.min.js
 │   ├── scripts.js
 ├── 📁 img/

El archivo index.html incluiría la referencia a Bootstrap y los archivos personalizados:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Proyecto con Bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="container">
        <h1 class="text-center">¡Bienvenido a Bootstrap!</h1>
    </div>
    <script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>

4.5. Crear un proyecto con Bootstrap con npm

Para crear un proyecto con Bootstrap usando npm, sigue estos pasos:

1. Crear un proyecto con npm

mkdir mi-proyecto
cd mi-proyecto
npm init -y

2. Instalar Bootstrap

npm install bootstrap

3. Crear archivos de estilos y scripts

Crea un archivo styles.css en la carpeta css y un archivo scripts.js en la carpeta js.

4. Vincular Bootstrap en tu archivo HTML

  • crea un archivo index.html en la raíz del proyecto.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="es">    
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Proyecto con Bootstrap</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="container">
        <h1 class="text-center bg-success text-white">¡Bienvenido a Bootstrap!</h1>
    </div>
    <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/scripts.js"></script>
</body>
</html>

Proyecto con Bootstrap y npm

4.5 📝 Ejercicio práctico: Crear una página con Bootstrap

📌 Objetivo: Construir una página sencilla que use Bootstrap para su diseño.

🔹 Instrucciones:

  1. Crea un archivo index.html e incluye Bootstrap usando CDN.
  2. Agrega un encabezado centrado (<h1>).
  3. Agrega un botón estilizado con la clase btn btn-primary.
  4. Usa una clase de contenedor (container) para centrar el contenido.

Ejercicio: Crear una página con Bootstrap

Sigue las instrucciones y diseña una página básica con Bootstrap.

Solución 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página Bootstrap</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container text-center mt-5">
        <h1>Bienvenido a Bootstrap</h1>
        <button class="btn btn-primary mt-3">Haz clic aquí</button>
    </div>
</body>
</html>

Conclusión

Bootstrap es una herramienta poderosa para el desarrollo web. Facilita la creación de diseños modernos y responsivos con mínimo esfuerzo, proporcionando un sistema de rejilla, componentes listos para usar y clases de utilidad.

En la próxima unidad, exploraremos el sistema de layout de Bootstrap y cómo organizar correctamente nuestra página web. 🚀