in English

Кораллар төзү

Документация төзү, чыганак коды туплау, тестлар үткәрү һәм башкалар өчен Bootstrap кертелгән npm скриптларын ничек кулланырга өйрәнегез.

Бу биттә

Кораллау

Bootstrap үзенең төзү системасы өчен npm сценарийларын куллана. Безнең package.json рамка белән эшләү өчен уңайлы ысулларны үз эченә ала, шул исәптән код туплау, тестлар һәм башкалар.

Безнең төзү системасын куллану һәм документларыбызны җирле итеп башкару өчен, сезгә Bootstrap чыганак файллары һәм Node күчермәсе кирәк. Бу адымнарны үтәгез һәм сез ташларга әзер булырга тиеш:

Node.js-ны йөкләү һәм урнаштыру , без үзебезнең бәйләнешләр белән идарә итү өчен кулланабыз.
Яисә Bootstrap чыганакларын йөкләгез, яисә Bootstrap складларын урнаштырыгыз .
/bootstrapТөп каталогка күчегез һәм package.jsonnpm install исемлегендә күрсәтелгән безнең җирле бәйләнешләрне урнаштыру өчен йөгерегез .

Тәмамлангач, сез командалар сызыгыннан бирелгән төрле командаларны эшли алырсыз.

Npm сценарийларын куллану

Безнең package.json проектны үстерү өчен бик күп биремнәрне үз эченә ала. npm runСезнең терминалдагы барлык npm сценарийларын карау өчен йөгерегез . Төп бурычлар:

Бирем	Тасвирлау
`npm start`	CSS һәм JavaScript туплый, документлар төзи һәм җирле серверны башлый.
`npm run dist`	Компиляцияләнгән `dist/`файллар белән каталог ясый. Сасс , Автопрефиксер һәм терсер кирәк .
`npm test`	Йөгергәннән соң җирле сынаулар үткәрә`npm run dist`
`npm run docs-serve`	Документацияне җирле итеп төзи һәм эшли.

Bootstrap белән npm аша безнең башлангыч проект белән башлап җибәрегез! Bootstrap-ны үзегезнең npm проектында ничек төзергә һәм көйләргә икәнлеген карау өчен twbs / bootstrap-npm-стартер шаблон репозиториясенә керегез. Sass компиляциясе, Autoprefixer, Stylelint, PurgeCSS һәм Bootstrap иконалары керә.

Сасс

Bootstrap безнең Sass чыганак файлларын CSS файлларына туплау өчен Dart Sass куллана (безнең төзү процессына кертелгән), һәм без үзегезнең актив торбагыз ярдәмендә Sass-ны тупласагыз, без дә шулай эшләргә киңәш итәбез. Моңа кадәр Bootstrap v4 өчен Node Sass кулланган идек, ләкин LibSass һәм аның өстендә төзелгән пакетлар, шул исәптән Node Sass, хәзер искергән .

Дарт Сасс 10 түгәрәк төгәллекне куллана һәм эффективлык сәбәпләре аркасында бу кыйммәтне көйләргә рөхсәт ителми. Без җитештерелгән CSSны эшкәртү вакытында бу төгәллекне киметмибез, мәсәлән, минификация вакытында, ләкин сез моны сайласагыз, браузерны әйләндерү проблемаларын булдырмас өчен ким дигәндә 6 төгәллекне сакларга киңәш итәбез.

Автопрефиксер

Bootstrap Autoprefixer куллана (безнең төзү процессына кертелгән) төзү вакытында кайбер CSS үзлекләренә сатучы префиксларын автоматик рәвештә өстәргә. Моны эшләү безгә CSS-ның төп өлешләрен бер тапкыр язарга рөхсәт итеп, вакытны һәм кодны саклый, шул ук вакытта v3 тапкан кебек сатучы миксиннар ихтыяҗын бетерә.

Автопрефиксер ярдәмендә кулланылган браузерлар исемлеген безнең GitHub складында аерым файлда саклыйбыз. Детальләр өчен .browserslistrc карагыз .

RTLCSS

Bootstrap тупланган CSS эшкәртү һәм аларны RTLга әверелдерү өчен RTLCSSpadding-left куллана - нигездә горизонталь юнәлешне белү үзенчәлекләрен (мәс. ) Киресенчә алыштыра. Бу безгә CSS-ны бер генә тапкыр язарга һәм RTLCSS контроле һәм кыйммәт күрсәтмәләре ярдәмендә кечкенә үзгәрешләр ясарга мөмкинлек бирә.

Localирле документлар

Документацияне җирле итеп эшләтеп җибәрү Hugo -bin npm пакеты аша урнаштырылган Hugo куллануны таләп итә . Уго - безне тәэмин итүче тиз һәм шактый киңәйтелгән статик сайт генераторы: төп, Маркдаунга нигезләнгән файллар, шаблоннар һәм башкалар. Менә аны ничек башларга:

Барлык бәйләнешләрне урнаштыру өчен, өстә коралландыру көйләнеше аша йөгерегез .
Тамыр /bootstrapкаталогыннан npm run docs-serveбоерык сызыгында эшләгез.
http://localhost:9001/Браузерыгызда ачыгыз , һәм voilà.

Уго куллану турында аның документларын укып, күбрәк белү .

Төзексезлекләрне Эзләү

Бәйләнешне урнаштыру белән проблемалар килеп чыкса, барлык бәйләнеш версияләрен (глобаль һәм җирле) бетерегез. Аннары, яңадан эшләгез npm install.