Contribuye

Ayuda a desarrollar Bootstrap con nuestros scripts de construcción de documentación y pruebas.

On this page

Configuración de herramientas

Bootstrap usa npm scripts para construir la documentación y compilar los archivos fuente. Nuestro package.json contiene estos scripts para compilar código, ejecutar pruebas, y más. No están pensados para uso fuera de nuestro repositorio y documentación.

Para usar nuestro sistema de build y ejecutar nuestra documentación localmente, necesitarás una copia de los archivos fuente de Bootstrap y Node. Sigue estos pasos y deberías estar listo para empezar:

Descarga e instala Node.js, que usamos para gestionar nuestras dependencias.
Puedes descargar las fuentes de Bootstrap o hacer fork y clonar el repositorio de Bootstrap.
Navega al directorio raíz /bootstrap y ejecuta npm install para instalar nuestras dependencias locales listadas en package.json.

Una vez completado, podrás ejecutar los diversos comandos proporcionados desde la línea de comandos.

Uso de scripts de npm

Nuestro package.json incluye numerosas tareas para desarrollar el proyecto. Ejecuta npm run para ver todos los npm scripts en tu terminal. Las tareas principales incluyen:

Tarea	Descripción
`npm start`	Compila CSS y JavaScript, construye la documentación e inicia un servidor local.
`npm run dist`	Crea el directorio `dist/` con los archivos compilados. Usa Sass, Autoprefixer y terser.
`npm test`	Ejecuta los tests localmente después de ejecutar `npm run dist`
`npm run docs-serve`	Construye y ejecuta la documentación localmente.

¡Comienza con Bootstrap vía npm con nuestro proyecto inicial! Dirígete al repositorio de plantillas Sass & JS example para ver cómo construir y personalizar Bootstrap en tu propio proyecto npm. Incluye compilador Sass, Autoprefixer, Stylelint, PurgeCSS y Bootstrap Icons.

Sass

Bootstrap usa Dart Sass para compilar nuestros archivos fuente Sass en archivos CSS (incluido en nuestro proceso de build), y te recomendamos que hagas lo mismo si estás compilando Sass usando tu propio pipeline de assets. Anteriormente usábamos Node Sass para Bootstrap v4, pero LibSass y los paquetes construidos sobre él, incluyendo Node Sass, están ahora obsoletos.

Dart Sass usa una precisión de redondeo de 10 y por razones de eficiencia no permite ajustar este valor. No reducimos esta precisión durante el posterior procesamiento de nuestro CSS generado, como durante la minificación, pero si decides hacerlo te recomendamos mantener una precisión de al menos 6 para prevenir problemas con el redondeo del navegador.

Autoprefixer

Bootstrap usa Autoprefixer (incluido en nuestro proceso de build) para añadir automáticamente prefijos de proveedor a algunas propiedades CSS en el momento del build. Hacerlo nos ahorra tiempo y código al permitirnos escribir partes clave de nuestro CSS una sola vez, eliminando la necesidad de mixins de proveedor como los que había en v3.

Mantenemos la lista de navegadores soportados a través de Autoprefixer en un archivo separado dentro de nuestro repositorio de GitHub. Consulta .browserslistrc para más detalles.

RTLCSS

Bootstrap usa RTLCSS para procesar el CSS compilado y convertirlo a RTL – básicamente reemplazando propiedades conscientes de la dirección horizontal (ej. padding-left) con sus opuestas. Esto nos permite escribir nuestro CSS una sola vez y hacer ajustes menores usando las directivas control y value de RTLCSS.

Documentación local

Ejecutar nuestra documentación localmente requiere el uso de Astro. Astro es un generador de sitios estáticos moderno que nos permite construir nuestra documentación con una combinación de Markdown y componentes de React. Así es cómo iniciarlo:

Sigue la configuración de herramientas anterior para instalar todas las dependencias.
Desde el directorio raíz /bootstrap, ejecuta npm run docs-serve en la línea de comandos.
Abre http://localhost:9001 en tu navegador, y voilà.

Aprende más sobre el uso de Astro leyendo su documentación.

Solución de problemas

Si encuentras problemas al instalar las dependencias, desinstala todas las versiones anteriores de dependencias (globales y locales). Luego, vuelve a ejecutar npm install.