jQuery Mobile CSS 类概述

jQuery Mobile 提供了一套预定义的 CSS 类，用于快速构建响应式移动端界面。这些类涵盖了布局、按钮、列表、表单等组件，通过简单添加类名即可实现丰富的交互效果。以下是一些核心 CSS 类及其用法示例。

---

布局类

jQuery Mobile 的布局类用于控制页面结构和间距，例如网格布局和内容分区。

网格布局示例
通过 ui-grid-* 类实现分栏布局，支持 a（单列）、b（两列）、c（三列）等模式。

<div class="ui-grid-a">
  <div class="ui-block-a"><button>左侧按钮</button></div>
  <div class="ui-block-b"><button>右侧按钮</button></div>
</div>

内容容器
使用 ui-content 类为内容区域添加内边距和样式。

<div class="ui-content">
  <p>这是主要内容区域。</p>
</div>

---

按钮类

按钮类通过 ui-btn 及其变体实现不同样式和状态。

基础按钮

<a href="#" class="ui-btn">普通按钮</a>

主题按钮
通过 ui-btn-* 指定主题颜色，如 a（默认）、b（高亮）。

<a href="#" class="ui-btn ui-btn-b">高亮按钮</a>

图标按钮
添加 ui-icon-* 类显示图标，配合 data-icon 属性。

<a href="#" class="ui-btn ui-icon-delete">删除</a>

---

列表类

列表类 ui-listview 用于创建移动端友好的列表视图。

基础列表

<ul class="ui-listview">
  <li><a href="#">列表项1</a></li>
  <li><a href="#">列表项2</a></li>
</ul>

分隔列表项
通过 ui-li-divider 添加分隔标题。

<ul class="ui-listview">
  <li class="ui-li-divider">分组标题</li>
  <li><a href="#">分组内容</a></li>
</ul>

---

表单类

表单控件通过 ui-field-contain 和 ui-input-text 等类优化移动端输入体验。

输入框

<div class="ui-field-contain">
  <label for="name">姓名：</label>
  <input type="text" id="name" class="ui-input-text">
</div>

复选框
使用 ui-checkbox 和 ui-icon 美化复选框。

<div class="ui-field-contain">
  <fieldset data-role="controlgroup">
    <legend>选项：</legend>
    <input type="checkbox" id="check1" class="ui-checkbox">
    <label for="check1">选项1</label>
  </fieldset>
</div>

---

主题类

通过 ui-body-* 和 ui-bar-* 全局控制主题颜色。

页面主题

<div data-role="page" class="ui-body-a">
  <div data-role="header" class="ui-bar-b">
    <h1>标题</h1>
  </div>
</div>

自定义主题
覆盖默认变量可自定义主题：

.ui-btn-mytheme {
  background: #ff5722;
  color: white;
}

---

响应式辅助类

通过 ui-responsive 实现断点控制，例如隐藏/显示元素。

<div class="ui-responsive-pad">在平板及以上设备显示内边距</div>

---

以上是 jQuery Mobile 中常用的 CSS 类及其代码示例。通过组合这些类，可以快速构建功能完备的移动端界面。