一、基本布局
1、页眉页脚定义
效果图 :
<!--
bar:定义一个条形区(高度为44px)
bar-header:把bar区定义为一个页眉
bar-positive:为bar配色
-->
<div class="bar bar-header bar-positive">
<!--
button:定义一个按钮(在bar中按钮默认会浮动到最左边)
-->
<button class="button">按钮</button>
<a class="title">页眉</a>
</div>
<!--
scroll-content:定义一个内容区
has-header:当页面定义了bar-header的时候要为内容区加此类
has-footer:当页面定义bar-footer的时候要为内容区加此类
-->
<div class="scroll-content has-header has-footer">
<h1>这是内容区</h1>
</div>
<!--
bar-footer:把bar区定义为页脚
-->
<div class="bar bar-footer bar-positive">
<a class="title">页脚</a>
</div>
2、顶部工具条定义
效果图:
<div class="bar bar-header bar-positive">
<button class="button">页眉按钮</button>
<a class="title">页眉</a>
</div>
<!--
bar-subheader:定义一个与bar-header效果相同,但在bar-header之下的条区
-->
<div class="bar bar-subheader">
<!--
button-bar:bar的下级类,在bar中定义一个按钮工具栏,包含一组button
-->
<div class="button-bar">
<!--
button-calm:定义button颜色
-->
<button class="button button-calm">按钮1</button>
<button class="button button-calm">按钮2</button>
<button class="button button-calm">按钮3</button>
</div>
</div>
<!--
has-subheader:同has-header
-->
<div class="scroll-content has-header has-footer has-subheader">
<h1>这是内容区</h1>
</div>
<div class="bar bar-footer bar-positive">
<a class="title">页脚</a>
</div>
3、与bar相关的class类(取自phonogap100.com)
所有内容学自 phonegap100.com