Contribuir

Ayuda a desarrollar Bootstrap con nuestra documentación, scripts y tests.

Configuración de herramientas

Bootstrap usa scripts npm (opens in a new tab) para crear la documentación y compilar los archivos fuente. Nuestro package.json (opens in a new tab) alberga estos scripts para compilar código, ejecutar pruebas y más. Estos no están pensados 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 rockear:

1. Descarga e instala Node.js (opens in a new tab), que usamos para administrar nuestras dependencias.
2. Descarga las fuentes de Bootstrap (opens in a new tab) o bifurca y clona el repositorio de Bootstrap (opens in a new tab).
3. Navega al directorio raíz /bootstrap y ejecuta npm install para instalar nuestras dependencias locales enumeradas en package.json (opens in a new tab).

Cuando esté completo, podrás ejecutar los distintos comandos proporcionados desde la línea de comandos.

Usar scripts npm

Nuestro package.json (opens in a new tab) incluye numerosos tareas para el desarrollo del proyecto. Ejecuta npm run para ver todos los scripts npm en tu terminal. Las tareas principales incluyen:

Sass

Bootstrap usa Dart Sass (opens in a new tab) para compilar nuestros archivos fuente Sass en archivos CSS (incluido en nuestro proceso de compilación), y te recomendamos que hagas lo mismo si estás compilando Sass utilizando tus propios assets. Anteriormente usamos Node Sass para Bootstrap v4, pero LibSass y los paquetes creados sobre él, incluido Node Sass, ahora están obsoletos. (opens in a new tab).

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 usa Autoprefixer (opens in a new tab) (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 y al mismo tiempo eliminar la necesidad de mixins de proveedores como los que se encuentran en la versión 3.

Mantenemos la lista de navegadores compatibles con Autoprefixer en un archivo separado dentro de nuestro repositorio de GitHub. Consulta .browserslistrc (opens in a new tab) para obtener más detalles.

RTLCSS

Bootstrap usa RTLCSS (opens in a new tab) para procesar CSS compilado y convertirlos a RTL, básicamente reemplazando las propiedades que reconocen la dirección horizontal (por ejemplo padding-left) con su opuesto. Nos permite escribir nuestro CSS solo una vez y realizar ajustes menores usando las directivas de RTLCSS control (opens in a new tab) y value (opens in a new tab).

Documentación local

La ejecución de nuestra documentación localmente requiere el uso de Hugo, que se instala a través del paquete npm hugo-bin (opens in a new tab). Hugo es un generador de sitios estáticos increíblemente rápido y bastante extensible que nos proporciona: inclusiones básicas, archivos basados en Markdown, plantillas y más. A continuación te indicamos cómo empezar:

1. Ejecuta 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 comando.
3. Abre http://localhost:9001/ en tu navegador y listo.

Aprende más sobre el uso de Hugo leyendo su documentación (opens in a new tab).

Solución de problemas

Si tienes problemas con la instalación de dependencias, desinstala todas las versiones de dependencias anteriores (globales y locales). Luego, vuelve a ejecutar npm install.