您可以使用一些現成的 CSS 類別來實現常見的功能。
| 類別名稱 | 描述 |
|---|---|
disabled | 游標會變更以通知「停用」，並且不透明度會設定為較低的值。 |
hidden | 將 display 設定為 none。與下方比較 - 類別 hidden 表示元素將不會顯示且不會佔用版面配置中的空間。 |
invisible | 將 visibility 設定為 hidden。與上方比較 - 類別 invisible 表示元素將不會顯示，但仍會佔用版面配置中的空間。 |
transparent | 背景顏色為透明。 |
dimmed | 在您的元素頂部套用深色透明疊加層。請勿在已具有 :after 偽元素的元素上使用。 |
light-dimmed | 在您的元素頂部套用白色透明疊加層。請勿在已具有 :after 偽元素的元素上使用。 |
ellipsis | 當空間不足時，截斷文字並顯示省略符號。 |
ellipsis-2-lines | 當兩行空間不足時，截斷文字並顯示省略符號（僅適用於 Webkit 瀏覽器）。 |
ellipsis-3-lines | 當三行空間不足時，截斷文字並顯示省略符號（僅適用於 Webkit 瀏覽器）。 |
z-top | 將您的元素放置在任何其他元件的頂部，但在彈出視窗、工具提示、通知之後。 |
z-max | 將您的元素放置在任何其他元件的頂部（包括抽屜、模態視窗、通知、版面配置標頭/頁尾，...） |
視窗寬度相關
首先，讓我們定義斷點是什麼
| 視窗大小 | 名稱 | 最小寬度閾值（像素） | 最大寬度閾值（像素） |
|---|---|---|---|
| 超小 | xs | 0px | 599.99px |
| 小 | sm | 600px | 1023.99px |
| 中 | md | 1024px | 1439.99px |
| 大 | lg | 1440px | 1919.99px |
| 超大 | xl | 1920px | 無限大 |
現在進入與視窗寬度相關的 CSS 類別。
| 類別名稱 | 描述 |
|---|---|
xs | 僅在超小視窗上顯示 |
sm | 僅在小視窗上顯示 |
md | 僅在中型視窗上顯示 |
lg | 僅在大型視窗上顯示 |
xl | 僅在超大型視窗上顯示 |
您也可以在小於其中一個尺寸時顯示某些 DOM 元素或元件。大於其中一個尺寸時也是如此。只需附加 lt- 或 gt- 前綴，它們分別來自「小於」和「大於」。範例：lt-md（僅在 xs 和 sm 上顯示），lt-xl（僅在 xs、sm、md 和 lg 視窗上顯示），gt-md（在寬度大於中型的視窗上顯示：lg 和 xl）。
提示
您可以將可見性類別與 inline 類別結合使用，以用於行內區塊。
範例：<span class="gt-sm inline">...</span>
提示
如果您想根據 JavaScript 屬性顯示或隱藏，您可以使用螢幕外掛程式。
平台相關
僅在以下平台上可見
| 類別名稱 | 描述 |
|---|---|
desktop-only | 僅在桌上型電腦上可見 |
mobile-only | 僅在行動裝置上可見 |
native-mobile-only | 僅在 Cordova/Capacitor 上可見 |
cordova-only | 僅在 Cordova 包裝的應用程式上可見 |
capacitor-only | 僅在 Capacitor 包裝的應用程式上可見 |
electron-only | 僅在 Electron 包裝的應用程式上可見 |
touch-only | 僅在支援觸控的平台上可見 |
platform-ios-only | 僅在 iOS 平台上可見 |
platform-android-only | 僅在 Android 平台上可見 |
within-iframe-only | 僅在整個網站位於 IFRAME 標籤下時可見 |
在以下平台上隱藏
| 類別名稱 | 描述 |
|---|---|
desktop-hide | 在桌上型電腦上隱藏 |
mobile-hide | 在行動裝置上隱藏 |
native-mobile-hide | 在 Cordova/Capacitor 上隱藏 |
cordova-hide | 在 Cordova 包裝的應用程式上隱藏 |
capacitor-hide | 在 Capacitor 包裝的應用程式上隱藏 |
electron-hide | 在 Electron 包裝的應用程式上隱藏 |
touch-hide | 在支援觸控的平台上隱藏 |
platform-ios-hide | 在 iOS 平台上隱藏 |
platform-android-hide | 在 Android 平台上隱藏 |
within-iframe-hide | 僅在整個網站位於 IFRAME 標籤下時隱藏 |
提示
根據您的需求，您可能也想查看平台偵測頁面，以了解如何使用 Javascript 達到相同的效果。後者的方法甚至允許您不渲染 DOM 元素或元件。當渲染過程很耗時時，這很有用。
方向相關
| 類別名稱 | 描述 |
|---|---|
orientation-portrait | 僅在螢幕方向為直向時可見 |
orientation-landscape | 僅在螢幕方向為橫向時可見 |
列印相關
| 類別名稱 | 描述 |
|---|---|
print-only | 僅在列印媒體上可見 - 在螢幕媒體上隱藏 |
print-hide | 在螢幕媒體上可見 - 在列印媒體上隱藏 |