容器類
| 類 | 定義 | |
|---|---|---|
| W3容器 | 集裝箱HTML內容（左增加16像素填充和右） | 嘗試一下 |
| 使用顏色等級 | 嘗試一下 | |
| 作為頭 | 嘗試一下 | |
| 作為頁腳 | 嘗試一下 | |
| 用於W3-leftbar | 嘗試一下 | |
| 用於W3-bottombar | 嘗試一下 | |
| W3節 | 容器HTML內容（增加16像素餘量頂部和底部） | 嘗試一下 |
| W3-徽章 | 圓形徽章8 | 嘗試一下 |
| W3標籤 | 矩形標籤更晚！ | 嘗試一下 |
| W3-UL | 無序列表 | 嘗試一下 |
| W3顯示容器 | 容器為W3-展示- 類 （在左上角，右上角，左下角或右下角，或在容器的中間位置的元件） | 嘗試一下 |
| W3圖像 | 已過時。 使用W3顯示容器代替。 | 嘗試一下 |
| W3-塊引用 | 在2.0中刪除（使用W3-leftbar代替） | 嘗試一下 |
| W3碼 | 代碼容器 | 嘗試一下 |
| W3-進步容器 | 進度條集裝箱 | 嘗試一下 |
課程表
| 類 | 定義 | |
|---|---|---|
| W3表 | 容器HTML表 | 嘗試一下 |
| W3條紋 | 條紋表 | 嘗試一下 |
| W3邊界 | 邊框的表格 | 嘗試一下 |
| W3-鑲上 | 有邊距線 | 嘗試一下 |
| W3中心 | 中心表 | 嘗試一下 |
| W3-hoverable | Hoverable表 | 嘗試一下 |
| W3-表的所有 | 所有屬性設置 | 嘗試一下 |
| 隨著W3條紋，W3-邊框和W3-鑲上 | 嘗試一下 | |
| 隨著彩色頭 | 嘗試一下 | |
| 隨著W3-負責 | 嘗試一下 | |
| 隨著W3-微小 | 嘗試一下 | |
| 隨著W3小 | 嘗試一下 | |
| 隨著W3-大 | 嘗試一下 | |
| 隨著W3-XLARGE | 嘗試一下 | |
| 隨著W3-xxlarge | 嘗試一下 | |
| 隨著W3-xxxlarge | 嘗試一下 | |
| 隨著彩色 | 嘗試一下 | |
| 隨著W3巨無霸 | 嘗試一下 |
卡類
| 類 | 定義 | |
|---|---|---|
| W3卡 | 集裝箱任何HTML內容（有邊框） | 嘗試一下 |
| W3-卡2 | 集裝箱任何HTML內容（2px的邊框陰影） | 嘗試一下 |
| W3卡-4 | 集裝箱任何HTML內容（4PX邊框陰影） | 嘗試一下 |
| W3卡-8 | 集裝箱任何HTML內容（8像素邊框陰影） | 嘗試一下 |
| W3-卡12 | 集裝箱任何HTML內容（12px的邊框陰影） | 嘗試一下 |
| W3-卡16 | 集裝箱任何HTML內容（16px的邊框陰影） | 嘗試一下 |
| W3-卡24 | 集裝箱任何HTML內容（24像素接壤的影子） | 嘗試一下 |
敏感類
| 類 | 定義 | |
|---|---|---|
| W3行 | 容器的流體響應內容一行 | 嘗試一下 |
| W3-行填充 | 行所有列有一個默認的填充 | 嘗試一下 |
| W3-內容 | 容器固定大小的中心內容 | 嘗試一下 |
| W3半 | （1/2）屏幕列集裝箱 | 嘗試一下 |
| W3三分 | 第三屆（1/3）屏幕列集裝箱 | 嘗試一下 |
| W3-twothird | 三分之二（2/3）屏幕列集裝箱 | 嘗試一下 |
| W3季度 | 四分之一（1/4）屏幕列集裝箱 | 嘗試一下 |
| W3-threequarter | 四分之三（3/4）屏幕列集裝箱 | 嘗試一下 |
| W3-COL | 任何HTML內容列容器 | 嘗試一下 |
| L1 - L12 | 響應大小大屏幕 | 嘗試一下 |
| M1 - M12 | 響應大小為中等屏幕 | 嘗試一下 |
| S1 - S12 | 響應大小小屏幕 | 嘗試一下 |
| W3隱藏小 | 在小屏幕上隱藏內容（小於601px） | 嘗試一下 |
| W3隱藏介質 | 隱藏在屏幕中的內容 | 嘗試一下 |
| W3-捉迷藏大 | 在大屏幕上隱藏含量（大於992px） | 嘗試一下 |
導航類
| 類 | 定義 | |
|---|---|---|
| W3-導航欄 | 導航欄 | 嘗試一下 |
| 可折疊導航欄 | 嘗試一下 | |
| W3-topnav | 頂部導航欄 | 嘗試一下 |
| W3-sidenav | 側面導航欄 | 嘗試一下 |
| 側面導航欄覆蓋主要內容 | 嘗試一下 | |
| 側面導航欄覆蓋所有主要內容 | 嘗試一下 | |
| 側面導航欄的轉變主要內容的權利 | 嘗試一下 | |
| 與疊加背景側面導航欄 | 嘗試一下 | |
| W3崩潰 | 全自動響應側邊導航 | 嘗試一下 |
| W3-dropnav | 下拉菜單導航 | 嘗試一下 |
| W3-下拉點擊 | 點擊下拉菜單元素 | 嘗試一下 |
| W3-下拉懸停 | Hoverable下拉元 | 嘗試一下 |
| Hoverable下拉元素（W3-導航欄使用） | 嘗試一下 | |
| Hoverable下拉元素（W3-sidenav使用） | 嘗試一下 | |
| Hoverable下拉元素（W3-topnav使用） | 嘗試一下 | |
| W3-手風琴 | 隱藏和顯示內容的可折疊 | 嘗試一下 |
| 可點擊手風琴和下拉在W3-sidenav使用 | 嘗試一下 | |
| W3-分頁 | 分頁鏈接 | 嘗試一下 |
按鈕類
| 類 | 定義 | |
|---|---|---|
| W3-BTN | 矩形HTML按鈕 | 嘗試一下 |
| 與連鎖反應矩形HTML按鈕 | 嘗試一下 | |
| W3-BTN浮動 | 圓形按鈕浮動 | 嘗試一下 |
| 有連鎖反應的通知浮動按鈕 | 嘗試一下 | |
| W3-BTN-組 | 分組按鈕 | 嘗試一下 |
| W3-BTN塊 | 全寬按鈕（100％） | 嘗試一下 |
輸入類
| 類 | 定義 | |
|---|---|---|
| W3形式 | 同W3-填充 | 嘗試一下 |
| 輸入形式的卡片 | 嘗試一下 | |
| W3-輸入 | 輸入元素 | 嘗試一下 |
| 輸入元素（頂級品牌） | 嘗試一下 | |
| 輸入元素（底部標籤） | 嘗試一下 | |
| W3組 | HTML元素的組 | 嘗試一下 |
| W3標籤 | 輸入標籤 | 嘗試一下 |
| W3-驗證 | 驗證輸入（改變顏色時無效輸入） | 嘗試一下 |
| W3檢查 | 複選框，輸入類型 | 嘗試一下 |
| W3-電台 | 無線輸入類型 | 嘗試一下 |
| W3選 | 輸入選擇元素 | 嘗試一下 |
| W3-動畫輸入 | 動畫輸入的寬度為100％ | 嘗試一下 |
莫代爾類
| 類 | 定義 | |
|---|---|---|
| W3模態 | 集裝箱多式聯運 | 嘗試一下 |
| W3模態內容 | 模態彈出元素 | 嘗試一下 |
| W3-提示 | 提示元素 | 嘗試一下 |
| W3文本 | 提示文本 | 嘗試一下 |
| 內嵌工具提示 | 嘗試一下 |
動畫類
| 類 | 定義 | |
|---|---|---|
| W3-動畫頂 | 動畫從頂部-300px一個元素為0px | 嘗試一下 |
| W3-動畫左 | 動畫由左-300px元素為0px | 嘗試一下 |
| W3-動畫底 | 動畫從底部-300px一個元素為0px | 嘗試一下 |
| W3-動畫右 | 動畫由右-300px一個元素為0px | 嘗試一下 |
| W3-動畫，不透明度 | 以動畫元素的不透明度從0到1 | 嘗試一下 |
| W3-動畫變焦 | 動畫元素從0到在尺寸100％ | 嘗試一下 |
| W3-動畫衰落 | 動畫從0到1和1比0元素的不透明度（淡入和淡出） | 嘗試一下 |
| W3旋 | 旋轉圖標360度 | 嘗試一下 |
| 旋轉任何元素360度 | 嘗試一下 | |
| W3-動畫輸入 | 動畫輸入欄的寬度為100％ | 嘗試一下 |
實用工具類
| 類 | 定義 | |
|---|---|---|
| W3-微小 | 指定的10個像素的字體大小 | 嘗試一下 |
| W3小 | 指定12像素的字體大小 | 嘗試一下 |
| W3-大 | 指定的20像素的字體大小 | 嘗試一下 |
| W3-XLARGE | 指定24像素的字體大小 | 嘗試一下 |
| W3-xxlarge | 指定的32像素的字體大小 | 嘗試一下 |
| W3-xxxlarge | 指定的48像素的字體大小 | 嘗試一下 |
| W3巨無霸 | 指定64像素的字體大小 | 嘗試一下 |
| W3-苗條 | 指定文本苗條 | 嘗試一下 |
| W3寬 | 指定一個更廣泛的文本 | 嘗試一下 |
| W3垂直 | 指定垂直文本 | 嘗試一下 |
| W3頂 | 在頁面頂部的固定內容 | 嘗試一下 |
| W3中心 | 內容為中心 | 嘗試一下 |
| W3圈 | 內容盤旋 | 嘗試一下 |
| W3隱藏 | 隱藏的內容（顯示：無） | 嘗試一下 |
| W3秀 | 顯示內容（顯示：塊） | 嘗試一下 |
| W3秀塊 | W3的秀別名（顯示：塊） | 嘗試一下 |
| W3秀-inline-block的 | 展會內容inline-block的（顯示：inline-block的） | 嘗試一下 |
| W3隱藏小 | 在小屏幕上隱藏內容（小於601px） | 嘗試一下 |
| W3隱藏介質 | 隱藏在屏幕中的內容 | 嘗試一下 |
| W3-捉迷藏大 | 在大屏幕上隱藏含量（大於992px） | 嘗試一下 |
| W3左 | 左對齊內容 | 嘗試一下 |
| W3-權 | 右對齊內容 | 嘗試一下 |
| W3左對齊 | 左對齊文本 | 嘗試一下 |
| W3-右對齊 | 右對齊文本 | 嘗試一下 |
| W3對齊 | 左，右對齊文本 | 嘗試一下 |
| W3顯示容器 | 容器W3-顯示- 類 （位置：相對） | 嘗試一下 |
| W3-顯示，左上 | 在左上角的位置內容 | 嘗試一下 |
| W3-顯示，topright | 在右上角的位置內容 | 嘗試一下 |
| W3-顯示，BOTTOMLEFT | 在左下角位置的內容 | 嘗試一下 |
| W3-顯示，bottomright | 在右下角的位置內容 | 嘗試一下 |
| W3顯示中間 | 在中間位置的內容（水平和垂直） | 嘗試一下 |
| W3-顯示，topmiddle | 在中間位置的內容在元件的頂部 | 嘗試一下 |
| W3-顯示，bottommiddle | 在中間位置的內容在元件的底部 | 嘗試一下 |
| W3襯線 | 更改字體襯線 | 嘗試一下 |
| W3-透明度 | 增加不透明度為文本 | 嘗試一下 |
| 增加透明度的任何元素 | 嘗試一下 | |
| W3-覆蓋 | 創建一個疊加效應 | 嘗試一下 |
| W3-文字陰影 | 添加陰影文本 | 嘗試一下 |
Color類
| 類 | 定義 | |
|---|---|---|
| W3紅 | 背景色紅 | 嘗試一下 |
| W3粉色 | 背景顏色粉紅 | 嘗試一下 |
| W3紫色 | 背景顏色紫 | 嘗試一下 |
| W3-深紫色 | 背景顏色深紫 | 嘗試一下 |
| W3-靛藍 | 背景顏色靛藍 | 嘗試一下 |
| W3藍色 | 背景顏色藍色 | 嘗試一下 |
| W3-淡藍色的 | 背景顏色淡藍色 | 嘗試一下 |
| W3-青 | 背景顏色青 | 嘗試一下 |
| W3-AQUA | 背景顏色AQUA | 嘗試一下 |
| W3-水鴨 | 背景顏色水鴨 | 嘗試一下 |
| W3綠色 | 背景顏色綠色 | 嘗試一下 |
| W3-淺綠 | 背景顏色淺綠色 | 嘗試一下 |
| W3石灰 | 背景顏色石灰 | 嘗試一下 |
| W3砂 | 背景顏色沙 | 嘗試一下 |
| W3-卡其 | 背景色卡其色 | 嘗試一下 |
| W3黃色 | 背景色黃 | 嘗試一下 |
| W3-琥珀 | 背景顏色琥珀色 | 嘗試一下 |
| W3橙色 | 背景顏色為橙色 | 嘗試一下 |
| W3深橙色 | 背景顏色深橙色 | 嘗試一下 |
| W3-藍灰色 | 背景顏色青灰色 | 嘗試一下 |
| W3褐色 | 背景顏色棕 | 嘗試一下 |
| W3-淺灰色 | 背景顏色淺灰色 | 嘗試一下 |
| W3灰色 | 背景顏色灰色 | 嘗試一下 |
| W3-深灰色 | 背景顏色深灰色 | 嘗試一下 |
| W3黑 | 背景顏色黑色 | 嘗試一下 |
| W3-淡紅色 | 背景顏色為淡紅色 | 嘗試一下 |
| W3-淺黃色 | 背景顏色淡黃色 | 嘗試一下 |
| W3-淡綠色 | 背景顏色淡綠色 | 嘗試一下 |
| W3-淡藍色 | 背景顏色淡藍色 | 嘗試一下 |
| W3透明 | 透明背景顏色 |
哈弗類
以上所有的顏色，也可以用作懸停類：
| 類 | 定義 | |
|---|---|---|
| W3-懸停白 | 懸停顏色白 | 嘗試一下 |
| W3-懸停黑 | 懸停顏色黑色 | 嘗試一下 |
| W3-懸停紅 | 哈弗紅色 | 嘗試一下 |
| W3-懸停藍 | 懸停顏色藍色 | 嘗試一下 |
| W3-懸停綠色 | 哈弗色綠 | 嘗試一下 |
| W3-懸停AQUA | 懸停顏色AQUA | 嘗試一下 |
| W3-懸停橙 | 哈弗橙色 | 嘗試一下 |
| W3-懸停灰色 | 哈弗灰色 | 嘗試一下 |
| W3-懸停淡綠色 | 懸停顏色淡綠色 | 嘗試一下 |
| W3-懸停文字紅 | 將鼠標懸停文本顏色為紅色 | 嘗試一下 |
| W3-懸停文字紅 | 將鼠標懸停文字顏色為藍色 | 嘗試一下 |
| W3-懸停文字綠色 | 將鼠標懸停文本顏色為綠色 | 嘗試一下 |
| W3-懸停文字紫色 | 懸停文本顏色紫色 | 嘗試一下 |
| W3-懸停border- 色 | 哈弗邊框顏色 | 嘗試一下 |
| W3-懸停透明度 | 增加透明度懸停元素（60％不透明度） | 嘗試一下 |
| W3-懸停陰影 | 添加陰影，懸停元素 | 嘗試一下 |
| W3-懸停無 | 移除元素懸停效果 | 嘗試一下 |
圓形類
| 類 | 定義 | |
|---|---|---|
| W3輪 | 圓形元素（邊界半徑）4PX | 嘗試一下 |
| W3輪小 | 圓形元素（邊界半徑）2px的 | 嘗試一下 |
| W3輪介質 | 圓形元素（邊界半徑）4PX | 嘗試一下 |
| W3-圓大 | 圓形元素（邊界半徑）8像素 | 嘗試一下 |
| W3-圓XLARGE | 圓形元素（邊界半徑）16px的 | 嘗試一下 |
| W3-圓xxlarge | 圓形元素（邊界半徑）32PX | 嘗試一下 |
| W3輪巨無霸 | 圓形元素（邊界半徑）64PX | 嘗試一下 |
填充類
| 類 | 定義 | |
|---|---|---|
| W3-填充0 | 刪除所有填充從要素 | 嘗試一下 |
| W3-填充 | 填充8像素的頂部和底部，和16像素左右。 | 嘗試一下 |
| W3-填充纖巧 | 填充2px的頂部和底部，和4像素左邊和右邊。 | 嘗試一下 |
| W3-填充小 | 填充4像素的頂部和底部，和8像素左邊和右邊。 | 嘗試一下 |
| W3-填充介質 | 填充8像素的頂部和底部，和16像素左右。 | 嘗試一下 |
| W3-填充大型 | 填充12px的頂部和底部，和24像素左右。 | 嘗試一下 |
| W3-填充，XLARGE | 填充16px的頂部和底部，以及32PX左邊和右邊。 | 嘗試一下 |
| W3-填充，xxlarge | 填充24像素的頂部和底部，和48像素的左邊和右邊。 | 嘗試一下 |
| W3-填充巨無霸 | 填充32PX頂部和底部，以及64PX左邊和右邊。 | 嘗試一下 |
| W3-填充頂 | 填充頂部加上了8px | 嘗試一下 |
| W3-填充右 | 填充右16px的 | 嘗試一下 |
| W3-填充底 | 填充底部加上了8px | 嘗試一下 |
| W3-填充左 | 填充左16px的 | 嘗試一下 |
| W3-填充-HOR-4 | 填充4像素的頂部和底部 | 嘗試一下 |
| W3-填充-HOR-8 | 填充8像素的頂部和底部 | 嘗試一下 |
| W3-填充-HOR-12 | 填充12px的頂部和底部 | 嘗試一下 |
| W3-填充-HOR-16 | 填充16px的頂部和底部 | 嘗試一下 |
| W3-填充-HOR-24 | 填充24像素的頂部和底部 | 嘗試一下 |
| W3-填充-HOR-32 | 填充32PX頂部和底部 | 嘗試一下 |
| W3-填充-HOR-48 | 填充48像素的頂部和底部 | 嘗試一下 |
| W3-填充-HOR-64 | 填充64PX頂部和底部 | 嘗試一下 |
| W3-填充-HOR-128 | 填充128PX頂部和底部 | 嘗試一下 |
| W3-填充-VER-4 | 填充4PX左右。 | 嘗試一下 |
| W3-填充-VER-8 | 填充8像素左右。 | 嘗試一下 |
| W3-填充-VER-16 | 填充16像素左右。 | 嘗試一下 |
| W3-填充-VER-24 | 填充24px的左，右。 | 嘗試一下 |
| W3-填充-VER-32 | 填充32PX左右。 | 嘗試一下 |
| W3-填充-VER-48 | 填充48像素左右。 | 嘗試一下 |
| W3-填充-VER-64 | 填充64PX左右。 | 嘗試一下 |
保證金類
| 類 | 定義 | |
|---|---|---|
| W3-保證金0 | 刪除所有邊距元素 | 嘗試一下 |
| W3利潤率 | 保證金16px的 | 嘗試一下 |
| W3-的margin-top | 距頂部16像素 | 嘗試一下 |
| W3-保證金權 | 保證金右16px的 | 嘗試一下 |
| W3利潤率底 | 保證金底部16px的 | 嘗試一下 |
| W3-利潤率左 | 距左16px的 | 嘗試一下 |
邊界類
| 類 | 定義 | |
|---|---|---|
| W3邊界 | 邊框（上，右，下，左） | 嘗試一下 |
| W3-邊框頂部 | 邊框頂部 | 嘗試一下 |
| W3-右邊框 | 邊框右側 | 嘗試一下 |
| W3-邊框底部 | 邊框底部 | 嘗試一下 |
| W3-左邊框 | 左邊框 | 嘗試一下 |
| W3-邊界0 | 刪除所有邊界 | 嘗試一下 |
| W3-border- 色 | 顯示指定顏色的任何確定的邊界（如紅色等） | 嘗試一下 |
| W3-bottombar | 增加了一個厚厚的底部邊框（巴）到一個元素 | 嘗試一下 |
| W3-leftbar | 增加了一個厚厚的左邊界（巴）到一個元素 | 嘗試一下 |
| W3-rightbar | 增加了一個厚厚的右邊框（欄）到一個元素 | 嘗試一下 |
| W3-頂欄 | 增加了一個厚厚的頂部邊框（巴）到一個元素 | 嘗試一下 |
| W3-懸停border- 色 | Hoverable邊框顏色 | 嘗試一下 |