ionic 头部与底部

ionic

ionic 教程 ionic 安装 ionic 创建 APP ionic 头部与底部 ionic 按钮 ionic 列表 ionic 卡片 ionic 表单和输入框 ionic Toggle(切换开关) ionic checkbox（复选框） ionic 单选框 ionic Range ionic select ionic tab(选项卡) ionic 网格(Grid) ionic 颜色 ionic icon(图标) ionic 上拉菜单(ActionSheet) ionic 背景层 ionic 下拉刷新 ionic 复选框 ionic 单选框操作 ionic 切换开关操作 ionic 手势事件 ionic 头部和底部 ionic 列表操作 ionic 加载动作 ionic 模态窗口 ionic 导航 ionic 平台 ionic 浮动框 ionic 对话框 ionic 滚动条 ionic 侧栏菜单 ionic 滑动框 ionic 加载动画 ionic 选项卡栏操作

ionic 头部与底部

Header(头部)

Header是固定在屏幕顶部的组件,可以包如标题和左右的功能按钮。

ionic 默认提供了许多种颜色样式，你可以调用不同的样式名，当然也可以自定义一个。

bar-light

<head>

</head>

<body>

<h3>bar-light</h3>

<h1 class="title">bar-light</h1>

</div>

</body>

</html>

bar-stable

1
2
3

<h1 class="title">bar-stable</h1>

</div>

bar-positive

1
2
3

<h1 class="title">bar-positive</h1>

</div>

bar-calm

1
2
3

</div>

bar-balanced

1
2
3

<h1 class="title">bar-balanced</h1>

</div>

bar-energized

1
2
3

<h1 class="title">bar-energized</h1>

</div>

bar-assertive

1
2
3

<h1 class="title">bar-assertive</h1>

</div>

bar-royal

1
2
3

<h1 class="title">bar-royal</h1>

</div>

bar-dark

1
2
3

</div>

Sub Header（副标题）

Sub Header同样是固定在顶部，只是是在Header的下面，就算没有写Header这个，Sub Header这个样式也会距离顶部有一个Header的距离。颜色样式同 Header 。

<h1 class="title">Header</h1>

</div>

<h2 class="title">Sub Header</h2>

</div>

Footer(底部)

Footer 是在屏幕的最下方，可以包含多种内容类型。

1
2
3

<div class="title">Footer</div>

</div>

Footer 同上面的 Header，只是把样式名 bar-header 换做 bar-footer 。

<div class="title">Title</div>

<button class="button button-clear">Right</button>

</div>

此外，如果底部没有标题，但是又需要右边的按钮，你需要在右侧按钮添加 pull-right如:

1
2
3

<button class="button button-clear pull-right">Right</button>

</div>

上一篇:ionic 创建 APP

下一篇:ionic 按钮

我要发贴

ionic