jQuery Mobile 1.4.5（2025 年仍在大量企业内网、工业平板、老 Android 机上服役的最后一个稳定版）的 CSS 类超级强大！
很多效果你根本不用写一行 CSS，只要加对类名就行。下面给你 2025 年最全、最实用、直接复制就能用 的 jQuery Mobile CSS 类速查表（按使用频率排序）。
| 类别 | CSS 类名 | 效果说明 | 2025 年推荐用法举例 |
|---|---|---|---|
| 布局类（最常用） | ui-grid-a | 2列等宽网格 | <div class="ui-grid-a"><div class="ui-block-a">左</div><div class="ui-block-b">右</div></div> |
ui-grid-b | 3列等宽网格 | 经典三栏布局 | |
ui-grid-c | 4列等宽网格 (>768px 才生效) | ||
ui-grid-d | 5列等宽网格 | 极少用 | |
ui-block-a/b/c/d/e | 网格里的每一块（必须成套用） | – | |
ui-responsive | 让普通 table 自动响应式（神器！） | <table class="ui-responsive"> | |
| 间距类（天天用） | ui-mini | 迷你版控件（按钮、输入框、列表都变小） | <a href="#" class="ui-btn ui-mini">小按钮</a> |
ui-corner-all / ui-corner-none | 强制加/去圆角 | 去掉所有圆角：class="ui-corner-none" | |
ui-shadow / ui-shadow-none | 强制加/去阴影 | – | |
ui-bar-a / ui-bar-b | 强制使用 a 或 b 主题的工具栏背景 | 深色工具栏：<div class="ui-bar-a"> | |
| 按钮&控件外观 | ui-btn-inline | 按钮内联（不独占一行） | 表单里并排按钮 |
ui-btn-icon-left/right/top/notext | 图标位置 | 只显示图标：ui-btn-icon-notext | |
ui-btn-active | 强制高亮状态（底部导航常用） | <a href="#" class="ui-btn-active">当前页</a> | |
ui-btn-b | 强制使用 b 主题（浅色） | 高亮按钮 | |
| 列表专属类 | ui-li-divider | 分组标题 | 自动配合 data-role="list-divider" |
ui-li-has-thumb | 列表项有缩略图 | 左边小图 | |
ui-li-has-icon | 列表项有图标 | – | |
ui-li-static | 强制普通 li 不被美化（想自己写样式时用） | 自定义列表项 | |
| 文字&对齐 | ui-title | header 里的大标题（自动居中） | – |
ui-btn-left / ui-btn-right | header/footer 里按钮靠左/靠右 | 返回键：class="ui-btn-left" | |
ui-text-center | 文字居中（2023 年后推荐的写法） | <h1 class="ui-text-center">标题</h1> | |
| 颜色&主题覆盖 | ui-body-a / ui-body-b | 强制内容区域使用 a/b 主题背景 | 白色内容区：class="ui-body-b" |
ui-page-theme-a | 整个页面强制用 a 主题 | <div data-role="page" class="ui-page-theme-a"> | |
| 特殊实用类 | ui-nodisc-icon | 去掉列表小箭头 | 干净的列表：<ul data-role="listview" class="ui-nodisc-icon"> |
ui-alt-icon | 列表图标变成白色（深色背景用） | – | |
ui-listview-inset | 列表圆角内嵌效果（配合 data-inset） | – | |
ui-overlay-a | popup 遮罩层主题 | – | |
ui-focus | 强制获得焦点样式 | JS 里：$(el).addClass("ui-focus") |
2025 年最常用的 10 个“神级组合类”（直接复制）
<!-- 1. 经典双列布局（90% 项目都在用） -->
<div class="ui-grid-a">
<div class="ui-block-a"><button class="ui-btn ui-mini">取消</button></div>
<div class="ui-block-b"><button class="ui-btn ui-btn-b ui-mini">确定</button></div>
</div>
<!-- 2. 深色工具栏 + 白色图标 -->
<div class="ui-bar-a ui-alt-icon">
<a href="#" class="ui-btn ui-btn-icon-notext ui-icon-delete">删除</a>
</div>
<!-- 3. 响应式表格（神器！） -->
<table data-role="table" class="ui-responsive ui-table-reflow">
<thead>...</thead><tbody>...</tbody>
</table>
<!-- 4. 底部导航当前页高亮 -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#home" class="ui-btn-active ui-btn-icon-top" data-icon="home">首页</a></li>
</ul>
</div>
</div>
<!-- 5. 去掉所有圆角和阴影（极简风） -->
<div data-role="page" class="ui-corner-none ui-shadow-none">2025 年写 jQuery Mobile 项目必备小技巧
- 想让整个页面白色背景？直接加一个类：
<div data-role="page" class="ui-body-b">- 想让按钮并排？永远用这个组合：
<div class="ui-grid-a">
<div class="ui-block-a"><a href="#" class="ui-btn ui-mini">取消</a></div>
<div class="ui-block-b"><a href="#" class="ui-btn ui-btn-b ui-mini">确定</a></div>
</div>- 响应式表格必加：
class="ui-responsive"
这张表 + 上面的组合，足够你 2025 年在任何 jQuery Mobile 老项目里“为所欲为”！
需要我给你一个 「jQuery Mobile CSS 类一页纸速查表（高清 PDF + 深色版）」 或者 「50 个经典布局模板」，直接说一声，立即打包发你！
