为主题编辑 CSS
备注
- 自 2022 年 10 月起，Power Apps 门户更名为 Power Pages。
- 自 2024 年 2 月 26 日起，旧版 Power Apps 门户工作室将停用。 请改用 Power Pages 设计工作室来编辑您的网站。 详细信息：Power Apps 门户工作室将停用
- 此主题适用于旧版功能。 有关最新信息，请转到 Microsoft Power Pages 文档。
级联样式表 (CSS) 允许您控制网站的格式设置。 默认情况下，bootstrap.min.css 和 theme.css 文件可用。 您可以编辑现有的 CSS 文件和上传新的 CSS 文件。 当您上传新的 CSS 文件时，该文件将在门户管理应用中作为 Web 文件提供。
重要
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 文件将存储为 Web 文件。
要删除 CSS 文件，转到门户管理应用，选择 Web 文件。
找到 CSS 文件记录。 您可能需要筛选名称和网站值来找到正确的记录。
选择 Web 文件记录后，选择删除。
在门户工作室中，选择同步配置清除自定义 CSS 中的样式更改。
了解 Bootstrap 框架
Bootstrap 是包括通用 Web 应用程序界面元素的 CSS 和 JavaScript 组件的前端框架。 它包括导航元素、窗体、按钮和响应网格布局系统的样式，它们允许网站布局针对具有不同屏幕尺寸的设备动态调整，如手机和平板电脑。 通过使用 Bootstrap 布局系统，您可以开发向您的客户可能使用的所有设备呈现相应界面的单一站点。
门户中包括的模板使用标准 Bootstrap 组件实施，具有最少的其他自定义样式。 因此实施模板时，可以利用 Bootstrap 自定义选项。 您可以迅速自定义主题（字体，颜色，等等），并使用在门户中一致地应用的方法。
自定义 Bootstrap
Bootstrap 通过使用一组变量支持自定义。 您可以设置任何或所有这些自定义值的变量，然后下载基于这些值编译的 Bootstrap 的自定义版本。
Bootstrap 变量的强大功能是它们不指示单一元素的样式。 框架的所有样式均基于这些值并从这些值派生。 例如，考虑变量 @font-size-base。 这指定 Bootstrap 分派给常规正文文本的尺寸。 但是，Bootstrap 还使用该变量指示标题和其他元素的字体大小。 H1 元素的尺寸可能会定义为 @font-size-base 尺寸的 300%。 通过设置这一个变量，您通过一致方式控制门户的整个排版比例。 同样，@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 的所有自定义版本是相同的，因此已包括在您的门户中。