W3.CSS 參考
W3.CSS 類
容器類
| 類 | 定義 | |
|---|---|---|
| w3-container | HTML 容器，左右內邊距為 16px | 試一試 |
| 用作標題 | 試一試 | |
| 用作頁尾 | 試一試 | |
| w3-panel | HTML 容器，左右內邊距為 16px，上下外邊距為 16px | 試一試 |
| 用於顯示註釋 | 試一試 | |
| 用於顯示引言 | 試一試 | |
| w3-badge | 圓形徽章 | 試一試 |
| w3-tag | 矩形標籤 | 試一試 |
| w3-ul | 無序列表 | 試一試 |
| w3-display-container | w3-display-*類的容器（允許定位容器內的元素） | 試一試 |
| w3-block | 可用於定義任何元素全寬的類 | 試一試 |
| w3-code | 程式碼容器 | 試一試 |
| w3-codespan | 內聯程式碼容器（用於程式碼片段） | 試一試 |
| w3-content | 固定尺寸居中內容的容器 | 試一試 |
| w3-auto | 響應式尺寸居中內容的容器 | 試一試 |
| w3-stretch | 移除左右外邊距的類（尤其適用於拉伸帶內邊距的行 (w3-row-padding)） | 試一試 |
表格類
| 類 | 定義 | |
|---|---|---|
| w3-table | HTML 表格的容器 | 試一試 |
| w3-striped | 條紋表格 | 試一試 |
| w3-border | 帶邊框的表格 | 試一試 |
| w3-bordered | 帶邊框線 | 試一試 |
| w3-centered | 居中表格 | 試一試 |
| w3-hoverable | 滑鼠懸停表格 | 試一試 |
| w3-table-all | 所有屬性設定 | 試一試 |
| 帶有 w3-striped、w3-border 和 w3-bordered | 試一試 | |
| 帶有彩色表頭 | 試一試 | |
| 帶有 w3-responsive | 試一試 | |
| 帶有 w3-tiny | 試一試 | |
| 帶有 w3-small | 試一試 | |
| 帶有 w3-large | 試一試 | |
| 帶有 w3-xlarge | 試一試 | |
| 帶有 w3-xxlarge | 試一試 | |
| 帶有 w3-xxxlarge | 試一試 | |
| 帶有顏色 | 試一試 | |
| 帶有 w3-jumbo | 試一試 | |
| w3-responsive | 建立響應式表格 | 試一試 |
卡片類
| 類 | 定義 | |
|---|---|---|
| w3-card | 同 w3-card-2 | 試一試 |
| w3-card-2 | 任何 HTML 內容的容器（2px 邊框陰影） | 試一試 |
| w3-card-4 | 任何 HTML 內容的容器（4px 邊框陰影） | 試一試 |
響應式類
| 類 | 定義 | |
|---|---|---|
| w3-row | 流式響應式內容單行的容器 | 試一試 |
| w3-row-padding | 所有列都有預設內邊距的行 | 試一試 |
| w3-auto | 響應式尺寸居中內容的容器 | 試一試 |
| w3-stretch | 移除左右外邊距的類 | 試一試 |
| w3-half | 半屏（1/2）列容器 | 試一試 |
| w3-third | 三分之一屏（1/3）列容器 | 試一試 |
| w3-twothird | 三分之二屏（2/3）列容器 | 試一試 |
| w3-quarter | 四分之一屏（1/4）列容器 | 試一試 |
| w3-threequarter | 四分之三分屏（3/4）列容器 | 試一試 |
| w3-col | 任何 HTML 內容的列容器 | 試一試 |
| w3-rest | 佔據剩餘列寬 | 試一試 |
| l1 - l12 | 大螢幕的響應式尺寸 | 試一試 |
| m1 - m12 | 中等螢幕的響應式尺寸 | 試一試 |
| s1 - s12 | 小螢幕的響應式尺寸 | 試一試 |
| w3-hide-small | 在小螢幕（小於 601px）上隱藏內容 | 試一試 |
| w3-hide-medium | 在中等螢幕上隱藏內容 | 試一試 |
| w3-hide-large | 在大螢幕（大於 992px）上隱藏內容 | 試一試 |
| w3-image | 響應式圖片 | 試一試 |
| w3-mobile | 為任何元素新增移動優先的響應式。 在移動裝置上將元素顯示為塊級元素。 |
試一試 |
佈局類
| 類 | 定義 | |
|---|---|---|
| w3-cell-row | 佈局列（單元格）的容器。 | 試一試 |
| w3-cell | 佈局列（單元格）。 | 試一試 |
| w3-cell-top | 將內容對齊到列（單元格）的頂部。 | 試一試 |
| w3-cell-middle | 將內容對齊到列（單元格）的垂直中間。 | 試一試 |
| w3-cell-bottom | 將內容對齊到列（單元格）的底部。 | 試一試 |
條類 - 導航
| 類 | 定義 | |
|---|---|---|
| w3-bar | 橫向條 | 試一試 |
| w3-bar-block | 縱向條 | 試一試 |
| w3-bar-item | 為條目提供通用樣式 | 試一試 |
| w3-sidebar | 側邊欄 | 試一試 |
| 側邊欄可以包含所有型別的內容 | 試一試 | |
| 覆蓋主內容的側邊欄 | 試一試 | |
| 覆蓋所有主內容的側邊欄 | 試一試 | |
| 將主內容向右移動的側邊欄 | 試一試 | |
| 帶覆蓋背景的側邊欄 | 試一試 | |
| 右側的側邊欄 | 試一試 | |
| w3-collapse | 與 w3-sidebar 一起使用，建立完全自動響應式的側邊導航。要使此類生效，頁面內容必須包含在“w3-main”類中 | 試一試 |
| w3-main | 使用 w3-collapse 類建立響應式側邊導航時，頁面內容的容器 | 試一試 |
| 完全自動的右側響應式側邊導航 | 試一試 |
下拉選單類
| w3-dropdown-click | 可點選的下拉選單元素 | 試一試 |
| w3-dropdown-hover | 可懸停的下拉選單元素 | 試一試 |
| 可懸停的下拉選單元素（在 w3-bar 中使用） | 試一試 | |
| 可懸停的下拉選單元素（在 w3-bar-block 中使用） | 試一試 | |
| 可懸停的下拉選單元素（在 w3-sidebar 中使用） | 試一試 |
按鈕類
| 類 | 定義 | |
|---|---|---|
| w3-button | 矩形按鈕，懸停時有灰色背景色 | 試一試 |
| w3-btn | 矩形按鈕，懸停時有陰影 | 試一試 |
| w3-circle | 可用於建立圓形按鈕 | 試一試 |
| w3-ripple | 帶漣漪效果的矩形按鈕 | 試一試 |
| 帶漣漪效果的圓形浮動按鈕 | 試一試 | |
| w3-bar | 可用於將元素（如按鈕）分組到水平條中 | 試一試 |
| w3-block | 可用於定義全寬 w3-button 的類 | 試一試 |
| 全寬 w3-btn | 試一試 | |
| 全寬圓形按鈕 | 試一試 |
輸入類
| 類 | 定義 | |
|---|---|---|
| w3-input | 輸入元素 | 試一試 |
| 卡片式輸入表單 | 試一試 | |
| 輸入元素（頂部標籤） | 試一試 | |
| 輸入元素（底部標籤） | 試一試 | |
| w3-check | 複選框輸入型別 | 試一試 |
| w3-radio | 單選框輸入型別 | 試一試 |
| w3-select | 輸入選擇元素 | 試一試 |
| w3-animate-input | 將輸入的寬度動畫化至 100% | 試一試 |
模態框類
| 類 | 定義 | |
|---|---|---|
| w3-modal | 模態框容器 | 試一試 |
| w3-modal-content | 模態框彈出元素 | 試一試 |
| w3-tooltip | 工具提示元素 | 試一試 |
| w3-text | 工具提示文字 | 試一試 |
動畫類
| 類 | 定義 | |
|---|---|---|
| w3-animate-top | 將元素從頂部 -300px 動畫到 0px | 試一試 |
| w3-animate-left | 將元素從左側 -300px 動畫到 0px | 試一試 |
| w3-animate-bottom | 將元素從底部 -300px 動畫到 0px | 試一試 |
| w3-animate-right | 將元素從右側 -300px 動畫到 0px | 試一試 |
| w3-animate-opacity | 將元素的透明度從 0 動畫到 1 | 試一試 |
| w3-animate-zoom | 將元素的大小從 0% 動畫到 100% | 試一試 |
| w3-animate-fading | 將元素的透明度從 0 動畫到 1，再從 1 動畫到 0（淡入淡出） | 試一試 |
| w3-spin | 使圖示旋轉 360 度 | 試一試 |
| 使任何元素旋轉 360 度 | 試一試 | |
| w3-animate-input | 將輸入欄位的寬度動畫化至 100% | 試一試 |
字型和文字類
| 類 | 定義 | |
|---|---|---|
| w3-tiny | 指定字型大小為 10 畫素 | 試一試 |
| w3-small | 指定字型大小為 12 畫素 | 試一試 |
| w3-large | 指定字型大小為 18 畫素 | 試一試 |
| w3-xlarge | 指定字型大小為 24 畫素 | 試一試 |
| w3-xxlarge | 指定字型大小為 32 畫素 | 試一試 |
| w3-xxxlarge | 指定字型大小為 48 畫素 | 試一試 |
| w3-jumbo | 指定字型大小為 64 畫素 | 試一試 |
| w3-wide | 指定更寬的文字 | 試一試 |
| w3-serif | 將字型更改為襯線體 | 試一試 |
| w3-sans-serif | 將字型更改為無襯線體 | 試一試 |
| w3-cursive | 將字型更改為手寫體 | 試一試 |
| w3-monospace | 將字型更改為等寬字型 | 試一試 |
顯示類
| 類 | 定義 | |
|---|---|---|
| w3-center | 居中內容 | 試一試 |
| w3-left | 將元素浮動到左側 (float: left) | 試一試 |
| w3-right | 將元素浮動到右側 (float: right) | 試一試 |
| w3-left-align | 左對齊文字 | 試一試 |
| w3-right-align | 右對齊文字 | 試一試 |
| w3-justify | 兩端對齊文字 | 試一試 |
| w3-block | 可用於定義任何元素全寬的類 | 試一試 |
| w3-circle | 圓形內容 | 試一試 |
| w3-hide | 隱藏內容 (display:none) | 試一試 |
| w3-show | 顯示內容 (display:block) | 試一試 |
| w3-show-block | w3-show 的別名 (display:block) | 試一試 |
| w3-show-inline-block | 將內容顯示為內聯塊 (display:inline-block) | 試一試 |
| w3-top | 固定頁面頂部的元素 | 試一試 |
| w3-bottom | 固定頁面底部的元素 | 試一試 |
| w3-display-container | w3-display-類的容器 (position: relative) | 試一試 |
| w3-display-topleft | 將內容顯示在 w3-display-容器的左上角 | 試一試 |
| w3-display-topright | 將內容顯示在 w3-display-容器的右上角 | 試一試 |
| w3-display-bottomleft | 將內容顯示在 w3-display-容器的左下角 | 試一試 |
| w3-display-bottomright | 將內容顯示在 w3-display-容器的右下角 | 試一試 |
| w3-display-left | 將內容顯示在 w3-display-容器的左側（中間偏左） | 試一試 |
| w3-display-right | 將內容顯示在 w3-display-容器的右側（中間偏右） | 試一試 |
| w3-display-middle | 將內容顯示在 w3-display-容器的中間（居中） | 試一試 |
| w3-display-topmiddle | 將內容顯示在 w3-display-容器的頂部中間 | 試一試 |
| w3-display-bottommiddle | 將內容顯示在 w3-display-容器的底部中間 | 試一試 |
| w3-display-position | 將內容顯示在 w3-display-容器中的指定位置 | 試一試 |
| w3-display-hover | 在 w3-display-容器內顯示懸停內容 | 試一試 |
效果類
| 類 | 定義 | |
|---|---|---|
| w3-opacity | 為元素新增不透明度/透明度（opacity: 0.6） | 試一試 |
| 為文字新增不透明度/透明度 | 試一試 | |
| w3-opacity-off | 關閉不透明度/透明度（opacity: 1） | 試一試 |
| w3-opacity-min | 為元素新增不透明度/透明度（opacity: 0.75） | 試一試 |
| w3-opacity-max | 為元素新增不透明度/透明度（opacity: 0.25） | 試一試 |
| w3-grayscale-min | 為元素新增灰度效果（grayscale: 50%） | 試一試 |
| w3-grayscale | 為元素新增灰度效果（grayscale: 75%） | 試一試 |
| w3-grayscale-max | 為元素新增灰度效果（grayscale: 100%） | 試一試 |
| w3-sepia-min | 為元素新增棕褐色效果（sepia: 50%） | 試一試 |
| w3-sepia | 為元素新增棕褐色效果（sepia: 75%） | 試一試 |
| w3-sepia-max | 為元素新增棕褐色效果（sepia: 100%） | 試一試 |
| w3-overlay | 建立覆蓋效果 | 試一試 |
背景顏色類
| 類 | 定義 | |
|---|---|---|
| w3-red | 背景顏色紅色 | 試一試 |
| w3-pink | 背景顏色粉色 | 試一試 |
| w3-purple | 背景顏色紫色 | 試一試 |
| w3-deep-purple | 背景顏色深紫色 | 試一試 |
| w3-indigo | 背景顏色靛藍色 | 試一試 |
| w3-blue | 背景顏色藍色 | 試一試 |
| w3-light-blue | 背景顏色淺藍色 | 試一試 |
| w3-cyan | 背景顏色青色 | 試一試 |
| w3-aqua | 背景顏色水綠色 | 試一試 |
| w3-teal | 背景顏色青綠色 | 試一試 |
| w3-green | 背景顏色綠色 | 試一試 |
| w3-light-green | 背景顏色淺綠色 | 試一試 |
| w3-lime | 背景顏色亮綠色 | 試一試 |
| w3-sand | 背景顏色沙色 | 試一試 |
| w3-khaki | 背景顏色卡其色 | 試一試 |
| w3-yellow | 背景顏色黃色 | 試一試 |
| w3-amber | 背景顏色琥珀色 | 試一試 |
| w3-orange | 背景顏色橙色 | 試一試 |
| w3-deep-orange | 背景顏色深橙色 | 試一試 |
| w3-blue-grey | 背景顏色藍灰色 | 試一試 |
| w3-brown | 背景顏色棕色 | 試一試 |
| w3-light-grey | 背景顏色淺灰色 | 試一試 |
| w3-grey | 背景顏色灰色 | 試一試 |
| w3-dark-grey | 背景顏色深灰色 | 試一試 |
| w3-black | 背景顏色黑色 | 試一試 |
| w3-pale-red | 背景顏色淡紅色 | 試一試 |
| w3-pale-yellow | 背景顏色淡黃色 | 試一試 |
| w3-pale-green | 背景顏色淡綠色 | 試一試 |
| w3-pale-blue | 背景顏色淡藍色 | 試一試 |
| w3-transparent | 透明背景顏色 |
懸停顏色類
上面的顏色也可以用作懸停類
| 類 | 定義 | |
|---|---|---|
| w3-hover-white | 懸停顏色白色 | 試一試 |
| w3-hover-black | 懸停顏色黑色 | 試一試 |
| w3-hover-red | 懸停顏色紅色 | 試一試 |
| w3-hover-blue | 懸停顏色藍色 | 試一試 |
| w3-hover-green | 懸停顏色綠色 | 試一試 |
| w3-hover-aqua | 懸停顏色水綠色 | 試一試 |
| w3-hover-orange | 懸停顏色橙色 | 試一試 |
| w3-hover-grey | 懸停顏色灰色 | 試一試 |
| w3-hover-pale-green | 懸停顏色淡綠色 | 試一試 |
文字顏色類
| 類 | 定義 | |
|---|---|---|
| w3-text-red | 文字顏色紅色 | 試一試 |
| w3-text-green | 文字顏色綠色 | 試一試 |
| w3-text-blue | 文字顏色藍色 | 試一試 |
| w3-text-yellow | 文字顏色黃色 | 試一試 |
| w3-text-light-grey | 文字顏色淺灰色 | 試一試 |
| w3-text-grey | 文字顏色灰色 | 試一試 |
| w3-text-dark-grey | 文字顏色深灰色 | 試一試 |
| w3-text-black | 文字顏色黑色 | 試一試 |
| w3-text-white | 文字顏色白色 | 試一試 |
| w3-text-pink | 文字顏色粉色 | 試一試 |
| w3-text-purple | 文字顏色紫色 | 試一試 |
| w3-text-teal | 文字顏色青綠色 | 試一試 |
| w3-text-light-green | 文字顏色淺綠色 | 試一試 |
| w3-text-lime | 文字顏色亮綠色 | 試一試 |
| w3-text-deep-purple | 文字顏色深紫色 | 試一試 |
| w3-text-indigo | 文字顏色靛藍色 | 試一試 |
| w3-text-light-blue | 文字顏色淺藍色 | 試一試 |
| w3-text-blue-grey | 文字顏色藍灰色 | 試一試 |
| w3-text-cyan | 文字顏色青色 | 試一試 |
| w3-text-aqua | 文字顏色水綠色 | 試一試 |
| w3-text-amber | 文字顏色琥珀色 | 試一試 |
| w3-text-orange | 文字顏色橙色 | 試一試 |
| w3-text-deep-orange | 文字顏色深橙色 | 試一試 |
| w3-text-sand | 文字顏色沙色 | 試一試 |
| w3-text-khaki | 文字顏色卡其色 | 試一試 |
| w3-text-brown | 文字顏色棕色 | 試一試 |
懸停文字類
上面的文字類也可以用作懸停類
| 類 | 定義 | |
|---|---|---|
| w3-hover-text-red | 懸停文字顏色紅色 | 試一試 |
| w3-hover-text-green | 懸停文字顏色綠色 | 試一試 |
| w3-hover-text-blue | 懸停文字顏色藍色 | 試一試 |
| w3-hover-text-yellow | 懸停文字顏色黃色 | 試一試 |
其他懸停類
| 類 | 定義 | |
|---|---|---|
| w3-hover-border-color | 懸停邊框顏色 | 試一試 |
| w3-hover-opacity | 懸停時為元素新增透明度（opacity: 0.6） | 試一試 |
| w3-hover-opacity-off | 懸停時移除元素的透明度（100% 透明度） | 試一試 |
| w3-hover-shadow | 懸停時為元素新增陰影 | 試一試 |
| w3-hover-grayscale | 為元素新增黑白（100% 灰度）效果 | 試一試 |
| w3-hover-sepia | 懸停時為元素新增棕褐色效果 | 試一試 |
| w3-hover-none | 移除元素的懸停效果 | 試一試 |
圓角類
| 類 | 定義 | |
|---|---|---|
| w3-round | 元素圓角（border-radius）4px | 試一試 |
| w3-round-small | 元素圓角（border-radius）2px | 試一試 |
| w3-round-medium | 元素圓角（border-radius）4px | 試一試 |
| w3-round-large | 元素圓角（border-radius）8px | 試一試 |
| w3-round-xlarge | 元素圓角（border-radius）16px | 試一試 |
| w3-round-xxlarge | 元素圓角（border-radius）32px | 試一試 |
內邊距類
| 類 | 定義 | |
|---|---|---|
| w3-padding-small | 上下內邊距 4px，左右內邊距 8px。 | 試一試 |
| w3-padding | 上下內邊距 8px，左右內邊距 16px。 | 試一試 |
| w3-padding-large | 上下內邊距 12px，左右內邊距 24px。 | 試一試 |
| w3-padding-16 | 上下內邊距 16px | 試一試 |
| w3-padding-24 | 上下內邊距 24px | 試一試 |
| w3-padding-32 | 上下內邊距 32px | 試一試 |
| w3-padding-48 | 上下內邊距 48px | 試一試 |
| w3-padding-64 | 上下內邊距 64px | 試一試 |
| w3-padding-top-64 | 頂部內邊距 64px | 試一試 |
| w3-padding-top-48 | 頂部內邊距 48px | 試一試 |
| w3-padding-top-32 | 頂部內邊距 32px | 試一試 |
| w3-padding-top-24 | 頂部內邊距 24px | 試一試 |
外邊距類
| 類 | 定義 | |
|---|---|---|
| w3-margin | 為元素新增 16px 外邊距 | 試一試 |
| w3-margin-top | 為元素新增 16px 頂部外邊距 | 試一試 |
| w3-margin-right | 為元素新增 16px 右側外邊距 | 試一試 |
| w3-margin-bottom | 為元素新增 16px 底部外邊距 | 試一試 |
| w3-margin-left | 為元素新增 16px 左側外邊距 | 試一試 |
| w3-section | 為元素新增 16px 的上下外邊距 | 試一試 |
邊框類
| 類 | 定義 | |
|---|---|---|
| w3-border | 邊框（頂部、右側、底部、左側） | 試一試 |
| w3-border-top | 頂部邊框 | 試一試 |
| w3-border-right | 右側邊框 | 試一試 |
| w3-border-bottom | 底部邊框 | 試一試 |
| w3-border-left | 左側邊框 | 試一試 |
| w3-border-0 | 移除所有邊框 | 試一試 |
| w3-border-color | 以指定顏色（如紅色等）顯示任何定義的邊框 | 試一試 |
| w3-bottombar | 為元素新增粗的底部邊框（條） | 試一試 |
| w3-leftbar | 為元素新增粗的左側邊框（條） | 試一試 |
| w3-rightbar | 為元素新增粗的右側邊框（條） | 試一試 |
| w3-topbar | 為元素新增粗的頂部邊框（條） | 試一試 |
| w3-hover-border-color | 懸停邊框顏色 | 試一試 |
