Участие в разработке

Помогите в разработке Bootstrap с помощью наших скриптов сборки документации и тестов.

На этой странице

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

Bootstrap использует npm-скрипты для сборки документации и компиляции исходных файлов. Наш package.json содержит эти скрипты для компиляции кода, запуска тестов и многого другого. Они не предназначены для использования вне нашего репозитория и документации.

Чтобы использовать нашу систему сборки и запустить нашу документацию локально, вам понадобится копия исходных файлов Bootstrap и Node. Выполните эти шаги, и вы будете готовы к работе:

Скачайте и установите Node.js, который мы используем для управления нашими зависимостями.
Либо скачайте исходные коды Bootstrap, либо сделайте форк и клонируйте репозиторий Bootstrap.
Перейдите в корневую папку /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 с нашим начальным проектом! Перейдите в репозиторий шаблонов пример Sass и JS, чтобы узнать, как для создания и настройки Bootstrap в вашем собственном проекте npm. Включает компилятор Sass, Autoprefixer, Stylelint, PurgeCSS и значки Bootstrap.

Sass

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

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

Autoprefixer

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

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

RTLCSS

Bootstrap использует RTLCSS для обработки скомпилированного CSS и преобразования его в RTL – в основном заменяя свойства, чувствительные к горизонтальному направлению (например, padding-left), на противоположные. Это позволяет нам писать наш CSS только один раз и вносить небольшие корректировки, используя директивы RTLCSS управления и значений.

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

Запуск нашей документации локально требует использования Astro. Astro — это современный генератор статических сайтов, который позволяет нам собирать нашу документацию, используя комбинацию Markdown и React-компонентов. Вот как его запустить:

Пройдите через настройку инструментов выше, чтобы установить все зависимости.
Из корневой папки /bootstrap выполните npm run docs-serve в командной строке.
Откройте http://localhost:9001 в вашем браузере, и вот и всё.

Узнайте больше об использовании Astro, прочитав его документацию.

Устранение неполадок

Если вы столкнетесь с проблемами при установке зависимостей, удалите все предыдущие версии зависимостей (глобальные и локальные). Затем повторно выполните npm install.