Skip to main content Skip to docs navigation
En GitHub

Contribuir

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

En esta página

Configuración de herramientas

Bootstrap usa scripts npm para crear la documentación y compilar los archivos fuente. Nuestro package.json alberga 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 rockear:

  1. Descarga e instala Node.js, que usamos para administrar nuestras dependencias.
  2. Descarga las fuentes de Bootstrap o haz fork a 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 hayas terminado, podrás ejecutar los diversos comandos proporcionados desde la línea de comandos.

Uso de los scripts npm

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

Tarea Descripción
npm start Compila CSS y JavaScript, crea la documentación e inicia un servidor local.
npm run dist Crea el directorio dist/ con archivos compilados. Requiere Sass, Autoprefixer y terser.
npm test Ejecuta tests localmente después de ejecutar npm run dist
npm run docs-serve Construye y ejecuta la documentación localmente.
¡Comienza con Bootstrap a través de npm con nuestro proyecto de inicio! Diríjete al repositorio de plantillas twbs/bootstrap-npm-starter para ver cómo construir y personalizar Bootstrap en tu propio proyecto npm. Incluye el compilador Sass, Autoprefixer, Stylelint, PurgeCSS y Bootstrap Icons.

Sass

Bootstrap usa 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 tus propios assets. Anteriormente usábamos Node Sass para Bootstrap v4, pero LibSass y los paquetes integrados, incluido Node Sass, ahora están obsoletos.

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

Autoprefixer

Bootstrap usa Autoprefixer (incluido en nuestro proceso de compilación) para agregar automáticamente prefijos de proveedores a algunas propiedades de 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 eliminar la necesidad de combinaciones de proveedores como las que se encuentran en v3.

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

RTLCSS

Bootstrap usa RTLCSS para procesar CSS compilado y convertirlo a RTL, básicamente reemplazando las propiedades conscientes de la dirección horizontal (por ejemplo, padding-left) con su opuesto. Nos permite escribir nuestro CSS una sola vez y hacer ajustes menores usando las directivas RTLCSS control y value.

Documentación local

Ejecutar nuestra documentación localmente requiere el uso de Hugo, que se instala a través del paquete hugo-bin de npm. 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. Así es como se pone en marcha:

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

Obtén más información sobre el uso de Hugo leyendo su documentación.

Solución de problemas

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