Перейти к основному содержанию Перейти к навигации по документам
Check
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 и значки Bootstrap.

Сасс

Bootstrap использует Dart Sass для компиляции наших исходных файлов Sass в файлы CSS (включенные в наш процесс сборки), и мы рекомендуем вам сделать то же самое, если вы компилируете Sass с использованием собственного конвейера ресурсов. Ранее мы использовали Node Sass для Bootstrap v4, но LibSass и пакеты, созданные поверх него, включая Node Sass, теперь устарели .

Dart Sass использует точность округления 10 и по соображениям эффективности не позволяет корректировать это значение. Мы не снижаем эту точность во время дальнейшей обработки нашего сгенерированного CSS, например, во время минимизации, но если вы решите это сделать, мы рекомендуем поддерживать точность не менее 6, чтобы предотвратить проблемы с округлением в браузере.

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

Bootstrap использует Autoprefixer (включенный в наш процесс сборки) для автоматического добавления префиксов поставщиков к некоторым свойствам CSS во время сборки. Это экономит наше время и код, позволяя нам писать ключевые части нашего CSS за один раз, устраняя при этом необходимость в примесях поставщиков, подобных тем, которые можно найти в версии 3.

Мы храним список браузеров, поддерживаемых Autoprefixer, в отдельном файле в нашем репозитории GitHub. Подробности смотрите в .browserslistrc .

РТЛКС

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.