[ English | 한국어 (대한민국) | português (Brasil) | français | español | English (United Kingdom) | русский | 中文 (简体, 中国) | Esperanto | Deutsch | Indonesia | नेपाली ]
Branding Horizon¶
从 Liberty 版本开始，Horizon 开始更严格地遵循 Bootstrap 标准，以便采用更具响应性的网页设计，并减少为每个版本重新设计新功能的需要。
支持的组件¶
以下组件按版本组织，是充分利用 Bootstrap 主题架构的唯一组件。
步骤 1¶
创建 Horizon 定制品牌主题的第一步是创建一个定制的 Bootstrap 主题。 有几种工具可以帮助完成此操作。 其中一些更有用的工具包括
注意
Bootstrap 默认使用 LESS，但我们使用 SCSS。 以上所有工具都将提供 variables.less 文件，需要将其转换为 _variables.scss
图表¶
饼图¶
饼图是 SVG 元素。 SVG 元素允许 CSS 自定义仅用于基本元素的外观和感觉（例如颜色、大小）。
由于 Bootstrap 中没有专门用于饼图的本机元素，因此图表的外观和感觉继承自主题的其他元素。 请参阅 _pie_charts.scss 以了解具体信息。
条形图¶
条形图可以是 Bootstrap 进度条或 SVG 元素。 两种实现都将使用 Bootstrap 进度条样式。
SVG 实现不会使用自定义进度条高度，因此建议尽可能使用 Bootstrap 进度条。
请参阅 _bar_charts.scss 以了解可以自定义 SVG 的具体信息。 请参阅变量文件中的 Progress bars 部分，了解用于自定义的特定变量。
表格¶
标准的 Django 表格现在使用原生的 Bootstrap 表格标记。 请参阅变量文件中的 Tables 部分，了解用于自定义的变量。
标准的 Bootstrap 表格默认情况下将无边框。 如果您希望添加边框，例如 default 主题，请参阅 openstack_dashboard/themes/default/horizon/components/_tables.scss
登录¶
登录启动页¶
登录启动页现在在其实现中使用标准的 Bootstrap 面板。 请参阅变量文件中的 Panels 部分，了解易于自定义的变量。
模态登录¶
在切换区域时使用的模态登录体验，使用标准的 Bootstrap 对话框。 请参阅变量文件中的 Modals 部分，了解用于自定义的特定变量。
选项卡¶
标准选项卡使用原生的 Bootstrap 选项卡标记。
请参阅变量文件中的 Tabs 部分，了解用于自定义的变量。
警告框¶
警告框使用基本的 Bootstrap 品牌颜色。 请参阅变量文件中的 Colors 部分，了解具体信息。
复选框¶
Horizon 使用图标字体来表示复选框。 为了自定义此项，您只需覆盖标准的 scss。 有关示例，请参阅 themes/material/static/horizon/components/_checkboxes.scss
Bootswatch 和 Material Design¶
Bootswatch 是 Bootstrap 的免费主题集合，现在可用于 Horizon。
为了展示如何增强现有的 Bootstrap 主题，Horizon 现在包含一个辅助主题，大致基于 Google 的 Material Design，名为 material。 Bootswatch 的 Paper 是 Material Design 的一个简单的 Bootstrap 实现，并被 material 使用。
Bootswatch 提供了许多其他主题，一旦 Horizon 完全符合主题要求，将允许轻松切换和自定义更暗或更易于访问的体验。
开发提示¶
在为 Horizon 开发新主题时，需要清除每次更改后动态生成的 static 目录并重新启动服务器。 这并不总是理想的。 如果您希望开发并且不想每次都重新启动服务器，建议您将开发环境配置为不以 OFFLINE 模式运行。 简单地验证 local_settings.py 中的以下设置
COMPRESS_OFFLINE = False
COMPRESS_ENABLED = False
