in English

Costruisci strumenti

Scopri come utilizzare gli script npm inclusi in Bootstrap per creare la nostra documentazione, compilare il codice sorgente, eseguire test e altro ancora.

Su questa pagina

Configurazione degli utensili

Bootstrap utilizza gli script npm per il suo sistema di compilazione. Il nostro package.json include metodi convenienti per lavorare con il framework, inclusa la compilazione del codice, l'esecuzione di test e altro ancora.

Per utilizzare il nostro sistema di compilazione ed eseguire la nostra documentazione in locale, avrai bisogno di una copia dei file sorgente e di Node di Bootstrap. Segui questi passaggi e dovresti essere pronto per il rock:

Scarica e installa Node.js , che utilizziamo per gestire le nostre dipendenze.
Scarica i sorgenti di Bootstrap o esegui il fork del repository di Bootstrap .
Passa alla /bootstrapdirectory principale ed esegui npm installper installare le nostre dipendenze locali elencate in package.json .

Al termine, sarai in grado di eseguire i vari comandi forniti dalla riga di comando.

Utilizzo di script npm

Il nostro package.json include numerose attività per lo sviluppo del progetto. Esegui npm runper vedere tutti gli script npm nel tuo terminale. I compiti primari includono:

Compito	Descrizione
`npm start`	Compila CSS e JavaScript, compila la documentazione e avvia un server locale.
`npm run dist`	Crea la `dist/`directory con i file compilati. Richiede Sass , Autoprefixer e terser .
`npm test`	Esegue i test in locale dopo l'esecuzione`npm run dist`
`npm run docs-serve`	Crea ed esegue la documentazione in locale.

Inizia con Bootstrap tramite npm con il nostro progetto iniziale! Vai al repository di modelli twbs /bootstrap-npm-starter per vedere come creare e personalizzare Bootstrap nel tuo progetto npm. Include le icone del compilatore Sass, Autoprefixer, Stylelint, PurgeCSS e Bootstrap.

Sass

Bootstrap utilizza Dart Sass per compilare i nostri file sorgente Sass in file CSS (inclusi nel nostro processo di compilazione) e ti consigliamo di fare lo stesso se stai compilando Sass utilizzando la tua pipeline di risorse. In precedenza abbiamo utilizzato Node Sass per Bootstrap v4, ma LibSass e i pacchetti basati su di esso, incluso Node Sass, sono ora deprecati .

Dart Sass utilizza una precisione di arrotondamento pari a 10 e per ragioni di efficienza non consente la regolazione di tale valore. Non riduciamo questa precisione durante l'ulteriore elaborazione del nostro CSS generato, ad esempio durante la minimizzazione, ma se hai scelto di farlo ti consigliamo di mantenere una precisione di almeno 6 per evitare problemi con l'arrotondamento del browser.

Prefisso automatico

Bootstrap utilizza Autoprefixer (incluso nel nostro processo di compilazione) per aggiungere automaticamente i prefissi dei fornitori ad alcune proprietà CSS in fase di compilazione. Ciò ci consente di risparmiare tempo e codice consentendoci di scrivere parti chiave del nostro CSS una sola volta eliminando la necessità di mixin dei fornitori come quelli che si trovano nella v3.

Manteniamo l'elenco dei browser supportati tramite Autoprefixer in un file separato all'interno del nostro repository GitHub. Vedere .browserslistrc per i dettagli.

RTLCSS

Bootstrap utilizza RTLCSS per elaborare CSS compilati e convertirli in RTL, sostanzialmente sostituendo le proprietà sensibili alla direzione orizzontale (es. padding-left) con il loro opposto. Ci consente di scrivere il nostro CSS solo una volta e di apportare piccole modifiche utilizzando il controllo RTLCSS e le direttive del valore .

Documentazione locale

L'esecuzione della nostra documentazione in locale richiede l'uso di Hugo, che viene installato tramite il pacchetto hugo-bin npm. Hugo è un generatore di siti statici incredibilmente veloce e abbastanza estensibile che ci fornisce: include di base, file basati su Markdown, modelli e altro ancora. Ecco come iniziare:

Esegui la configurazione degli strumenti sopra per installare tutte le dipendenze.
Dalla /bootstrapdirectory principale, esegui npm run docs-servenella riga di comando.
Apri http://localhost:9001/nel tuo browser e voilà.

Scopri di più sull'utilizzo di Hugo leggendo la sua documentazione .

Risoluzione dei problemi

In caso di problemi con l'installazione delle dipendenze, disinstallare tutte le versioni precedenti delle dipendenze (globale e locale). Quindi, riesegui npm install.