Bootstrap: Introducción y entorno

Descubre qué es Bootstrap CSS, sus características clave y cómo empezar a usar este framework para crear sitios web responsivos y atractivos rápidamente.

Bootstrap CSS 5.3 es un framework de código abierto que facilita el desarrollo de sitios web responsivos y móviles. Ofrece una amplia variedad de componentes predefinidos, como botones, formularios y menús de navegación, que se pueden personalizar según las necesidades del proyecto.

Requisitos previos

Antes de comenzar con Bootstrap CSS 5.3, asegúrate de tener los siguientes requisitos:

Conocimientos básicos de HTML y CSS.
Un editor de código, como Visual Studio Code o Sublime Text.
Un navegador web actualizado.

Instalación de Bootstrap CSS 5.3

Existen varias formas de integrar Bootstrap CSS 5.3 en tu proyecto. La más común es a través de un CDN (Content Delivery Network). Esta opción permite acceder a los archivos CSS y JavaScript sin necesidad de descargarlos.

<!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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hola, Bootstrap CSS 5.3</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Configuración del entorno de desarrollo

Para un entorno de desarrollo más avanzado, es recomendable utilizar un gestor de paquetes como npm. A continuación, se detallan los pasos para configurar Bootstrap CSS 5.3 con npm.

Inicializa tu proyecto con npm:

npm init -y

Instala Bootstrap CSS 5.3:

npm install bootstrap@5.3.0

Importa Bootstrap en tu archivo CSS: Crea un archivo styles.css y añade la siguiente línea:

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

Importa Bootstrap en tu archivo JavaScript: Crea un archivo main.js y añade la siguiente línea:

import 'bootstrap';

Configura tu archivo HTML: Asegúrate de que tu archivo HTML principal incluya los enlaces a los archivos CSS y JavaScript generados.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proyecto con Bootstrap y npm</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<h1>Bienvenido a Bootstrap CSS 5.3</h1>
<script src="main.js"></script>
</body>
</html>

Primeros pasos con Bootstrap CSS 5.3

Una vez configurado el entorno, es hora de comenzar a utilizar los componentes de Bootstrap CSS 5.3. A continuación, se muestra un ejemplo básico de cómo crear un botón utilizando las clases predefinidas de Bootstrap.

<button type="button" class="btn btn-primary">Botón Primario</button>

Este código genera un botón con el estilo predeterminado de Bootstrap. Puedes explorar más componentes en la documentación oficial de Bootstrap.

Certifícate en Bootstrap con CertiDevs PLUS

Lecciones de este módulo de Bootstrap

Lecciones de programación del módulo Introducción y entorno del curso de Bootstrap.

Instalación De Bootstrap Css

Introducción A Bootstrap Css

Ejercicios de programación en este módulo de Bootstrap

Evalúa tus conocimientos en Introducción y entorno con ejercicios de programación Introducción y entorno de tipo Test, Puzzle, Código y Proyecto con VSCode.

Introducción a Bootstrap

Test

Instalación de Bootstrap

Código