Обзор Bootstrap
Bootstrap — это платформа фронтенд-разработки, которая позволяет разрабатывать веб-интерфейсы, используя готовые компоненты CSS и JavaScript для таких распространенных элементов, как навигация, формы и кнопки. В ней также имеется система гибких макетов сетки, которая обеспечивает адаптацию вашего сайта к устройствам с экранами разных размеров, таких как телефоны и планшеты. С помощью системы макетов Bootstrap можно создать один сайт, который будет хорошо выглядеть на любом устройстве, которое могут использовать ваши клиенты.
В шаблонах Power Pages используются стандартные компоненты Bootstrap с минимальным количеством пользовательских стилей. Используя эти шаблоны, вы можете легко изменить тему (шрифты, цвета и т. д.), чтобы она соответствовала вашему бренду и предпочтениям на всем сайте.
Power Pages поддерживает Bootstrap версии 3.3.6 и Bootstrap версии 5. Bootstrap версии 5 предлагает улучшенные функции взаимодействия с пользователем (UX) и новые компоненты, такие как гармошка, элементы вне холста и поддержка RTL.
Для новых сайтов Power Pages вам необходимо настроить Bootstrap версии 5 в вашей среде. Вы также можете перенести существующие веб-сайты Bootstrap версии 3 в версию 5.
Настройка Bootstrap
Для настройки Bootstrap вы изменяете значения переменных, а затем загружаете версию Bootstrap, скомпилированную с заданными вами значениями.
Мощь переменных Bootstrap заключается в том, что они определяют все стили в пределах платформы, а не только один элемент. Например, переменная @font-size-base определяет размер текста на вашем сайте по умолчанию — основного текста, заголовков и всех других текстовых элементов. Заголовок H1 можно определить как 300 процентов @font-size-base. Задав эту одну переменную, можно согласованно управлять всем типографским масштабом веб-сайта.
Вы можете создать собственную версию Bootstrap через официальный сайт Bootstrap или воспользоваться сторонним сайтом, который может предложить более простой интерфейс или готовые темы. Официальный сайт настройки Bootstrap предоставляет дополнительные сведения по настройке Bootstrap.
При загрузке настроенной версии Bootstrap она содержит следующую структуру каталогов:
css/
|-- bootstrap.min.css
img/
|-- glyphicons-halflings-white.png
|-- glyphicons-halflings.png
js/
|-- bootstrap.min.js
В зависимости от используемого приложения настройщика структура каталогов может содержать только bootstrap.min.css. Это файл, содержащий ваши настройки. Другие файлы одинаковы для всех настроенных версий Bootstrap, и они уже включены в ваш веб-сайт.