Template Personalizable Bootstrap

Modifica las variables CSS en el archivo para personalizar colores, tama帽os, y estilos

馃帹 Paleta de Colores

Primario
--color-primario
Secundario
--color-secundario
脡xito
--color-exito
Peligro
--color-peligro

馃搹 Escalas de Tama帽o de Texto

Extra Peque帽o (XS) - 12px

Peque帽o (SM) - 14px

Base - 16px

Grande (LG) - 18px

Extra Grande (XL) - 20px

2XL - 24px

3XL - 30px

4XL - 36px

馃搻 Sistema de Espaciado

XS (4px) --espacio-xs
SM (8px) --espacio-sm
MD (16px) --espacio-md
LG (24px) --espacio-lg
XL (32px) --espacio-xl

馃З Componentes

Tarjeta 1

Esta es una tarjeta de ejemplo con estilos personalizados.

Tarjeta 2

Hover sobre las tarjetas para ver los efectos de transici贸n.

Tarjeta 3

Todos los valores son personalizables con variables CSS.

馃敇 Botones

馃摑 C贸mo Personalizar

1. Abre este archivo HTML en tu editor

Busca la secci贸n de :root en el bloque <style>

2. Modifica las variables CSS
:root {
  /* Cambia estos valores */
  --color-primario: #0066cc; /* Tu color aqu铆 */
  --texto-base: 1rem; /* Tu tama帽o aqu铆 */
  --radio-lg: 0.5rem; /* Tu radio aqu铆 */
}
3. Guarda y recarga

Guarda el archivo y recarga la p谩gina en tu navegador para ver los cambios.

4. Variables Disponibles
  • Colores: --color-primario, --color-secundario, --color-exito, etc.
  • Texto: --texto-xs hasta --texto-4xl
  • Espaciado: --espacio-xs hasta --espacio-3xl
  • Radios: --radio-sm hasta --radio-xl
  • Sombras: --sombra-sm hasta --sombra-xl