# ionic 頭部和底部
## ion-header-bar
這個是固定在屏幕頂部的一個頭部標題欄。如果給它加上'bar-subheader' 這個樣式,它就是副標題。
### 用法
```
<ion-header-bar align-title="left" class="bar-positive">
<div class="buttons">
<button class="button" ng-click="doSomething()">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons">
<button class="button">Right Button</button>
</div>
</ion-header-bar>
<ion-content>
Some content!
</ion-content>
```
### API
`align-title_(optional)_`:`string`
這個是對齊 title 的。如果沒有設置,它將會按照手機的默認排版(Ios的默認是居中,Android默認是居左)。它的值可以是 'left','center','right'。
`no-tap-scroll_(optional)_`:`boolean`
這個是設置 header-bar 是否跟隨著內容的滾動而滾動,就是是否固定在頂部。它的值是布爾值(true/false)。
## ion-footer-bar
知道了 ion-header-bar ,理解ion-footer-bar就輕松多啦!只是 ion-footer-bar 是在屏幕的底部。
### 用法
```
<ion-content>
Some content!
</ion-content>
<ion-footer-bar align-title="left" class="bar-assertive">
<div class="buttons">
<button class="button">Left Button</button>
</div>
<h1 class="title">Title!</h1>
<div class="buttons" ng-click="doSomething()">
<button class="button">Right Button</button>
</div>
</ion-footer-bar>
```
### API
與 ion-header-bar 不同的是,ion-footer-bar 只有 align-title 這個 API。
`align-title(optional)`:`string`
這個是對齊 title 的。如果沒有設置,它將會按照手機的默認排版(Ios的默認是居中,Android默認是居左)。它的值可以是 'left','center','right'。
- ionic 入門
- ionic 簡介
- ionic 安裝
- ionic 創建 APP
- ionic CSS
- ionic 頭部與底部
- ionic 按鈕
- ionic 列表
- ionic 卡片
- ionic 表單和輸入框
- ionic Toggle(切換開關)
- ionic 單選框
- ionic Range
- ionic select
- ionic tab(選項卡)
- ionic 網格(Grid)
- ionic 顏色
- ionic icon(圖標)
- ionic JavaScript
- ionic 上拉菜單(ActionSheet)
- ionic 背景層
- ionic 下拉刷新
- ionic 復選框
- ionic 單選框操作
- ionic 切換開關操作
- ionic 手勢事件
- ionic 頭部和底部
- ionic 列表操作
- ionic 加載動作
- ionic 模型
- ionic 導航
- ionic 平臺
- ionic 浮動框
- ionic 對話框
- ionic 滾動條
- ionic 側欄菜單
- ionic 滑動框
- ionic 加載動畫
- ionic 選項卡欄操作