Редактирование CSS для тем

Статья
03/15/2023

Примечание

Начиная с октября 2022 г. порталы Power Apps называются Power Pages.
Начиная с 26 февраля 2024 г. использование старой студии порталов Power Apps будет прекращено. Используйте вместо нее для редактирования своих веб-сайтов студию дизайна Power Pages. Дополнительные сведения: Прекращение поддержки студии порталов Power Apps
Эта тема относится к устаревшим возможностям. Актуальную информацию см. в документации по Microsoft Power Pages.

Каскадные таблицы стилей (CSS) позволяют управлять форматом веб-сайта. По умолчанию доступны файлы bootstrap.min.css и theme.css. Можно изменить существующие файлы CSS или отправить новые файлы CSS. При отправлении нового файла CSS он будет доступен как веб-файл в приложении управления порталами.

Важно!

Порталы Power Apps основаны на Bootstrap 3.3.x за исключением Портал событий. Разработчики портала не должны заменять Bootstrap 3 другими библиотеками CSS, так как некоторые из сценариев на порталах Power Apps зависят от Bootstrap 3.3.x. Дополнительные сведения см. в разделах Общие сведения о платформе Bootstrap и Настройка Bootstrap в этой статье.

Откройте CSS в редакторе кода

Чтобы открыть CSS в редакторе кода, отредактируйте портал, чтобы открыть его в Студии порталов Power Apps.

Выберите Тема с левой стороны экрана. На экране появятся доступные темы.
Выберите нужную таблицу CSS, чтобы открыть ее в редакторе кода.
Отредактируйте код и сохраните изменения.

Загрузить новый файл CSS

Чтобы загрузить новый CSS файл, отредактируйте портал, чтобы открыть его в Студии порталов Power Apps.

Выберите Тема с левой стороны экрана. На экране появятся доступные темы.
Выберите Отправить пользовательский CSS.
Найдите и выберите файл CSS для отправки.

Удаление пользовательского файла CSS

Файлы CSS хранятся как веб-файлы.

Чтобы удалить файл CSS, перейдите в Приложение для управления порталом и выберите Веб-файлы.
Найдите запись файла CSS. Возможно, вам потребуется отфильтровать по значениям Имя и Веб-сайт, чтобы найти правильную запись.
После выбора записи веб-файла выберите Удалить.
В студии портала выберите Синхронизировать конфигурацию, чтобы очистить изменения стиля от пользовательской таблицы CSS.

Общие сведения о платформе Bootstrap

Bootstrap — это внешняя платформа, включающая CSS и компоненты JavaScript для распространенных элементов интерфейса веб-приложения. Она включает стили для элементов навигации, форм, кнопок и отзывчивой системы макетов сетки, благодаря чему макеты сайта могут динамически адаптироваться под разные размеры экрана устройств, например телефонов и планшетов. С помощью системы макетов Bootstrap можно разработать один сайт, представляющий соответствующий интерфейс для всех устройств, которые могут использовать клиенты.

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

Настройка Bootstrap

Bootstrap поддерживает настройку с помощью набора переменных. Можно задать настраиваемые значения для отдельных или всех этих переменных, а затем загрузить пользовательскую версию Bootstrap, скомпилированную на основании этих значений.

Преимущество переменных Bootstrap заключается в том, что они не диктуют стиль отдельного элемента. Все стили в платформе основываются на этих значениях или наследуются от них. Например, рассмотрим переменную @font-size-base. Она определяет размер, который Bootstrap назначает обычному основному тексту. Однако Bootstrap также использует эту переменную для указания размера шрифта заголовков и других элементов. Размер элемента H1 можно определить как 300% от размера @font-size-base. Задав эту одну переменную, можно согласованно управлять всем типографским масштабом портала. Аналогично, переменная @link-color управляет цветом гиперссылок. Для цвета, назначаемого этому значению, Bootstrap определит цвет ссылок при наведении на них указателя мыши на 15 процентов темнее настраиваемого значения.

Обычно пользовательская версия Bootstrap создается на официальном сайте Bootstrap. Однако вследствие популярности Bootstrap для этой цели было создано много сторонних сайтов. На этих сайтах может предоставляться более простой интерфейс для настройки 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.min.css — это файл, содержащий ваши настройки. Другие файлы одинаковы для всех настроенных версий Bootstrap, и они уже включены в ваш портал.

См. также

Примечание

Каковы ваши предпочтения в отношении языка документации? Пройдите краткий опрос (обратите внимание, что этот опрос представлен на английском языке).

Опрос займет около семи минут. Личные данные не собираются (заявление о конфиденциальности).

Поделиться через