# 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>
```
- 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 選項卡欄操作