Настроить
Узнайте, как создавать темы, настраивать и расширять Bootstrap с помощью Sass, множества глобальных параметров, обширной системы цветов и многого другого.
Обзор
Существует несколько способов настройки Bootstrap. Ваш лучший путь может зависеть от вашего проекта, сложности ваших инструментов сборки, версии Bootstrap, которую вы используете, поддержки браузера и многого другого.
Наши два предпочтительных метода:
- Использование Bootstrap через менеджер пакетов, чтобы вы могли использовать и расширять наши исходные файлы.
- Использование скомпилированных файлов дистрибутива Bootstrap или jsDelivr , чтобы вы могли добавлять или переопределять стили Bootstrap.
Хотя мы не можем здесь вдаваться в подробности о том, как использовать каждый менеджер пакетов, мы можем дать некоторые рекомендации по использованию Bootstrap с вашим собственным компилятором Sass .
Для тех, кто хочет использовать файлы дистрибутива, просмотрите страницу начала работы, чтобы узнать, как включить эти файлы, и пример HTML-страницы. Оттуда обратитесь к документации для макета, компонентов и поведения, которые вы хотели бы использовать.
По мере того, как вы знакомитесь с Bootstrap, продолжайте изучать этот раздел, чтобы узнать больше о том, как использовать наши глобальные параметры, использовать и изменять нашу цветовую систему, как мы создаем наши компоненты, как использовать наш растущий список пользовательских свойств CSS и как для оптимизации вашего кода при сборке с помощью Bootstrap.
CSP и встроенные SVG
Несколько компонентов Bootstrap включают в себя встроенные SVG в наш CSS, чтобы стилизовать компоненты последовательно и легко в разных браузерах и на разных устройствах. Для организаций с более строгими конфигурациями CSP мы задокументировали все экземпляры наших встроенных SVG (все они применяются с помощью background-image
), чтобы вы могли более тщательно изучить свои варианты.
- Аккордеон
- Кнопка закрытия (используется в предупреждениях и модальных окнах)
- Флажки и радиокнопки формы
- Переключатели форм
- Значки проверки формы
- Выберите меню
- Управление каруселью
- Кнопки переключения навигации
Основываясь на обсуждении в сообществе , некоторые варианты решения этой проблемы в вашей собственной кодовой базе включают замену URL-адресов локально размещенными активами, удаление изображений и использование встроенных изображений (возможно не во всех компонентах) и изменение вашего CSP. Мы рекомендуем тщательно проанализировать собственные политики безопасности и, при необходимости, выбрать наилучший путь вперед.