jQuery CSS 类
jQuery Mobile 提供了丰富的 CSS 类，用于快速设置不同页面元素和组件的样式。
以下列表汇总了常见且通用的 CSS 样式类，方便开发时快速查阅。
全局类
下面这些全局类可以应用在 jQuery Mobile 小部件中，例如按钮、工具栏、面板、表格、列表等常见元素。
| Class | 描述 |
|---|---|
| ui-corner-all | 为元素添加圆角效果 |
| ui-shadow | 为元素添加阴影效果 |
| ui-overlay-shadow | 为元素添加多层阴影效果 |
| ui-mini | 让元素显示得更小巧 |
按钮类
除了全局类之外，你还可以为 或
| Class | 描述 |
|---|---|
| ui-btn | 添加到 元素后，可将其显示为按钮样式 |
| ui-btn-inline | 让多个按钮在同一行内显示 |
| ui-btn-icon-top | 将图标定位在按钮文本上方 |
| ui-btn-icon-right | 将图标定位在按钮文本右侧 |
| ui-btn-icon-bottom | 将图标定位在按钮文本下方 |
| ui-btn-icon-left | 将图标定位在按钮文本左侧 |
| ui-btn-icon-notext | 仅显示图标，不显示文字 |
| ui-btn-a|b | 指定按钮主题样式。“a”为默认主题（灰色背景、黑色文字），“b”则为黑色背景、白色文字 |
图标类
以下是可用图标对应的类名，通常用于 和
| Class | 图标描述 | 图标 |
|---|---|---|
| ui-icon-action | 操作图标（通常用于页面跳转或切换） |  |
| ui-icon-alert | 三角形中的感叹号 |  |
| ui-icon-audio | 音响 / 音箱 |  |
| ui-icon-arrow-d-l | 左下方向箭头 |  |
| ui-icon-arrow-d-r | 右下方向箭头 |  |
| ui-icon-arrow-u-l | 左上方向箭头 |  |
| ui-icon-arrow-u-r | 右上方向箭头 |  |
| ui-icon-arrow-l | 向左箭头 |  |
| ui-icon-arrow-r | 向右箭头 |  |
| ui-icon-arrow-u | 向上箭头 |  |
| ui-icon-arrow-d | 向下箭头 |  |
| ui-icon-back | 返回 |  |
| ui-icon-bars | 三条水平线，常用于列表菜单按钮图标 |  |
| ui-icon-bullets | 常用于列表按钮图标 |  |
| ui-icon-calendar | 日历 |  |
| ui-icon-camera | 相机 |  |
| ui-icon-carat-d | 向下滑动图标 |  |
| ui-icon-carat-l | 向左滑动图标 |  |
| ui-icon-carat-r | 向右滑动图标 |  |
| ui-icon-carat-u | 向上滑动图标 |  |
| ui-icon-check | 勾选 |  |
| ui-icon-clock | 时钟 / 闹钟 |  |
| ui-icon-cloud | 云 |  |
| ui-icon-comment | 评论 / 消息 |  |
| ui-icon-delete | 删除 |  |
| ui-icon-edit | 编辑 / 铅笔 |  |
| ui-icon-eye | 眼睛 |  |
| ui-icon-forbidden | 禁止标识 sign |  |
| ui-icon-forward | 撤销（返回上一步） |  |
| ui-icon-gear | 齿轮，通常用于设置按钮图标 |  |
| ui-icon-grid | 网格 |  |
| ui-icon-heart | 心形，可用于文章收藏 |  |
| ui-icon-home | 主页 |  |
| ui-icon-info | 信息 |  |
| ui-icon-location | 定位 |  |
| ui-icon-lock | 锁 |  |
| ui-icon-mail | 邮件 / 信封 |  |
| ui-icon-minus | 减号 |  |
| ui-icon-navigation | 导航 |  |
| ui-icon-phone | 电话 |  |
| ui-icon-power | 开关（On/off） |  |
| ui-icon-plus | 加号 |  |
| ui-icon-recycle | 循环 标识 |  |
| ui-icon-refresh | 刷新 |  |
| ui-icon-search | 搜索 / 放大镜 |  |
| ui-icon-shop | 商店 / 购物袋 |  |
| ui-icon-star | 星形 |  |
| ui-icon-tag | 标签 |  |
| ui-icon-user | 用户 / 人物 |  |
| ui-icon-video | 视频 / 摄像机 |  |
主题类 Classes
jQuery Mobile 默认提供两套主题类：a（灰色）和 b（黑色）。但这并不表示只能使用这两种主题，开发者也可以根据项目需求自定义更多主题类，范围可以一直扩展到字母 "z"（可查看 jQuery Mobile 主题相关说明）。下表列出了常用的主题类。这里的字母（a-z）表示样式主题可以从 a 一直指定到 z，例如 ui-bar-a、ui-bar-b 等。
| Class | 描述 |
|---|---|
| ui-bar-(a-z) | 指定栏目主题样式，如头部、底部及其他栏目区域 |
| ui-body-(a-z) | 指定内容区块颜色，如页面内容区域（ 1.4.0 版本已废弃）、列表视图、弹窗、侧栏、面板、加载组件和折叠区域 |
| ui-btn-(a-z) | 指定按钮颜色主题 |
| ui-group-theme-(a-z) | 定义控制组、listviews 和 collapsible 集合的主题样式 |
| ui-overlay-(a-z) | 定义页面背景颜色，包括对话框、弹窗及其他显示在最上层的页面容器 |
| ui-page-theme-(a-z) | 定义页面整体主题样式 |
网格类
网格中的列默认采用等宽布局（总宽度为 100%），且不带边框、背景、margin 或 padding。jQuery Mobile 提供了以下几种常见网格布局。
| 网格类 | 列 | 列宽 | 对应 | 实例 |
|---|---|---|---|---|
| ui-grid-solo | 1 | 100% | ui-block-a | |
| ui-grid-a | 2 | 50% / 50% | ui-block-a|b | |
| ui-grid-b | 3 | 33% / 33% / 33% | ui-block-a|b|c | |
| ui-grid-c | 4 | 25% / 25% / 25% / 25% | ui-block-a|b|c|d | |
| ui-grid-d | 5 | 20% / 20% / 20% / 20% / 20% | ui-block-a|b|c|d|e |
想进一步了解用法和示例，可以查看 jQuery Mobile 网格相关章节。
