Prisidėti

Padėkite kurti „Bootstrap“ naudodami mūsų dokumentacijos kūrimo scenarijus ir testus.

Šiame puslapyje

Įrankių sąranka

„ Bootstrap“ naudoja npm scenarijus dokumentacijai kurti ir šaltinio failams kompiliuoti. Mūsų pakete.json yra šie kodo kompiliavimo, testų vykdymo ir kt. scenarijai. Jie nėra skirti naudoti už mūsų saugyklos ir dokumentų ribų.

Jei norite naudoti mūsų kūrimo sistemą ir paleisti dokumentaciją vietoje, jums reikės „Bootstrap“ šaltinio failų ir „Node“ kopijos. Atlikite šiuos veiksmus ir būsite pasiruošę sūpuoti:

Atsisiųskite ir įdiekite Node.js , kurią naudojame savo priklausomybėms valdyti.
Atsisiųskite „Bootstrap“ šaltinius arba paleiskite „Bootstrap“ saugyklą .
Eikite į šakninį /bootstrapkatalogą ir paleiskite npm install, kad įdiegtumėte mūsų vietines priklausomybes, nurodytas pakete.json .

Baigę galėsite paleisti įvairias komandas, pateiktas komandinėje eilutėje.

Naudojant npm scenarijus

Mūsų package.json apima daugybę projekto kūrimo užduočių. Vykdykite npm run, kad pamatytumėte visus npm scenarijus savo terminale. Pagrindinės užduotys apima:

Užduotis	apibūdinimas
`npm start`	Kompiliuoja CSS ir JavaScript, sukuria dokumentaciją ir paleidžia vietinį serverį.
`npm run dist`	Sukuria `dist/`katalogą su kompiliuotais failais. Naudoja Sass , Autoprefixer ir terser .
`npm test`	Po paleidimo atlieka bandymus vietoje`npm run dist`
`npm run docs-serve`	Kuria ir vykdo dokumentaciją vietoje.

Pradėkite naudoti „Bootstrap“ naudodami „npm“ su mūsų pradedančiuoju projektu! Eikite į twbs/bootstrap-npm-starter šablonų saugyklą ir sužinokite, kaip sukurti ir tinkinti Bootstrap savo npm projekte. Apima Sass kompiliatorių, Autoprefixer, Stylelint, PurgeCSS ir Bootstrap piktogramas.

Sass

„ Bootstrap“ naudoja „ Dart Sass “, kad kompiliuotų „Sass“ šaltinio failus į CSS failus (įtrauktas į mūsų kūrimo procesą), todėl rekomenduojame tą patį padaryti, jei „Sass“ kompiliuojate naudodami savo išteklių konvejerį. Anksčiau naudojome „Node Sass“, skirtą „Bootstrap v4“, tačiau „LibSass“ ir ant jo sukurti paketai, įskaitant „Node Sass“, dabar nebenaudojami .

„Dart Sass“ naudoja 10 apvalinimo tikslumą ir efektyvumo sumetimais neleidžia koreguoti šios vertės. Nemažiname šio tikslumo toliau apdorojant sugeneruotą CSS, pvz., mažinant, bet jei pasirinkote tai padaryti, rekomenduojame išlaikyti bent 6 tikslumą, kad išvengtumėte problemų dėl naršyklės apvalinimo.

Automatinis prefiksatorius

„ Bootstrap“ naudoja automatinį prefiksatorių (įtrauktą į mūsų kūrimo procesą), kad kūrimo metu automatiškai pridėtų tiekėjo priešdėlius prie kai kurių CSS ypatybių. Taip sutaupome laiko ir kodo, nes leidžiame vieną kartą parašyti pagrindines CSS dalis ir nereikia naudoti tiekėjų rinkinių, tokių kaip 3 v. versijoje.

„Autoprefixer“ palaikomų naršyklių sąrašą laikome atskirame „GitHub“ saugyklos faile. Daugiau informacijos rasite .browserslistrc .

RTLCSS

„ Bootstrap“ naudoja RTLCSS , kad apdorotų kompiliuotą CSS ir konvertuotų juos į RTL – iš esmės pakeičiant horizontalias krypties savybes (pvz padding-left., ) priešingomis. Tai leidžia mums tik vieną kartą parašyti CSS ir atlikti nedidelius pakeitimus naudojant RTLCSS valdymo ir vertės direktyvas.

Vietinė dokumentacija

Norint vykdyti dokumentaciją vietoje, reikia naudoti „Hugo“, kuri įdiegiama per „ hugo-bin npm“ paketą. „Hugo“ yra nepaprastai greitas ir gana išplečiamas statinių svetainių generatorius, suteikiantis mums: pagrindinius, „Markdown“ pagrįstus failus, šablonus ir kt. Štai kaip tai pradėti:

Vykdykite anksčiau pateiktą įrankių sąranką , kad įdiegtumėte visas priklausomybes.
Iš šakninio /bootstrapkatalogo paleiskite npm run docs-servekomandų eilutę.
Atidarykite http://localhost:9001/savo naršyklėje ir galia.

Sužinokite daugiau apie Hugo naudojimą skaitydami jo dokumentaciją .

Problemų sprendimas

Jei kyla problemų diegiant priklausomybes, pašalinkite visas ankstesnes priklausomybių versijas (pasaulinę ir vietinę). Tada paleiskite iš naujo npm install.