салым кошуу

Биздин документтер менен скрипттерди жана тесттерди түзүү менен Bootstrap иштеп чыгууга жардам бериңиз.

Бул бетте

Курал орнотуу

Bootstrap документтерди түзүү жана баштапкы файлдарды компиляциялоо үчүн npm скрипттерин колдонот. Биздин package.json бул скрипттерди кодду түзүү, сыноолорду жүргүзүү жана башкалар үчүн камтыйт. Булар биздин репозиторийден жана документтерибизден тышкары колдонууга арналбаган.

Куруу тутумубузду колдонуу жана документтерибизди жергиликтүү түрдө иштетүү үчүн сизге Bootstrap булак файлдарынын жана Түйүндүн көчүрмөсү керек болот. Бул кадамдарды аткарыңыз жана сиз рок даяр болушуңуз керек:

Биз көз карандылыктарыбызды башкаруу үчүн колдоно турган Node.jsти жүктөп алып орнотуп алыңыз .
Же Bootstrap булактарын жүктөп алыңыз же Bootstrap репозиторийсин айрыңыз .
Түпкү /bootstrapкаталогго чабыттап, package.json npm installичинде тизмеленген жергиликтүү көз карандылыктарыбызды орнотуу үчүн чуркаңыз .

Бүткөндөн кийин, сиз буйрук сабынан берилген ар кандай буйруктарды иштете аласыз.

npm скрипттерин колдонуу

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

Тапшырма	Description
`npm start`	CSS жана JavaScript компиляциялайт, документтерди түзөт жана жергиликтүү серверди ишке киргизет.
`npm run dist`	Компиляцияланган `dist/`файлдар менен каталогду түзөт. Sass , Autoprefixer жана terser колдонот .
`npm test`	Чуркап чыккандан кийин жергиликтүү тесттерди жүргүзөт`npm run dist`
`npm run docs-serve`	Документти жергиликтүү түрдө түзөт жана иштетет.

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

Sass

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

Dart Sass 10 тегеректөө тактыгын колдонот жана натыйжалуулук үчүн бул маанини тууралоого жол бербейт. Биз бул тактыкты төмөндөтпөйбүз, мисалы, кичирейтүү учурундагыдай, биздин түзүлгөн CSS'ти андан ары иштеп чыгууда, бирок сиз муну тандасаңыз, браузерди тегеректөөдөгү көйгөйлөрдүн алдын алуу үчүн кеминде 6 тактыкты сактоону сунуштайбыз.

Autoprefixer

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

Autoprefixer аркылуу колдоого алынган браузерлердин тизмесин GitHub репозиторийибиздеги өзүнчө файлда сактайбыз. Чоо-жайын көрүү үчүн .browserlistrc караңыз .

RTLCSS

Bootstrap компиляцияланган CSSти иштеп чыгуу жана аларды RTLге айландыруу үчүн RTLCSS колдонот – негизинен горизонталдуу багытты билүүчү касиеттерди (мисалы padding-left) алардын карама-каршысына алмаштырат. Бул бизге CSSти бир жолу гана жазууга жана RTLCSS башкаруу жана баалуулук директивалары аркылуу майда өзгөртүүлөрдү жасоого мүмкүндүк берет.

Жергиликтүү документтер

Документтерибизди жергиликтүү түрдө иштетүү үчүн Hugo колдонуу керек, ал hugo-bin npm пакети аркылуу орнотулган. Hugo - бул абдан тез жана кенейтүү статикалык сайт генератору, ал бизге: негизги камтыйт, Markdown негизиндеги файлдар, шаблондор жана башкалар. Муну кантип баштоо керек:

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

Анын документтерин окуп Hugo колдонуу жөнүндө көбүрөөк билүү .

Проблемаларды чечүү

Көз карандылыкты орнотууда көйгөйлөргө туш болсоңуз, бардык мурунку көз карандылык версияларын (глобалдык жана жергиликтүү) чыгарып салыңыз. Андан кийин, кайра иштетүү npm install.