×
ionic 教程ionic 安装ionic 创建 APP

ionic CSS

ionic 头部与底部ionic 按钮ionic 列表ionic 卡片ionic 表单和输入框ionic toggleionic checkboxionic 单选框ionic rangeionic selectionic tab(选项卡)ionic 网格(Grid)ionic 颜色ionic icon(图标)

ionic JavaScript

ionic 上拉菜单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

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

尝试一下 »

bar-stable

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

尝试一下 »

bar-positive

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

尝试一下 »

bar-calm

<div class="bar bar-header bar-calm">
  <h1 class="title">bar-calm</h1>
</div>

尝试一下 »

bar-balanced

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

尝试一下 »

bar-energized

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

尝试一下 »

bar-assertive

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

尝试一下 »

bar-royal

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

尝试一下 »

bar-dark

<div class="bar bar-header bar-dark">
  <h1 class="title">bar-dark</h1>
</div>

尝试一下 »


Sub Header(副标题)

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

<div class="bar bar-header">
  <h1 class="title">Header</h1>
</div>
<div class="bar bar-subheader">
  <h2 class="title">Sub Header</h2>
</div>

尝试一下 »


Footer(底部)

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

<div class="bar bar-footer bar-balanced">
  <div class="title">Footer</div>
</div>

尝试一下 »

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

<div class="bar bar-footer">
  <button class="button button-clear">Left</button>
  <div class="title">Title</div>
  <button class="button button-clear">Right</button>
</div>

尝试一下 »

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

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

尝试一下 »


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)