跳到主要内容
版本:v6

全局样式表

虽然 Ionic Framework 组件样式是自包含的,但需要包含几个全局样式表才能使用 Ionic 的所有功能。其中一些样式表是让 Ionic Framework 应用正常显示和行为所必需的,另一些则包含可选的实用工具,用于快速样式化你的应用。

可用样式表

必需

以下 CSS 文件必须包含,Ionic Framework 才能正常工作。

core.css

这个文件是让 Ionic 组件正常工作所需的唯一样式表。它包含应用特定的样式,并允许 color 属性在组件之间工作。如果不包含此文件,颜色将不会显示,某些元素可能无法正常显示。

推荐

以下 CSS 文件建议在 Ionic Framework 应用中包含。如果不包含它们,某些元素可能具有不理想的样式。如果在应用之外使用 Ionic Framework 组件,可能不需要这些文件。

structure.css

<html> 应用样式,并将 box-sizing 默认设置为 border-box。确保在移动设备上滚动行为类似原生。

typography.css

更改整个文档的字体系列,并修改标题元素的字体样式。它还会为一些原生文本元素应用定位样式。

normalize.css

使浏览器更一致地渲染所有元素,并符合现代标准。它基于 Normalize.css

可选

以下 CSS 文件集是可选的,如果应用未使用任何相关功能,可以安全地注释掉或移除。

padding.css

添加实用工具类来修改任何元素的内边距或外边距,使用信息请参见 CSS 实用工具

float-elements.css

添加实用工具类,根据断点和方向浮动元素,使用信息请参见 CSS 实用工具

text-alignment.css

添加实用工具类,根据断点对齐元素文本或调整空白,使用信息请参见 CSS 实用工具

text-transformation.css

添加实用工具类,根据断点将元素文本转换为 uppercaselowercasecapitalize,使用信息请参见 CSS 实用工具

flex-utils.css

添加实用工具类来对齐 flex 容器和项目,使用信息请参见 CSS 实用工具

display.css

添加实用工具类,根据断点隐藏任何元素,使用信息请参见 CSS 实用工具

使用方式

请参考 Ionic 包了解如何根据框架包含全局样式表,以及 CSS 实用工具了解如何使用可选的实用工具。