Преминете към основното съдържание Преминете към навигацията с документи
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, за да видите всички 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. От главната /bootstrapдиректория стартирайте npm run docs-serveв командния ред.
  3. Отворете http://localhost:9001/в браузъра си и готово.

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

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

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