ionic 的 CSS 框架主要提供預定義的 CSS 類，來幫助我們快速構(gòu)建適用于手機端的 UI。
ionic 的預定義 CSS 類主要分四個方面：
1、基本布局類
2、顏色和圖標類
3、界面組件類
4、柵格系統(tǒng)類
1、基本布局類
手機App開發(fā)實踐中，用戶界面通常劃分為幾個區(qū)域 -
標題header
內(nèi)容content
頁腳footer
1.1標題header 頁腳footer
定高條塊bar
樣式 .bar 將元素聲明為屏幕上絕對定位的塊狀區(qū)域，具有固定的高度（44px）
bar 子元素
有三種.bar子元素的樣式是預定義的：
1，標題文字 - 對包含標題文字的元素應(yīng)用.title樣式，通常使用h1元素。
2，按鈕 - 對用作按鈕的元素，應(yīng)用.button樣式，通常使用button 或a元素作為按鈕。注意按鈕將使用.bar的配色方案。
3，工具欄 - 工具欄包含一組按鈕。對用作工具欄的元素，應(yīng)用.button-bar樣式，通常 使用div元素作為工具欄。
bar 嵌入 input
在 bar 元素中嵌入 input 元素，需要注意兩點：
1,在條塊元素上應(yīng)用 item-input-inset 樣式
2,將input包裹在應(yīng)用 item-input-wrapper 樣式的元素內(nèi)
1.2內(nèi)容：content/scroll-content
ionic預定義了兩個內(nèi)容容器樣式：
content - 流式定位，內(nèi)容在文檔流中按順序定位
scroll-content - 絕對定位，內(nèi)容元素占滿整個屏幕
2、顏色和圖標類
2.1顏色
2.2圖標
ionic 使用 ionicons 圖標樣式庫。
使用圖標很簡單，在元素上聲明以下兩個 CSS 類即可：
.icon - 將元素聲明為圖標
.ion-{icon-name} - 聲明要使用的具體圖標
要了解有哪些圖標及具體名稱，需要訪問http://ionicons.com/。 點擊圖標即可查看其類名稱。
2.3內(nèi)邊距
樣式名很直白，邊距統(tǒng)一為10px?？梢栽谌魏卧厣蠎?yīng)用這些樣式。
3,界面組件
3.1列表：list
列表非常適合于手機屏幕上的信息的顯示。使用.list定義列表容器， 使用.item定義列表成員：
對列表外觀的定制化主要集中在.item元素上，.list元素僅有 少數(shù)的幾個樣式定義：
3.2成員項 : item
列表的樣式定制主要發(fā)生在.item元素上。
可以插入文本、徽章、圖標、圖像、按鈕元素：
在ionic中，頭像被設(shè)置為40x40固定大小
在ionic中，縮略圖被定義為80px大小，比頭像大，適合新聞圖片
注意：將img標簽放到.item內(nèi)容的開頭！
3.3按鈕：button
ionic 使用 .button 樣式定義按鈕元素：
一旦應(yīng)用了 .button 樣式，可以繼續(xù)選用兩類預定義樣式來進一步聲明元素及其內(nèi)容的外觀：
同級樣式 - 同級樣式與.button應(yīng)用在同一元素上，聲明元素的位置、配色等。
下級樣式 - 下級樣式只能應(yīng)用在.button的子元素上，聲明子元素的大小等特征。
3.4輸入組件容器：item-input
在ionic中，各種輸入組件被定義成不同的HTML模板，以便將描述標簽和輸入元素 打包在一起。在這個模板的根元素上，需要聲明.item-input樣式：
<any class="item-input">...</any>
不同的輸入元素有不同的模板定義。比如，文本輸入通常包含一個描述標簽：
<div class="item-input">
<label class="input-label">用戶名</label>
<input type="text" placeholder="請輸入你的用戶賬號">
</div>
onic 預定義了文本輸入、開關(guān)、復選按鈕、單選按鈕、選擇框、滑動條等常用輸入組件。
堆疊式標簽
<any class="item-input item-stacked-label">
<any class="input-label">...</any>
<input type="text" placeholder="...">
</any>
開關(guān)
開關(guān)的可視部件包括兩部分：滑軌（.track）和手柄（.handle）。 ionic使用如下HTML模板創(chuàng)建開關(guān)組件：
<any class="toggle">
<input type="checkbox">
<any class="track">
<any class="handle"></any>
</any>
</any>
復選按鈕
復選框通常用來在一組列表中選中部分成員，
復選按鈕的配色方案樣式為：.checkbox-{color}。
和開關(guān)一樣，復選按鈕也是基于HTML的checkbox input實現(xiàn)的：
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox">
</label>
<span>Do you agree?</span>
</li>
單選按鈕
單選按鈕的可視部件包括兩部分：選中圖標（.radio-icon） 和描述內(nèi)容（.item-content），你可以在內(nèi)容隨便添加 內(nèi)容。
單選按鈕通常不單獨使用，需要將他們放入一個列表中。
<label class="item item-radio">
<input type="radio" name="group">
<div class="item-content">支付寶網(wǎng)頁支付</div>
<i class="radio-icon ion-checkmark calm"></i>
</label>
選擇框
在每個平臺上，選擇框的表現(xiàn)形式都不一樣，例如，在PC上，是一個傳統(tǒng)的下拉框，在Android 是一個單選彈出窗
<label class="item item-select">
<span class="input-label">前端技術(shù)</span>
<select>
<option>HTML5</option>
<option selected>CSS3</option>
<option>ES6</option>
</select>
</label>
3.5滑動條
滑動條的可視部件包括三部分：左右圖標和中間的滑動條。 圖標是可選的，當不用圖標時，滑動條將占據(jù)整個寬度。
使用.range-{color}樣式聲明滑動條的配色方案，這主要影響滑軌的顏色。
<div class="item range range-positive">
<i class="icon ion-ios-volume-low"></i>
<input type="range" name="volume" value="30">
<i class="icon ion-ios-volume-high"></i>
</div>
3.6選項卡：tabs
ionic 中使用 .tabs 樣式聲明選項卡，使用 .tab-item 樣式聲明選項卡成員
選項卡默認地位于屏幕底部。
<ul class="tabs">
<li class="tab-item">...</any>
<li class="tab-item">...</any>
...
</ul>
圖標
標記
頂部選項卡
條帶風格選項卡
4、柵格系統(tǒng)
和 Bootstrap 一樣，ionic 也提供了柵格系統(tǒng)。不過 ionic 的實現(xiàn)是基于 CSS3 的 Flex Box 模型，更為靈活。
在ionic中使用柵格系統(tǒng)主要使用兩個類：
.row - 在容器元素上使用.row類，表示將其設(shè)置為彈性容器，即Flexible Box。
.col - 在子元素上使用.col類，其擴展系數(shù)和收縮系數(shù)都被設(shè)置為1。這意味著 所有的子元素將平分容器的寬度。
4.1默認的定寬列
在ionic的柵格中，每一行的各列默認是等寬的，這使得實現(xiàn)一個圖片 瀏覽界面非常簡單。
4.2col-{w-p} 指定列寬
我們也可以顯式地指定某些列的寬度：
.col-10 - 占據(jù)容器10%寬度
.col-20 - 占據(jù)容器20%寬度
.col-25 - 占據(jù)容器25%寬度
.col-33 - 占據(jù)容器33%寬度
.col-50 - 占據(jù)容器50%寬度
.col-67 - 占據(jù)容器67%寬度
.col-75 - 占據(jù)容器75%寬度
.col-80 - 占據(jù)容器80%寬度
4.3.col-offset-{w-p} 指定列偏移
列可以從默認位置偏移：
.col-offset-10 - 偏移默認位置10%容器寬度
.col-offset-20 - 偏移默認位置20%容器寬度
.col-offset-25 - 偏移默認位置25%容器寬度
.col-offset-33 - 偏移默認位置33%容器寬度
.col-offset-50 - 偏移默認位置50%容器寬度
.col-offset-67 - 偏移默認位置67%容器寬度
.col-offset-75 - 偏移默認位置75%容器寬度
.col-offset-80 - 偏移默認位置80%容器寬度
.col-offset-90 - 偏移默認位置90%容器寬度
4.4.col-{align} 列縱向?qū)R
如果一行中各元素的高度不一樣，那么比較矮的那些元素將自動被拉伸以適應(yīng) 整行的高度。
ionic提供了一些預置的CSS類用來 指定這些元素縱向的對齊方式：
.col-top - 讓元素縱向頂對齊
.col-center - 讓元素居中對齊
.col-bottom - 讓元素向底對齊
這是通過設(shè)置元素的align-self來實現(xiàn)的。
