in English

Инструменти за изграждане

Научете как да използвате включените npm скриптове на Bootstrap, за да създадете нашата документация, да компилирате изходния код, да изпълнявате тестове и др.

Настройка на инструментите

Bootstrap използва npm скриптове за своята система за изграждане. Нашият package.json включва удобни методи за работа с рамката, включително компилиране на код, изпълнение на тестове и др.

За да използвате нашата система за изграждане и да стартирате нашата документация локално, ще ви трябва копие на изходните файлове на Bootstrap и Node. Следвайте тези стъпки и трябва да сте готови за разтърсване:

  1. Изтеглете и инсталирайте Node.js , който използваме за управление на нашите зависимости.
  2. Или изтеглете изходния код на Bootstrap, или разклонете хранилището на Bootstrap .
  3. Отидете до основната /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. От главната /bootstrapдиректория стартирайте npm run docs-serveв командния ред.
  3. Отворете http://localhost:9001/в браузъра си и готово.

Научете повече за използването на Hugo, като прочетете неговата документация .

Отстраняване на неизправности

Ако срещнете проблеми с инсталирането на зависимости, деинсталирайте всички предишни версии на зависимости (глобални и локални). След това изпълнете отново npm install.