Scribd
Cargar
39 vistas7 páginas

Curso Básico de Bootstrap

Curso Básico de Bootstrap

Cargado por

Alberto Triana
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
39 vistas7 páginas

Curso Básico de Bootstrap

Curso Básico de Bootstrap

Cargado por

Alberto Triana
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 7

Curso Básico de Bootstrap

Bootstrap es un framework de CSS diseñado para facilitar la creación de sitios web responsivos y
modernos. Este curso te guiará por los conceptos básicos de Bootstrap y te enseñará a usar sus
componentes principales.

Lección 1: Introducción a Bootstrap

¿Qué es Bootstrap?

Bootstrap es un framework de front-end que incluye CSS, JavaScript y componentes predefinidos


para agilizar el desarrollo de sitios web responsivos y adaptables a distintos dispositivos.

¿Por qué usar Bootstrap?

• Facilita el diseño responsivo.

• Incluye componentes listos para usar (botones, formularios, menús, etc.).

• Es compatible con la mayoría de navegadores modernos.

Cómo incluir Bootstrap en tu proyecto:

1. Usando un CDN:

2. <!DOCTYPE html>

3. <html lang="en">

4. <head>

5. <meta charset="UTF-8">

6. <meta name="viewport" content="width=device-width, initial-scale=1.0">

7. <title>Bootstrap Básico</title>

8. <link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha3/dist/css/bootstrap.min.css" rel="stylesheet">

9. </head>

10. <body>

11. <h1>Hola, Bootstrap</h1>

12. </body>

13. </html>

14. Descargando los archivos desde el sitio oficial: getbootstrap.com.

Actividad:
Crea un archivo HTML básico que incluya Bootstrap desde un CDN.

Lección 2: Sistema de Rejilla (Grid System)

El sistema de rejilla de Bootstrap divide la pantalla en 12 columnas, lo que permite organizar


elementos en filas y columnas de forma responsiva.

Ejemplo básico:

<div class="container">

<div class="row">

<div class="col-6">Columna 1</div>

<div class="col-6">Columna 2</div>

</div>

</div>

Clases de columnas:

• col (automático).

• col-sm (pantallas pequeñas).

• col-md (pantallas medianas).

• col-lg (pantallas grandes).

• col-xl (pantallas extra grandes).

Actividad:

1. Crea una página con tres columnas que ocupen:

o Una pantalla completa en dispositivos pequeños.

o Un tercio de la pantalla en dispositivos medianos.

Lección 3: Tipografía y Colores

Clases de tipografía:

• Encabezados: h1, h2, ..., h6.

• Texto resaltado:

• <p class="text-primary">Texto principal</p>

• <p class="text-danger">Texto de error</p>


• <p class="text-success">Texto exitoso</p>

Clases de colores de fondo:

<div class="bg-primary text-white p-3">Fondo azul</div>

<div class="bg-danger text-white p-3">Fondo rojo</div>

Actividad:

Crea una página que muestre diferentes colores de texto y fondos usando las clases de Bootstrap.

Lección 4: Botones

Clases para botones:

<button class="btn btn-primary">Primario</button>

<button class="btn btn-secondary">Secundario</button>

<button class="btn btn-success">Exitoso</button>

<button class="btn btn-danger">Peligro</button>

Botones de distintos tamaños:

<button class="btn btn-primary btn-sm">Pequeño</button>

<button class="btn btn-primary btn-lg">Grande</button>

Actividad:

1. Crea un grupo de botones con diferentes colores y tamaños.

Lección 5: Formularios

Formulario básico:

<form>

<div class="mb-3">

<label for="nombre" class="form-label">Nombre</label>

<input type="text" class="form-control" id="nombre" placeholder="Ingresa tu nombre">

</div>

<div class="mb-3">

<label for="email" class="form-label">Email</label>

<input type="email" class="form-control" id="email" placeholder="Ingresa tu email">


</div>

<button type="submit" class="btn btn-primary">Enviar</button>

</form>

Actividad:

Crea un formulario que capture nombre, correo y un mensaje, y utiliza los estilos de Bootstrap.

Lección 6: Componentes Comunes

Navbar (barra de navegación):

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

<div class="container-fluid">

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

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-


target="#navbarNav">

<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="#">Inicio</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#">Acerca</a>

</li>

</ul>

</div>

</div>

</nav>

Tarjetas:

<div class="card" style="width: 18rem;">


<img src="https://via.placeholder.com/150" class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">Título</h5>

<p class="card-text">Texto de ejemplo para la tarjeta.</p>

<a href="#" class="btn btn-primary">Ir a algún lugar</a>

</div>

</div>

Actividad:

Crea una página que incluya una barra de navegación y tres tarjetas.

Lección 7: Proyecto Final

Desafío:

1. Crea una página de inicio con:

o Un encabezado.

o Una barra de navegación.

o Una sección con tres columnas (rejilla).

o Un formulario de contacto.

o Tarjetas que describan servicios o productos.

Ejemplo:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Proyecto Final</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">

</head>

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

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

</nav>

<div class="container mt-5">

<div class="row">

<div class="col-md-4">

<div class="card">

<img src="https://via.placeholder.com/150" class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">Servicio 1</h5>

<p class="card-text">Descripción breve del servicio.</p>

</div>

</div>

</div>

<div class="col-md-4">

<div class="card">

<img src="https://via.placeholder.com/150" class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">Servicio 2</h5>

<p class="card-text">Descripción breve del servicio.</p>

</div>

</div>

</div>

<div class="col-md-4">

<div class="card">

<img src="https://via.placeholder.com/150" class="card-img-top" alt="...">

<div class="card-body">

<h5 class="card-title">Servicio 3</h5>


<p class="card-text">Descripción breve del servicio.</p>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

¡Felicidades! Ahora tienes una comprensión básica de Bootstrap. Puedes explorar más
componentes en la documentación oficial.

También podría gustarte