容器类
| 类 | 定义 | |
|---|---|---|
| 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边框颜色 | 尝试一下 |