Гузаштан ба мундариҷаи асосӣ Ба новбари ҳуҷҷатҳо гузаред
in English

Саҳм гузоред

Бо ҳуҷҷатҳои сохтани скриптҳо ва санҷишҳои мо ба таҳияи Bootstrap кӯмак кунед.

Танзимоти асбобҳо

Bootstrap скриптҳои npm -ро барои сохтани ҳуҷҷатҳо ва тартиб додани файлҳои манбаъ истифода мебарад. Дар package.json мо ин скриптҳоро барои тартиб додани код, иҷро кардани санҷишҳо ва ғайра ҷойгир мекунад. Инҳо барои истифода берун аз анбор ва ҳуҷҷатҳои мо пешбинӣ нашудаанд.

Барои истифодаи системаи сохтани мо ва иҷро кардани ҳуҷҷатҳои мо ба таври маҳаллӣ, ба шумо нусхаи файлҳои ибтидоии Bootstrap ва Node лозим аст. Ин қадамҳоро иҷро кунед ва шумо бояд ба рок омода бошед:

  1. Node.js -ро зеркашӣ ва насб кунед , ки мо онро барои идоракунии вобастагии худ истифода мебарем.
  2. Ё манбаъҳои Bootstrap-ро зеркашӣ кунед ё анбори Bootstrap-ро кушоед .
  3. /bootstrapБа директорияи решавӣ гузаред ва npm installбарои насб кардани вобастагии маҳаллии мо, ки дар package.json номбар шудаанд, иҷро кунед.

Пас аз анҷом, шумо метавонед фармонҳои гуногунеро, ки аз сатри фармон дода шудаанд, иҷро кунед.

Истифодаи скриптҳои npm

Package.json мо вазифаҳои зиёдеро барои таҳияи лоиҳа дар бар мегирад. npm runБарои дидани ҳамаи скриптҳои npm дар терминали худ кор кунед . Вазифаҳои асосӣ иборатанд аз:

Вазифа Тавсифи
npm start CSS ва JavaScript-ро тартиб медиҳад, ҳуҷҷатҳоро месозад ва сервери маҳаллиро оғоз мекунад.
npm run dist dist/Директорияро бо файлҳои тартибдодашуда эҷод мекунад . Sass , Autoprefixer ва terser талаб мекунад .
npm test Пас аз давидан санҷишҳоро ба таври маҳаллӣ иҷро мекунадnpm run dist
npm run docs-serve Ҳуҷҷатҳоро ба таври маҳаллӣ месозад ва иҷро мекунад.
Бо лоиҳаи ибтидоии мо бо Bootstrap тавассути npm оғоз кунед! Ба анбори қолаби twbs/bootstrap-npm-starter равед, то бубинед, ки чӣ гуна Bootstrap-ро дар лоиҳаи npm худ созед ва танзим кунед. Компилятори Sass, Autoprefixer, Stylelint, PurgeCSS ва Icons Bootstrap-ро дар бар мегирад.

Сасс

Bootstrap Dart Sass -ро барои тартиб додани файлҳои сарчашмаи Sass ба файлҳои CSS (ба раванди сохтани мо дохил карда шудааст) истифода мебарад ва мо тавсия медиҳем, ки агар шумо Sass-ро бо истифода аз лӯлаи дороиҳои худ тартиб диҳед, ҳамин корро кунед. Мо қаблан Node Sass-ро барои Bootstrap v4 истифода мебурдем, аммо LibSass ва бастаҳои дар болои он сохташуда, аз ҷумла Node Sass, ҳоло бекор карда шудаанд.

Dart Sass дақиқии яклухткунии 10-ро истифода мебарад ва бо сабабҳои самаранокӣ ба тасҳеҳи ин арзиш имкон намедиҳад. Мо ин дақиқиро ҳангоми коркарди минбаъдаи CSS-и тавлидшудаи худ кам намекунем, масалан ҳангоми минификатсия, аммо агар шумо ин корро интихоб карда бошед, тавсия медиҳем, ки ҳадди аққал 6 дақиқиро нигоҳ доред, то мушкилот бо яклухткунии браузер пешгирӣ карда шавад.

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

Bootstrap Autoprefixer-ро (ба раванди сохтани мо дохил карда шудааст) барои ба таври худкор илова кардани префиксҳои фурӯшанда ба баъзе хосиятҳои CSS дар вақти сохтан истифода мебарад. Ин ба мо вақт ва кодро сарфа мекунад ва ба мо имкон медиҳад, ки қисмҳои калидии CSS-и худро як маротиба нависем ва ниёз ба омехтаҳои фурӯшандаро ба мисли миксинҳои дар v3 пайдошуда аз байн бардорем.

Мо рӯйхати браузерҳоеро, ки тавассути Autoprefixer дастгирӣ мешаванд, дар як файли алоҳида дар дохили анбори GitHub нигоҳ медорем. Барои тафсилот ба .browserslistrc нигаред.

RTLCSS

Bootstrap RTLCSS-ро барои коркарди CSS-и мураттабшуда истифода мебарад ва онҳоро ба RTL табдил медиҳад - асосан хосиятҳои огоҳи самти уфуқӣ (масалан padding-left) бо муқобили онҳо иваз мекунад. Он ба мо имкон медиҳад, ки танҳо як маротиба CSS-и худро нависем ва бо истифода аз директиваҳои назорат ва арзишҳои RTLCSS таҳрири ночиз кунем.

Ҳуҷҷатҳои маҳаллӣ

Иҷрои ҳуҷҷатҳои мо ба таври маҳаллӣ истифодаи Hugo-ро талаб мекунад, ки тавассути бастаи hugo -bin npm насб карда мешавад. Ҳуго як генератори зуд ва хеле васеъшавандаи сайти статикӣ мебошад, ки ба мо пешниҳод мекунад: иборат аз асосӣ, файлҳои дар Markdown асосёфта, қолибҳо ва ғайра. Ин аст, ки чӣ тавр онро оғоз кунед:

  1. Барои насб кардани ҳама вобастагӣ аз танзимоти асбобҳои боло иҷро кунед .
  2. /bootstrapАз директорияи решавӣ , npm run docs-serveдар сатри фармон иҷро кунед.
  3. http://localhost:9001/Дар браузери худ кушоед ва voilà .

Дар бораи истифодаи Ҳуго бо хондани ҳуҷҷатҳои он маълумоти бештар гиред .

Мушкилкушо

Агар шумо ҳангоми насб кардани вобастагӣ ба мушкилот дучор шавед, ҳама версияҳои қаблии вобастагӣ (глобалӣ ва маҳаллӣ) хориҷ кунед. Сипас, такрор npm installкунед.