ionic css布局之bar页眉页脚定义

一、基本布局

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