Vés al contingut principal Saltar a la navegació de documents
in English

Construir eines

Apreneu a utilitzar els scripts npm inclosos de Bootstrap per crear la nostra documentació, compilar el codi font, executar proves i molt més.

En aquesta pàgina

Configuració d'eines

Bootstrap utilitza scripts npm per al seu sistema de compilació. El nostre package.json inclou mètodes convenients per treballar amb el marc, com ara compilar codi, executar proves i molt més.

Per utilitzar el nostre sistema de compilació i executar la nostra documentació localment, necessitareu una còpia dels fitxers font de Bootstrap i del Node. Seguiu aquests passos i hauríeu d'estar a punt per fer-ho:

  1. Baixeu i instal·leu Node.js , que fem servir per gestionar les nostres dependències.
  2. Baixeu les fonts de Bootstrap o forqueu el dipòsit de Bootstrap .
  3. Navegueu al /bootstrapdirectori arrel i executeu -lo npm installper instal·lar les nostres dependències locals que figuren a package.json .

Quan s'hagi completat, podreu executar les diferents ordres proporcionades des de la línia d'ordres.

Utilitzant scripts npm

El nostre package.json inclou nombroses tasques per desenvolupar el projecte. Executeu npm runper veure tots els scripts npm del vostre terminal. Les tasques principals inclouen:

Tasca Descripció
npm start Compila CSS i JavaScript, crea la documentació i inicia un servidor local.
npm run dist Crea el dist/directori amb fitxers compilats. Requereix Sass , Autoprefixer i Terser .
npm test Executa proves localment després d'executar-senpm run dist
npm run docs-serve Construeix i executa la documentació localment.
Comenceu amb Bootstrap mitjançant npm amb el nostre projecte inicial! Dirigiu-vos al dipòsit de plantilles twbs/bootstrap-npm-starter per veure com crear i personalitzar Bootstrap al vostre propi projecte npm. Inclou el compilador Sass, l'Autoprefixer, Stylelint, PurgeCSS i les icones Bootstrap.

Sass

Bootstrap utilitza Dart Sass per compilar els nostres fitxers font Sass en fitxers CSS (inclosos en el nostre procés de creació) i us recomanem que feu el mateix si esteu compilant Sass amb el vostre propi canal d'actius. Abans hem utilitzat Node Sass per a Bootstrap v4, però LibSass i els paquets construïts a sobre, inclòs Node Sass, ara estan obsolets .

Dart Sass utilitza una precisió d'arrodoniment de 10 i per raons d'eficiència no permet ajustar aquest valor. No reduïm aquesta precisió durant el processament posterior del nostre CSS generat, com ara durant la minificació, però si decidiu fer-ho, us recomanem que mantingueu una precisió d'almenys 6 per evitar problemes amb l'arrodoniment del navegador.

Prefixador automàtic

Bootstrap utilitza Autoprefixer (inclòs al nostre procés de creació) per afegir automàticament prefixos de proveïdors a algunes propietats CSS en el moment de la creació. En fer-ho, ens estalviem temps i codi, ja que ens permet escriure parts clau del nostre CSS una sola vegada, alhora que elimina la necessitat de mixins de proveïdors com els que es troben a la v3.

Mantenim la llista de navegadors compatibles amb Autoprefixer en un fitxer separat dins del nostre repositori GitHub. Vegeu .browserslistrc per obtenir més informació.

RTLCSS

Bootstrap utilitza RTLCSS per processar CSS compilats i convertir-los en RTL, bàsicament substituint les propietats de consciència de la direcció horitzontal (per exemple, padding-left) per les seves oposades. Només ens permet escriure el nostre CSS una sola vegada i fer petits retocs mitjançant directrius de control i valors RTLCSS .

Documentació local

L'execució de la nostra documentació localment requereix l'ús d'Hugo, que s'instal·la mitjançant el paquet hugo-bin npm. Hugo és un generador de llocs estàtics increïblement ràpid i bastant extensible que ens proporciona: inclou bàsiques, fitxers basats en Markdown, plantilles i molt més. A continuació s'explica com començar-ho:

  1. Executeu la configuració d'eines anterior per instal·lar totes les dependències.
  2. Des del directori arrel /bootstrap, executeu npm run docs-serve-lo a la línia d'ordres.
  3. Obriu http://localhost:9001/al vostre navegador i voilà.

Obteniu més informació sobre com utilitzar Hugo llegint la seva documentació .

Resolució de problemes

Si teniu problemes amb la instal·lació de dependències, desinstal·leu totes les versions anteriors de dependències (globals i locals). Després, torna a executar npm install.