Header
固定在頭部，可以包含標題標簽，可以有左右按鈕 樣式:bar bar-header bar-light
第一個小節 第二個表示的是頭部 第三個表示顏色
子頭部，需要在ion-content加入bar-subheader 在頭部加上has-subheader不然頂部會被遮擋。
<div class="bar bar-header bar-light">
<h1 class="title">bar-light</h1>
</div>
Content
為主題部分，可以自動超出滾動。
pull-to-refresh 拉動刷新 ionrefresher
不斷刷新 ionInfiniteScroll
<div class="bar bar-footer bar-balanced">
<div class="title">Footer</div>
</div>
Footer
在屏幕的底部，可以包含很多元素。內部的title默認居中。
前后按鈕一個左，一個右。分別在title兩側。
如果沒有title可使用pull-right按鈕右對齊。
<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>
////////////////////////////////////////////////
<div class="bar bar-footer">
<button class="button button-clear pull-right">Right</button>
</div>
Buttons
當按鈕應用做Header或者Footer的時候，默認樣式為bar，所以需要用額外的樣式
，添加希望加上的。
默認為dispay:inline-block；
button-block有Padding。
button-full是全屏的，它父級是沒有padding的；
按鈕是有不同尺寸的 button-small button-large
button-clear它會移除邊框，使得文字脫穎而出。文字的顏色會替換背景色
button-outline 添加一個透明的背景顏色；
button-icon 沒有邊框
<button class="button button-block button-positive">
Block Button
</button>
////////////////////////////////
<button class="button icon-left ion-home">Home</button>
<button class="button icon-left ion-star button-positive">Favorites</button>
<a class="button icon-right ion-chevron-right button-calm">Learn More</a>
<a class="button icon-left ion-chevron-left button-clear button-dark">Back</a>
<button class="button icon ion-gear-a"></button>
<a class="button button-icon icon ion-settings"></a>
<a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a>
///////////////////////////////////////
<div class="button-bar">
<a class="button">First</a>
<a class="button">Second</a>
<a class="button">Third</a>
</div>
List
應用很廣泛，如：文本，按鈕開關，圖標，縮略圖。。。
它是一個強大的組建，如：編輯，滑動編輯，拖動排序，拉刷新等等。。。
列表分割：使用item-divider可以創建分割，默認會有不同背景顏色以及字體加粗
，這個很容易定制。
列表圖標：使用item-icon-left和item-icon-right（父級）
item-note注釋 badge徽章 （說默認有右箭頭，沒看到。。。。）
列表按鈕：item-button-right，可以在按鈕里放Icon.
項目頭像：本質上講，就是比圖標大一點，小於說略圖。使用.item-avatar
<ul class="list">
<li class="item">
...
</li>
</ul>
//////////////////////////////////////
<div class="list">
<div class="item item-divider">
Candy Bars
</div>
<a class="item" href="#">
Butterfinger
</a>
...
</div>
/////////////////////////////////////////////////
<div class="list">
<a class="item item-icon-left" href="#">
<i class="icon ion-email"></i>
Check mail
</a>
<a class="item item-icon-left item-icon-right" href="#">
<i class="icon ion-chatbubble-working"></i>
Call Ma
<i class="icon ion-ios7-telephone-outline"></i>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-mic-a"></i>
Record album
<span class="item-note">
Grammy
</span>
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-person-stalker"></i>
Friends
<span class="badge badge-assertive">0</span>
</a>
</div>
/////////////////////////////////////////////////
<div class="list">
<div class="item item-button-right">
Call Ma
<button class="button button-positive">
<i class="icon ion-ios7-telephone"></i>
</button>
</div>
</div>
/////////////////////////////////////////////////////
<div class="list">
<a class="item item-avatar" href="#">
<img src="venkman.jpg">
<h2>Venkman</h2>
<p>Back off, man. I'm a scientist.</p>
</a>
</div>
Item Thumbnails 縮略圖
縮略圖本質上是展示的是比一個圖標大一點。通常定義為整個列表的高。創建縮略圖項目使用
item-thumbnails-left item-thumbnails-right
<div class="list">
<a class="item item-thumbnail-left" href="#">
<img src="cover.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</a>
</div>
Inset List
它可以嵌套在容器內，嵌套有點類似card，除了它沒有box-shadow。它並不占有一個全屏寬度，
主要的不同是它有邊距margin
<div class="list list-inset">
<div class="item">
Raiders of the Lost Ark
</div>
</div>
Cards
在近幾年經被廣泛的使用，它有非常好的方法包含和組織信息。在小屏幕上可以達到預期的效果，很快
被各大公司使用如google等企業。
移動方面的經驗：卡片很容易在不同屏幕上展示相同信息。有很多控制方式，靈活，甚至可以是
動畫。雖然放在某些元素之上，但也可以像page一樣安排在中間，左或者右邊。
卡片默認是有box-shadow與它的堂兄弟list-inset不同，處於性能上的考慮。當有大量的滾動卡片
效果，推薦使用插圖列表！
<div class="card">
<div class="item item-text-wrap">
This is a basic Card which contains an item that has wrapping text.
</div>
</div>
Card Headers and Footers
卡片可以在正常的屏幕上定制相同的效果，例如：卡片可以很容易的放做header和footer內部，
也可以在content中用item-divider上定義分割線；
<div class="card">
<div class="item item-divider">
I'm a Header in a Card!
</div>
<div class="item item-text-wrap">
This is a basic Card with some text.
</div>
<div class="item item-divider">
I'm a Footer in a Card!
</div>
</div>
Card Lists
使用list card類名，可以創建一個卡片列表；
<div class="list card">
<a href="#" class="item item-icon-left">
<i class="icon ion-home"></i>
Enter home address
</a>
</div>
Card Images 卡片圖片
圖片做卡片里很好用，也能很好的結合列表和其它元素。
<div class="list card">
<div class="item item-avatar">
<img src="avatar.jpg">
<h2>Pretty Hate Machine</h2>
<p>Nine Inch Nails</p>
</div>
<div class="item item-image">
<img src="cover.jpg">
</div>
<a class="item item-icon-left assertive" href="#">
<i class="icon ion-music-note"></i>
Start listening
</a>
</div>
Forms 與 Inputs
列表也可以跟一組表單元素相關聯，item-input item用來指定每個輸入字段於相關的標簽！
Ionic更推薦使用item-input，這樣可以在row上的任意位置上觸發焦點。
除此之外，開發者也意識到H5表單類型，因此用戶將會看到適當的虛擬鍵盤；
Text Input:Placeholder Labels
默認會占用百分百的寬度沒有左右邊框，使用placeholder標簽屬性來模擬輸入的標簽。
當用戶開始鍵入文本的時候，標簽隱藏。反之~~~
textarea可以使用多行文本表單；
<div class="list">
<label class="item item-input">
<input type="text" placeholder="First Name">
</label>
<label class="item item-input">
<input type="text" placeholder="Last Name">
</label>
<label class="item item-input">
<textarea placeholder="Comments"></textarea>
</label>
</div>
Text Input：Inline Labels
使用input-lable可以放置做input元素的左側，當用戶鍵入的時候它並不會消失。它不會
阻止你去使用一個占位符；
<div class="list">
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password">
</label>
</div>
Text Input: Stacked Labels
堆疊標簽：標簽總是被放置做Input之上。每個項目都有item-stacked-label標簽。
輸入的標簽上input-label。
例如：還是可以使用placeholder去提示用戶江湖要輸入什么樣子的文本類型；
<div class="list">
<label class="item item-input item-stacked-label">
<span class="input-label">First Name</span>
<input type="text" placeholder="John">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Last Name</span>
<input type="text" placeholder="Suhr">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Email</span>
<input type="text" placeholder="john@suhr.com">
</label>
</div>
Text Input：Floating Lables
浮動標簽看起來像堆疊標簽，除了它存在動畫。或者當用戶鍵入的時候它會漂浮到上面。
每一個項目都有item-floating-lable，表單標簽將有一個input-label標識；
<div class="list">
<label class="item item-input item-floating-label">
<span class="input-label">First Name</span>
<input type="text" placeholder="First Name">
</label>
Inset Forms
在列表里，默認的是input會占用其父級的百分百的寬度。然而你可以使用list-inset或者
card去嵌套。card有box-shadow list-inset沒有box-shadow。除此之外如果父級有Padding,
它也給予一個嵌套的形式；
<div class="list list-inset">
<label class="item item-input">
<input type="text" placeholder="First Name">
</label>
<label class="item item-input">
<input type="text" placeholder="Last Name">
</label>
</div>
Inset Input
使用list-inset可以嵌套做整個列表里，然后放置item-input-inset將嵌套一個input在一個獨立的
list item 里面；放置一個按鈕做旁邊。
Input Icons
圖標可以很容易的加進item-input的Input里，簡單的在Input之前加上icon。默認文本顏色跟
label顏色一致；但是你也可以使用placeholder-icon去修改成占位符的顏色！
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search">
</label>
</div>
Header Inputs
表單也可以被安置做頭部，跟隨這提交按鈕或者取消表單！
<div class="bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input type="search" placeholder="Search">
</label>
<button class="button button-clear">
Cancel
</button>
</div>
Toggle
跟Html中的復選框切換都一樣，除了看起不同。可以很容易的放在觸摸設備上。Ionic
更喜歡在input外部放一個Label為了更好的切或者拖動；
Toggle也能設計顏色，可以使用toggle-assertive
<label class="toggle">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
Checkbox
Checkbox跟Html里面的checkbox有一點不同，除了樣式上的不同。
item-checkbox被加在item后面；Ionic喜歡做label里面加如checkbox，那樣更有助於選中。
它也是可以設置顏色的，需要使用checkbox-assertive
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox">
</label>
Flux Capacitor
</li>
</ul>
Radio Button List
單選按鈕其實跟原生的並沒有什么不同，每一個item-radio下的input里面必須有一個相同的
name
radio-icon可以用來指定標識顯示或者隱藏的元素。
<div class="list">
<label class="item item-radio">
<input type="radio" name="group">
<div class="item-content">
Go
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
Range
Range是一個范圍；range的主題可以是任意的一個ionic顏色。可以使用各種各樣的元素，
列表項目或者卡片；
<div class="range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
<i class="icon ion-volume-high"></i>
</div>
<div class="list">
<div class="item range range-positive">
<i class="icon ion-ios7-sunny-outline"></i>
<input type="range" name="volume" min="0" max="100" value="33">
<i class="icon ion-ios7-sunny"></i>
</div>
</div>
Select
Ionic的多選相比比瀏覽器漂亮些，是根據瀏覽器選擇的。默認的行為還是根據瀏覽器有關。
不同平台展示效果是不同的，例如：桌面瀏覽器就是一個向下的彈出框。安卓有一組單選的按鈕組
ios將出現一個照片卷軸一樣的覆蓋半個屏幕。
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Lightsaber
</div>
<select>
<option>Blue</option>
<option selected>Green</option>
<option>Red</option>
</select>
</label>
</div>
Tabs
Tabs是一組水平的按鈕或鏈接,在各瀏覽器都有一致的體驗。它可以包含文本和圖標。使得
在移動端是非常瀏覽的導航；元素應該包含一個tabs,每一個tab都將包含一個tab-item默認
沒有圖標只有一個文本；Tabs可以匹配標准的ionic顏色。
如果tabbar隱藏了，還顯示內容。可以添加一個tabs-item-hide類。或者當你使用的時候記得加
has-tabs類。
<div class="tabs">
<a class="tab-item">
Home
</a>
<a class="tab-item">
Favorites
</a>
<a class="tab-item">
Settings
</a>
</div>
Ioon-only Tabs
在tabs后添加tabs-icon-only類
<div class="tabs tabs-icon-only">
<a class="tab-item">
<i class="icon ion-home"></i>
</a>
<a class="tab-item">
<i class="icon ion-star"></i>
</a>
<a class="tab-item">
<i class="icon ion-gear-a"></i>
</a>
</div>
Top Icon Tabs
在tabs添加tabs-icon-top類
<div class="tabs tabs-icon-top">
<a class="tab-item">
<i class="icon ion-home"></i>
Home
</a>
<a class="tab-item">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
Left Icon Tabs
在tabs后添加tabs-icon-left
<div class="tabs tabs-icon-left">
<a class="tab-item">
<i class="icon ion-home"></i>
Home
</a>
<a class="tab-item">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
Striped Style Tabs
在tabs上添加tabs-striped具有安卓風格，tabs-top定位做頂部。獲取angular Striped tabs
顏色用tabs-background-{color}，tabs-color-{color}這個時候要添加has-tabs-top類。
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<div class="tabs">
<a class="tab-item active" href="#">
<i class="icon ion-home"></i>
Test
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
</div>
<div class="tabs-striped tabs-color-assertive">
<div class="tabs">
<a class="tab-item active" href="#">
<i class="icon ion-home"></i>
Test
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
</div>
Toggle
和HTML中的復選框切換都一樣，除了看起來不一樣。做觸摸設備上很容易使用。
在label中使用會更好的切換Toggle；
也可以分配顏色給它們，如toggle-assertive；也可以做為多列表，將item-toggle
放在沒一個Item里面；
<ul class="list">
<li class="item item-toggle">
HTML5
<label class="toggle toggle-assertive">
<input type="checkbox">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
</ul>
Checkbox
它和HTML中的並沒有什么不同，除了樣式看起來不同。可以做一個checkboxes多列~~在
每一個item中放入一個item-checkbox；
ionic提供了
<ul class="list">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox">
</label>
Flux Capacitor
</li>
</ul>
Radio Button List
單選按鈕跟標准的單選按鈕並沒有什么不同，除了樣式上有所不同。
每一個item-radio不得不有一個相同的Name屬性；radio-icon也是可以被指派的。去
顯示或者隱藏一個圖標元素；ionic提供
<div class="list">
<label class="item item-radio">
<input type="radio" name="group">
<div class="item-content">
Go
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
Range
這是一個值域,顏色可以定義為任何默認的Ionic顏色；可以使用多種元素，如列表或者卡片；
<div class="range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
<i class="icon ion-volume-high"></i>
</div>
<div class="list">
<div class="item range range-positive">
<i class="icon ion-ios7-sunny-outline"></i>
<input type="range" name="volume" min="0" max="100" value="33">
<i class="icon ion-ios7-sunny"></i>
</div>
</div>
Select
Ionic的多選相比，比瀏覽器漂亮些；當選擇開始時，默認行為如何選擇其中一個選項仍然是由
瀏覽器。用戶選擇一個選項，每個平台的用戶界面會有所不同。做桌面瀏覽器顯示默認下
拉框，Android會有單選框列表彈出，Ios有自定義照片卷軸窗口遮蓋窗口的下半部；
<div class="list">
<label class="item item-input item-select">
<div class="input-label">
Lightsaber
</div>
<select>
<option>Blue</option>
<option selected>Green</option>
<option>Red</option>
</select>
</label>
</div>
Tabs
一組水平組合的按鈕或者鏈接，它能包含任何組成部分，做移動端很受歡迎的導航！
包含元素有一個tabs類名，每個tab都有一個tab-item類名。默認沒有圖標僅僅是文本；
一樣是可以有多種顏色可以進行更改；
隱藏tabbar但仍然顯示內容，添加tabs-item-hide類；
當然如果你使用tabs也可以加has-tabs類。
<div class="tabs">
<a class="tab-item">
Home
</a>
<a class="tab-item">
Favorites
</a>
<a class="tab-item">
Settings
</a>
</div>
Icon-only
在tabs后加tabs-icon-only
<div class="tabs tabs-icon-only">
<a class="tab-item">
<i class="icon ion-home"></i>
</a>
<a class="tab-item">
<i class="icon ion-star"></i>
</a>
<a class="tab-item">
<i class="icon ion-gear-a"></i>
</a>
</div>
Top Icon Tabs
添加tabs-icon-top在tabs
<div class="tabs tabs-icon-top">
<a class="tab-item">
<i class="icon ion-home"></i>
Home
</a>
<a class="tab-item">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
Left Icon Tabs
在tabs后添加tabs-icon-left
<div class="tabs tabs-icon-left">
<a class="tab-item">
<i class="icon ion-home"></i>
Home
</a>
<a class="tab-item">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
Striped Style
在tabs外有一個tabs-striped，可做出Android風格。加Tabs-top可以定位top，可控制顏色；
tabs-background-{color}控制背景色，tabs-color-{color} 控制字體顏色；
頂部tabs與頭部混合，需要使用has-tabs-top類名；
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<div class="tabs">
<a class="tab-item active" href="#">
<i class="icon ion-home"></i>
Test
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
</div>
<div class="tabs-striped tabs-color-assertive">
<div class="tabs">
<a class="tab-item active" href="#">
<i class="icon ion-home"></i>
Test
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
</div>
Grid
Ionic網格系統不大相同，因為它是用 CSS Flexible Box Layout Module標准；優勢在於支持
Ionic的設備都支持 flexbox；
簡單的添加行與列：它們會均勻的占用可用空間。如果你想建立一個三行就三行，五列就五列；
這里不限制使用那個12網格。或者不需要明確狀態。你可以垂直的對齊做每一列的內容；
使用row驚醒指定，去支持一行。使用col去指定一列。想怎么加就怎么加，不用多想，它會自動編譯的；
Grid：Evenly Spaced Columns
默認做col里面添加row將會自動獲取等量的間距，在樣式內部不指定任何的大小；
Grid:Explicit Column Sizes
你可以明確一個單元格的大小，如何你想指定某個單元格比其他它的大想同一行里。默認的是
他們都會有相同的指定有效空間。Ionic使用的網格系統是百分比（相比一個鎖定12列網格）
這種網格系統的優勢是，你僅僅做你需要的地方設置百分百。其它的仍然可以分割剩余的空間；
<div class="row">
<div class="col col-50">.col.col-50</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
<div class="row">
<div class="col col-75">.col.col-75</div>
<div class="col">.col</div>
</div>
<div class="row">
<div class="col">.col</div>
<div class="col col-75">.col.col-75</div>
</div>
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Explicit Column Percentage Classnames
-
.col-10 10%
-
.col-20 20%
-
.col-25 25%
-
.col-33 33.3333%
-
.col-50 50%
-
.col-67 66.6666%
-
.col-75 75%
-
.col-80 80%
*.col-90 90%
Grid: Offset Columns
單元格可以從左側開始偏；
<div class="row">
<div class="col col-33 col-offset-33">.col</div>
<div class="col">.col</div>
</div>
<div class="row">
<div class="col col-33">.col</div>
<div class="col col-33 col-offset-33">.col</div>
</div>
<div class="row">
<div class="col col-33 col-offset-67">.col</div>
</div>
Offset Column Percentage Classnames
-
.col-offset-10 10%
-
.col-offset-20 20%
-
.col-offset-25 25%
-
.col-offset-33 33.3333%
-
.col-offset-50 50%
-
.col-offset-67 66.6666%
-
.col-offset-75 75%
-
.col-offset-80 80%
-
.col-offset-90 90%
Grid: Vertically Align Columns
另一個技巧flexbox的套筒是能夠輕易列垂直對齊,對齊包括上、中、下。可以應用的每一行的一列，
或者特定的一列。
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">1<br>2<br>3<br>4</div>
</div>
<div class="row">
<div class="col col-top">.col</div>
<div class="col col-center">.col</div>
<div class="col col-bottom">.col</div>
<div class="col">1<br>2<br>3<br>4</div>
</div>
<div class="row row-top">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">1<br>2<br>3<br>4</div>
</div>
<div class="row row-center">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">1<br>2<br>3<br>4</div>
</div>
<div class="row row-bottom">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">1<br>2<br>3<br>4</div>
</div>
Responsive Grid
或許可能出這樣的現象，執行一行將不會非常適合到可選的區域；相應類可以在一行里應用；
例如：你想將一行欄做成堆棧的，當試圖非常小可以使用.responsive-sm類。
進一步配置，每個類使用sass變量。可根據你的喜歡改變。可以使用responsive-grid-break混入類
來創建自己的類；
Responsive Class Break when roughly
-
.responsive-sm Smaller than landscape phone
-
.responsive-md Smaller than portrait tablet
-
.responsive-lg Smaller than landscape tablet