in English

Изградете алатки

Научете како да ги користите вклучените npm скрипти на Bootstrap за да ја изградите нашата документација, да компајлирате изворен код, да извршите тестови и многу повеќе.

Поставување алат

Bootstrap користи npm скрипти за својот систем за градење. Нашиот package.json вклучува практични методи за работа со рамката, вклучувајќи компајлирање код, извршување тестови и многу повеќе.

За да го користите нашиот систем за изградба и да ја извршувате нашата документација локално, ќе ви треба копија од изворните датотеки на Bootstrap и Node. Следете ги овие чекори и треба да бидете подготвени да се лулате:

  1. Преземете и инсталирајте Node.js , што го користиме за да управуваме со нашите зависности.
  2. Или преземете ги изворите на Bootstrap или поддржете го складиштето на Bootstrap .
  3. Одете до root /bootstrapдиректориумот и стартувајте npm installза да ги инсталирате нашите локални зависности наведени во package.json .

Кога ќе завршите, ќе можете да ги извршите различните команди обезбедени од командната линија.

Користење на скрипти npm

Нашиот package.json ги вклучува следните команди и задачи:

Задача Опис
npm run dist npm run distго креира /dist/директориумот со компајлирани датотеки. Користи Sass , Autoprefixer и terser .
npm test Извршува тестови локално по трчањетоnpm run dist
npm run docs-serve Локално ја гради и работи документацијата.

Стартувај npm runза да ги видиш сите скрипти npm.

Започнете со Bootstrap преку npm со нашиот стартен проект! Одете во складиштето за шаблони twbs /bootstrap-npm-starter за да видите како да го изградите и приспособите Bootstrap во вашиот сопствен проект npm. Вклучува Sass компајлер, Autoprefixer, Stylelint, PurgeCSS и Bootstrap икони.

Сас

Bootstrap v4 користи Node Sass за компајлирање на нашите Sass изворни датотеки во CSS-датотеки (вклучени во нашиот процес на градење). За да завршите со истиот генериран CSS при компајлирање на Sass со користење на сопствена линија на средства, ќе треба да користите Sass компајлер кој ги поддржува барем функциите што ги прави Node Sass. Ова е важно да се забележи бидејќи од 26 октомври 2020 година, LibSass и пакетите изградени врз него - вклучувајќи го и Node Sass - се застарени .

Ако ви требаат понови функции на Sass или компатибилност со поновите CSS стандарди, Dart Sass сега е примарна имплементација на Sass и поддржува JavaScript API што е целосно компатибилен со Node Sass (со неколку исклучоци наведени на страницата GitHub на Dart Sass ).

Ја зголемуваме прецизноста на заокружувањето Sass на 6 (стандардно, тоа е 5 во Node Sass) за да спречиме проблеми со заокружувањето на прелистувачот. Ако користите Dart Sass, ова нема да биде нешто што треба да го приспособите, бидејќи тој компајлер користи прецизност на заокружување од 10 и од причини за ефикасност не дозволува да се прилагоди.

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

Bootstrap користи Autoprefixer (вклучен во нашиот процес на градење) за автоматско додавање префикси на продавач на некои CSS својства во времето на изградбата. Тоа ни заштедува време и код со тоа што ни дозволува да пишуваме клучни делови од нашиот CSS еднократно додека ја елиминираме потребата за мешавини на продавачи како оние што се наоѓаат во v3.

Списокот на прелистувачи поддржани преку Autoprefixer го одржуваме во посебна датотека во нашето складиште на GitHub. Видете .browserslistrc за детали.

Локална документација

Водење на нашата документација локално бара употреба на Hugo, кој се инсталира преку пакетот hugo-bin npm. Hugo е неверојатно брз и доста растеглив генератор на статички страници кој ни обезбедува: основни вклучува, датотеки базирани на Markdown, шаблони и многу повеќе. Еве како да го започнете:

  1. Поминете низ поставката за алатки погоре за да ги инсталирате сите зависности.
  2. Од root /bootstrapдиректориумот, стартувајте npm run docs-serveво командната линија.
  3. Отворете http://localhost:9001/во вашиот прелистувач и voilà.

Дознајте повеќе за користење на Hugo читајќи ја неговата документација .

Решавање проблеми

Доколку наидете на проблеми со инсталирање на зависности, деинсталирајте ги сите претходни верзии на зависности (глобални и локални). Потоа, повторувајте npm install.