全域樣式表
雖然 Ionic Framework 元件樣式是獨立的,但為了使用 Ionic 的所有功能,應該包含幾個全域樣式表。某些樣式表是為了讓 Ionic Framework 應用程式正常顯示和運作所必需的,而其他的樣式表則包含可快速設定應用程式樣式的選擇性實用工具。
可用
必要
必須包含下列 CSS 檔案,Ionic Framework 才能正常運作。
core.css
此檔案是 Ionic 元件正常運作唯一必要的樣式表。它包含應用程式特定的樣式,並允許 color
屬性在元件之間運作。如果未包含此檔案,則顏色不會顯示,且某些元素可能無法正常顯示。
建議
建議在 Ionic Framework 應用程式中包含下列 CSS 檔案。如果未包含這些檔案,某些元素可能會出現不想要的樣式。如果在應用程式之外使用 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
新增實用類別,以根據斷點將元素的文字轉換為 uppercase
、lowercase
或 capitalize
,請參閱CSS 實用工具以取得使用資訊。
flex-utils.css
新增實用類別,以對齊彈性容器和項目,請參閱CSS 實用工具以取得使用資訊。
display.css
新增實用類別,以根據斷點隱藏任何元素,請參閱CSS 實用工具以取得使用資訊。