Bootstrap Code Play

Aprende diseño web responsivo con lecciones de Bootstrap que puedes editar y previsualizar. Bootstrap Code Play conecta explicaciones, ejemplos de código y un entorno de pruebas para que explores cómo un cambio en el marcado afecta a una página.

LEE, MODIFICA, PREVISUALIZA

Elige un tema, lee cómo funciona y luego toca «Probar» para abrir su ejemplo en el editor. Cambia una clase, ajusta el contenido o añade un elemento. Abre la vista previa para inspeccionar el resultado y luego vuelve al código para otro experimento.

APRENDE LOS COMPONENTES BÁSICOS

Practica cuadrículas responsivas, tipografía, botones, alertas, tablas y formularios. Explora componentes como tarjetas, barras de navegación, acordeones y diálogos en las rutas de aprendizaje correspondientes. Las lecciones guiadas incluyen pasos, desafíos y errores comunes para ayudarte a comprender el código en lugar de simplemente copiarlo. Las lecciones de proyectos combinan conceptos en ejemplos como una sección de precios y un panel de control compacto.

ELIGE UNA RUTA DE APRENDIZAJE

Estudia la ruta de Bootstrap 5.3.8 incluida, o explora Bootstrap 4.6.2 y 3.4.1 para proyectos más antiguos. Las rutas antiguas ya no tienen soporte y se ofrecen para aprendizaje y migración. Existe una ruta alfa de Bootstrap 6 independiente, experimental; su vista previa requiere acceso a internet y un WebView moderno.

SIGUE PRACTICANDO

Busca temas o navega por categoría. Marca las lecciones como completadas y consulta tu progreso en cada versión. Abre el entorno de pruebas para tus propios experimentos HTML, guarda un archivo y vuelve a él a través de Archivos guardados.

EDITA CON HERRAMIENTAS ÚTILES

Utiliza el resaltado de sintaxis, deshacer y rehacer, buscar y reemplazar, e ir a la línea mientras trabajas en los ejemplos. Guarda una copia independiente y comparte el código para enviar el texto del editor mediante las opciones disponibles.

Para estudiantes, autodidactas y desarrolladores que revisan diseños responsivos, la aplicación ofrece un ciclo práctico: lee una explicación, realiza un pequeño cambio e inspecciona el resultado.

La aplicación incluye publicidad. Los ejemplos que hacen referencia a recursos externos requieren conexión a internet; la disponibilidad de recursos remotos puede variar.