jQuery Mobile CSS 类学习笔记
本文档介绍 jQuery Mobile 中常用的 CSS 类。
页面结构类
ui-mobile
添加此类到 html 元素上，用于标记此页面是一个 jQuery Mobile 页面。
htmlCopy Code<html class="ui-mobile">
ui-page
页面容器，可以包含 header、content、footer 等子元素。
htmlCopy Code<div data-role="page" class="ui-page"></div>
ui-header, ui-content, ui-footer
分别表示页面的 header、content、footer。
htmlCopy Code<div data-role="header" class="ui-header">
<h1>Header</h1>
</div>
<div data-role="content" class="ui-content">
<p>Content</p>
</div>
<div data-role="footer" class="ui-footer">
<h4>Footer</h4>
</div>
控件类
ui-btn
表示按钮控件，默认有样式，可以使用不同主题和图标。
htmlCopy Code<a href="#" class="ui-btn">Button</a>
ui-bar
用于包含按钮控件的容器。
htmlCopy Code<div class="ui-bar">
<a href="#" class="ui-btn">Button 1</a>
<a href="#" class="ui-btn">Button 2</a>
</div>
ui-btn-active
表示选中状态的按钮。
htmlCopy Code<a href="#" class="ui-btn ui-btn-active">Active Button</a>
ui-btn-icon-left, ui-btn-icon-right
表示按钮上图标的位置。
htmlCopy Code<a href="#" class="ui-btn ui-btn-icon-left ui-icon-home">Home</a>
<a href="#" class="ui-btn ui-btn-icon-right ui-icon-carat-r">Next</a>
主题类
ui-body-a, ui-body-b, ui-body-c, ui-body-d
表示不同的主题，可以用于页面或控件。
htmlCopy Code<div data-role="page" class="ui-page ui-body-a">
<div data-role="header" class="ui-header">
<h1>Header</h1>
</div>
<div data-role="content" class="ui-content">
<p>Content</p>
</div>
<div data-role="footer" class="ui-footer">
<h4>Footer</h4>
</div>
</div>
<a href="#" class="ui-btn ui-btn-b">Button</a>
示例
以下是一个包含 header、content、footer 的页面，其中 content 包含一个包含按钮的容器。
htmlCopy Code<div data-role="page" class="ui-page ui-body-a">
<div data-role="header" class="ui-header">
<h1>Header</h1>
</div>
<div data-role="content" class="ui-content">
<div class="ui-bar">
<a href="#" class="ui-btn">Button 1</a>
<a href="#" class="ui-btn">Button 2</a>
</div>
</div>
<div data-role="footer" class="ui-footer">
<h4>Footer</h4>
</div>
</div>
以上就是 jQuery Mobile 中常用的 CSS 类，希望能对你有所帮助。