Přejít na hlavní obsah Přejít na navigaci v dokumentech
in English

Sestavte nástroje

Naučte se používat skripty npm zahrnuté v Bootstrapu k sestavení naší dokumentace, kompilaci zdrojového kódu, spouštění testů a dalším.

Na této straně

Nastavení nářadí

Bootstrap používá pro svůj systém sestavení skripty npm . Náš package.json obsahuje pohodlné metody pro práci s frameworkem, včetně kompilace kódu, spouštění testů a dalších.

Chcete-li použít náš systém sestavení a spustit naši dokumentaci lokálně, budete potřebovat kopii zdrojových souborů Bootstrapu a uzlu. Postupujte podle těchto kroků a měli byste být připraveni na rock:

  1. Stáhněte a nainstalujte Node.js , který používáme ke správě našich závislostí.
  2. Buď si stáhněte zdrojové kódy Bootstrapu nebo rozvětvte úložiště Bootstrapu .
  3. Přejděte do kořenového /bootstrapadresáře a spusťte npm installinstalaci našich místních závislostí uvedených v package.json .

Po dokončení budete moci spouštět různé příkazy poskytované z příkazového řádku.

Použití skriptů npm

Náš package.json obsahuje řadu úkolů pro vývoj projektu. Spuštěním npm runzobrazíte všechny skripty npm ve vašem terminálu. Mezi primární úkoly patří:

Úkol Popis
npm start Kompiluje CSS a JavaScript, vytváří dokumentaci a spouští místní server.
npm run dist Vytvoří dist/adresář s kompilovanými soubory. Vyžaduje Sass , Autoprefixer a Terser .
npm test Po spuštění spustí testy lokálněnpm run dist
npm run docs-serve Lokálně vytváří a spouští dokumentaci.
Začněte s Bootstrap přes npm s naším startovacím projektem! Přejděte do úložiště šablon twbs/bootstrap-npm-starter , kde se dozvíte, jak vytvořit a přizpůsobit Bootstrap ve svém vlastním projektu npm. Zahrnuje Sass kompilátor, Autoprefixer, Stylelint, PurgeCSS a ikony Bootstrap.

Sass

Bootstrap používá Dart Sass pro kompilaci našich zdrojových souborů Sass do souborů CSS (součástí našeho procesu sestavování) a doporučujeme, abyste udělali totéž, pokud kompilujete Sass pomocí vlastního kanálu aktiv. Dříve jsme používali Node Sass pro Bootstrap v4, ale LibSass a balíčky na něm postavené, včetně Node Sass, jsou nyní zastaralé .

Dart Sass používá přesnost zaokrouhlení 10 a z důvodu efektivity neumožňuje úpravu této hodnoty. Tuto přesnost nesnižujeme při dalším zpracování našeho generovaného CSS, jako je například miniifikace, ale pokud se tak rozhodnete, doporučujeme zachovat přesnost alespoň 6, abyste předešli problémům se zaokrouhlováním prohlížeče.

Autoprefixer

Bootstrap používá Autoprefixer (zahrnutý v našem procesu sestavování) k automatickému přidávání předpon dodavatele k některým vlastnostem CSS v době sestavování. To nám šetří čas a kód, protože nám umožňuje psát klíčové části našeho CSS jednou a zároveň eliminuje potřebu mixů výrobců, jako jsou ty, které se nacházejí ve verzi 3.

Seznam prohlížečů podporovaných prostřednictvím Autoprefixer udržujeme v samostatném souboru v našem úložišti GitHub. Podrobnosti viz .browserslistrc .

RTLCSS

Bootstrap používá RTLCSS ke zpracování zkompilovaných CSS a jejich převodu na RTL – v podstatě nahrazuje vlastnosti orientované na horizontální směr (např. padding-left) jejich opakem. To nám umožňuje psát naše CSS pouze jednou a provádět drobné úpravy pomocí řídicích a hodnotových direktiv RTLCSS .

Místní dokumentace

Spuštění naší dokumentace lokálně vyžaduje použití Hugo, které se instaluje prostřednictvím balíčku hugo-bin npm. Hugo je neuvěřitelně rychlý a poměrně rozšiřitelný generátor statických stránek, který nám poskytuje: základní zahrnutí, soubory založené na Markdown, šablony a další. Zde je návod, jak to začít:

  1. Projděte nastavením nástrojů výše a nainstalujte všechny závislosti.
  2. Z kořenového /bootstrapadresáře spusťte npm run docs-servev příkazovém řádku.
  3. Otevřete http://localhost:9001/v prohlížeči a voilà.

Další informace o používání Huga naleznete v jeho dokumentaci .

Odstraňování problémů

Pokud narazíte na problémy s instalací závislostí, odinstalujte všechny předchozí verze závislostí (globální i místní). Poté spusťte znovu npm install.