Bootstrap: Fundamentos y layout
Aprende los conceptos básicos de Bootstrap CSS. Explora su sistema de grid, componentes y cómo utilizarlo para desarrollar sitios web modernos y eficientes.
Bootstrap CSS 5.3 es una herramienta esencial para el desarrollo web moderno, ofreciendo un conjunto de utilidades que facilitan la creación de aplicaciones responsivas y estéticamente agradables. En este módulo, se abordarán los fundamentos y layout, proporcionando las bases necesarias para dominar este framework.
Fundamentos de Bootstrap CSS 5.3
Estructura básica
La estructura básica de una página utilizando Bootstrap CSS 5.3 incluye la integración del CDN en el <head> del documento HTML. Esto permite acceder a todas las funcionalidades de Bootstrap sin necesidad de descargar archivos localmente.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Página Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Sistema de rejilla (Grid System)
El sistema de rejilla de Bootstrap CSS 5.3 se basa en un diseño de 12 columnas, lo que permite crear layouts responsivos y flexibles. A continuación se presenta un ejemplo básico de cómo utilizar las clases de rejilla.
<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 este ejemplo, .container crea un contenedor que centraliza el contenido, mientras que .row define una fila y .col-md-4 divide la fila en tres columnas de igual tamaño para pantallas medianas y superiores.
Layout en Bootstrap CSS 5.3
Contenedores
Bootstrap ofrece diferentes tipos de contenedores para estructurar el contenido. El contenedor más común es .container, que proporciona un ancho fijo y centralizado. También existe .container-fluid, que ocupa el 100% del ancho del viewport.
<div class="container">
Contenido centralizado
</div>
<div class="container-fluid">
Contenido a lo largo de todo el viewport
</div>
Utilidades de espaciado
Bootstrap CSS 5.3 incluye utilidades de espaciado que permiten ajustar márgenes y padding de manera sencilla. Estas utilidades utilizan una escala de 0 a 5.
<div class="mt-3">
Margen superior de 3
</div>
<div class="p-2">
Padding de 2
</div>
Flexbox
Bootstrap CSS 5.3 aprovecha las capacidades de Flexbox para crear layouts flexibles y adaptables. Las clases de utilidad como .d-flex, .justify-content-center y .align-items-center son fundamentales para alinear y distribuir elementos.
<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
<p>Contenido centrado vertical y horizontalmente</p>
</div>
Componentes básicos
Bootstrap CSS 5.3 incluye una variedad de componentes que facilitan la creación de interfaces de usuario. Entre ellos se encuentran los botones, las tarjetas y los formularios.
<button class="btn btn-primary">Botón Primario</button>
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Título de la tarjeta</h5>
<p class="card-text">Texto de ejemplo en la tarjeta.</p>
<a href="#" class="btn btn-primary">Ir a algún lugar</a>
</div>
</div>
Este módulo de Bootstrap CSS 5.3 proporciona una base sólida para comprender y aplicar los fundamentos y layout en tus proyectos. La práctica y la consulta constante de la documentación oficial serán claves para dominar este framework.
Lecciones de este módulo de Bootstrap
Lecciones de programación del módulo Fundamentos y layout del curso de Bootstrap.
Ejercicios de programación en este módulo de Bootstrap
Evalúa tus conocimientos en Fundamentos y layout con ejercicios de programación Fundamentos y layout de tipo Test, Puzzle, Código y Proyecto con VSCode.