ionic 头部与底部
Header(头部)
Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮。
ionic 默认提供了许多种颜色样式，你可以调用不同的样式名，当然也可以自定义一个。
bar-light
尝试一下 »
bar-stable
尝试一下 »
bar-positive
尝试一下 »
bar-calm
尝试一下 »
bar-balanced
尝试一下 »
bar-energized
尝试一下 »
bar-assertive
尝试一下 »
bar-royal
尝试一下 »
bar-dark
尝试一下 »
Sub Header（副标题）
Sub Header同样是固定在顶部，只是是在Header的下面，就算没有写Header这个，Sub Header这个样式也会距离顶部有一个Header的距离。颜色样式同 Header 。
尝试一下 »
Footer(底部)
Footer 是在屏幕的最下方，可以包含多种内容类型。
尝试一下 »
Footer 同上面的 Header，只是把样式名 bar-header 换做 bar-footer 。
尝试一下 »
此外，如果底部没有标题，但是又需要右边的按钮，你需要在右侧按钮添加 pull-right如:
尝试一下 »
ionic 按钮
按钮是移动app不可或缺的一部分，不同风格的app，需要的不同按钮的样式。
默认情况下，按钮显示样式为：display: inline-block。
尝试一下 »
button-block 样式按钮显示为：display: block，它将完全填充父元素的宽度，包含了内边距属性padding。
尝试一下 »
使用 button-full 类，可以让按钮显示完全宽度，且不包含内边距padding。
尝试一下 »
不同大小的按钮
button-large 设置为大按钮，button-small 设置为小按钮。
尝试一下 »
无背景按钮
button-outline 设置背景为透明。
尝试一下 »
无背景与边框按钮
button-clear 设置按钮背景为透明，且无边框。
尝试一下 »
图标按钮
我们可以在按钮上添加图标。
Learn More
Back
Reorder
尝试一下 »
头部/底部添加按钮
头部/底部可以添加按钮，按钮的样式根据头部/底部来设定，所以你不需要为按钮添加额外的样式。
尝试一下 »
button-clear 类可以设置无背景和边框的头部/底部按钮。
尝试一下 »
按钮栏
我们可以使用 button-bar 类来设置按钮栏。以下实例中，我们在头部和内容中添加了按钮栏。
尝试一下 »
ionic 列表
列表是一个应用广泛的界面元素，在所有移动app中几乎都会使用到。
列表可以是基本文字、按钮，开关，图标和缩略图等。
列表项可以是任何的HTML元素。容器元素需要list类，每个列表项需要使用item类。
ionList和ionItem可以很容易的支持各种交互方式，比如，滑动编辑，拖动排序，以及删除项。
基本用法:
-
...
尝试一下 »
列表分隔符
我们可以使用 item-divider 类来为列表创建分隔符，默认情况下，列表项以不同的背景颜色和字体加粗来区分，但你也可以很容易的定制他。
Candy Bars
Butterfinger
...
尝试一下 »
带图标列表
我们可以在列表项的左侧或右侧指定图标。
使用 item-icon-left 图标在左侧， item-icon-right 设置图标在右侧。如果你需要在两边都有图标，则两个类都添加上即可。
以下实例中，我们在列表项中使用了 < a> 标签，使得每个列表项可点击。
列表项在使用 < a>或
尝试一下 »
按钮列表
使用 item-button-right 或 item-button-left 类将按钮放在列表项中。
...
尝试一下 »
带头像列表
使用 item-avatar 来创建一个带头像的列表：
尝试一下 »
缩略图列表
item-thumbnail-left 类用于添加左侧对齐的缩略图， item-thumbnail-right 类用于添加右侧对齐的缩略图。
尝试一下 »
内嵌列表(inset list)
我们可以在容器当中内嵌列表，列表不会显示完整的宽度。
内嵌列表的样式为：list list-inset，与常规列表区别是，它设置了外边距（marign）,类似于选项卡。
内嵌列表是没有阴影效果的，滚动时效果会更好。
Raiders of the Lost Ark
...
尝试一下 »
ionic 卡片
近年来卡片(card)的应用越来越流行，卡片提供了一个更好组织信息展示的工具。
针对移动端的应用，卡片会根据屏幕大小自适应大小。
我们可以很灵活的控制卡片的显示效果，甚至实现动画效果。
卡片一般放在页面顶部，当然也可以实现左右切换的功能。
基本卡片，包含了文本信息。
尝试一下 »
卡片(card)默认样式带有box-shadow(阴影)，由于性能的原因，和他类似的元素像 list list-inset 并没有阴影。
如果你有很多的卡片，每个卡片都有很多子元素，建议使用内嵌列表（inset list）。
卡片的头部与底部
我们可以通过添加 item-divider 类为卡片添加头部与底部：
卡片头部！
基本卡片，包含了文本信息。
卡片底部！
尝试一下 »
卡片列表
使用 list card 类来设置卡片列表：
尝试一下 »
带图片卡片
卡片中使用图片，效果会更好，实例如下：
尝试一下 »
运行效果如下：
卡片展现
以下实例中使用几种不同的选项的卡片展现方式。 开始使用了 list card 元素，并使用了 item-avatar , item-body 元素用于展示图片和文本信息，底部使用 item-divider 类。
尝试一下 »
运行效果如下：
