Прескокнете до главната содржина Прескокнете до навигацијата со документи
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за да ги видиш сите скрипти 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 и 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. Hugo е неверојатно брз и доста растеглив генератор на статички страници кој ни обезбедува: основни вклучува, датотеки базирани на Markdown, шаблони и многу повеќе. Еве како да го започнете:

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

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

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

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