Skip to main content Skip to docs navigation

Contribuir

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

Configuración de herramientas

Bootstrap utiliza scripts npm para compilar la documentación y los archivos fuente. Nuestro archivo package.json contiene estos scripts para compilar código, ejecutar pruebas y más. Estos no están destinados para su uso fuera de nuestro repositorio y documentación.

Para usar nuestro sistema de compilación 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 comenzar:

  1. Descarga e instala Node.js, que utilizamos para administrar nuestras dependencias.
  2. Descarga las fuentes de Bootstrap o haz un fork y clona el repositorio de Bootstrap.
  3. Navega al directorio raíz /bootstrap y ejecuta npm install para instalar nuestras dependencias locales enumeradas en package.json.

Cuando se complete, podrás ejecutar los diversos comandos proporcionados desde la línea de comandos.

Uso de scripts npm

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

TareaDescripción
npm startCompila CSS y JavaScript, crea la documentación e inicia un servidor local.
npm run distCrea el directorio dist/ con archivos compilados. Utiliza Sass, Autoprefixer y terser.
npm testEjecuta pruebas localmente después de ejecutar npm run dist.
npm run docs-serveCompila y ejecuta la documentación localmente.

¡Comienza con Bootstrap a través de npm con nuestro proyecto de inicio! Dirígete al repositorio de la plantilla de ejemplo de Sass y JS para ver cómo construir y personalizar Bootstrap en tu propio proyecto npm. Incluye compilador Sass, Autoprefixer, Stylelint, PurgeCSS y Bootstrap Icons.

Sass

Bootstrap utiliza Dart Sass para compilar nuestros archivos fuente Sass en archivos CSS (incluidos en nuestro proceso de compilación), y te recomendamos que hagas lo mismo si estás compilando Sass utilizando tu propia canalización de recursos (asset pipeline). Anteriormente utilizábamos Node Sass para Bootstrap v4, pero LibSass y los paquetes creados sobre él, incluido Node Sass, ahora están desactualizados (deprecated).

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

Autoprefixer

Bootstrap utiliza Autoprefixer (incluido en nuestro proceso de compilación) para agregar automáticamente prefijos de proveedores a algunas propiedades CSS en el momento de la compilación. Hacerlo nos ahorra tiempo y código al permitirnos escribir partes clave de nuestro CSS una sola vez, al tiempo que elimina la necesidad de mixins de proveedores como los que se encuentran en la v3.

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

RTLCSS

Bootstrap utiliza RTLCSS para procesar el CSS compilado y convertirlo a RTL, básicamente reemplazando las propiedades que dependen de la dirección horizontal (por ejemplo, padding-left) con su opuesto. Nos permite escribir nuestro CSS una sola vez y realizar pequeños ajustes utilizando las directivas de control y valor 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 crear nuestra documentación con una combinación de componentes Markdown y React. Aquí se explica cómo comenzar:

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

Obtén más información 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 las dependencias (globales y locales). Luego, vuelve a ejecutar npm install.