Игътибар итегез

Bootstrap-ны безнең документлар белән сценарийлар һәм тестлар ярдәмендә ясарга булышыгыз.

Бу биттә

Кораллау

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-ны куллануны таләп итә, ул hugo-bin npm пакеты аша урнаштырылган. Уго - безне тәэмин итүче бик тиз һәм киңәйтелгән статик сайт генераторы: төп үз эченә Маркдаунга нигезләнгән файллар, шаблоннар һ.б. Менә аны ничек башларга:

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

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

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

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