ionic css布局介紹
1. 基本布局
2. 色彩、圖標(biāo)和邊距
3. 界面組件列表
4. 界面組件按鈕
5. 界面組件 表單輸入
6. 界面組件選項(xiàng)卡
7. 定制布局 柵格系統(tǒng)
------------------------------------------------
1． 基本布局
1.布局模式
基本布局： 標(biāo)題/header、內(nèi)容/content 和頁(yè)腳/footer。
標(biāo)題區(qū)總是位于屏幕頂部，頁(yè)腳區(qū)總是位于屏幕底部，而內(nèi)容區(qū)占據(jù)剩余的空間。 ionic 使用以下 CSS 類(lèi)
聲明對(duì)應(yīng)區(qū)域:
.bar.bar-header - 聲明元素為標(biāo)題區(qū)
.bar.bar-footer - 聲明元素為底部
.content . scroll-content- 聲明元素為內(nèi)容區(qū)
2. .bar 位置以及顏詳解
圖標(biāo)參考：http://ionicons.com/
樣式.bar 將元素聲明為屏幕上絕對(duì)定位的塊狀區(qū)域，具有 固定的高度（ 44px）：
使用方式：
1.
3. .bar : 位置
ionic 使用以下樣式定義條塊的位置：
.bar-header - 置頂
.bar-subheader - header 之下置頂
.bar-footer - 置底
.bar-subfooter - footer 之上置底
下面例子，使用了三個(gè)條塊：標(biāo)題、副標(biāo)題、頁(yè)腳：
4. .bar : 嵌入子元素
在 ionic 中，有三種.bar 子元素的樣式是預(yù)定義的：
標(biāo)題文字 - 對(duì)包含標(biāo)題文字的元素應(yīng)用.title 樣式，通常使用 h2 元素：
按鈕 - 對(duì)用作按鈕的元素，應(yīng)用.button 樣式，通常使用 button 或 a 元素作為按鈕。注意按鈕
將使用.bar 的配色方案：
工具欄 - 工具欄包含一組按鈕。對(duì)用作工具欄的元素，應(yīng)用.button-bar 樣式，通常 使用 div
元素作為工具欄：
5. bar : 嵌入 input
一種常見(jiàn)的 UI 模式是在標(biāo)題欄中嵌入搜索欄，比如美團(tuán)：
在.bar 元素中嵌入 input 元素，需要注意兩點(diǎn)：
1. 在條塊元素上應(yīng)用.item-input-inset 樣式
2. 將 input 包裹在應(yīng)用.item-input-wrapper 樣式的元素內(nèi)
這是因?yàn)?，?ionic 的實(shí)現(xiàn)中， .bar 中的.input 樣式定義如下：
.bar.item-input-inset{
.item-input-wrapper{
.input{
...
}
}
}
6. 內(nèi)容： .content 和.scroll-content
ionic 預(yù)定義了兩個(gè)內(nèi)容容器樣式：
.content – 相對(duì)定位
.scroll-content - 絕對(duì)定位，內(nèi)容元素占滿整個(gè)屏幕
這兩種樣式都可以使用以下樣式進(jìn)一步確定位置及范圍：
2． Ionic色彩、圖標(biāo)和邊距
1.ionic定義了九種前景/背景/邊框的色彩樣式
2.ionic中的圖標(biāo)
ionic 使用 ionicons 圖標(biāo)樣式庫(kù)。 ionicons 采用了 TrueType 字體實(shí)現(xiàn)圖標(biāo)樣式，有超過(guò)
500 個(gè)圖標(biāo)可供選擇。
使用圖標(biāo)很簡(jiǎn)單，在元素上聲明以下兩個(gè) CSS 類(lèi)即可：
.icon- 將元素聲明為圖標(biāo)
.ion-{icon-name}- 聲明要使用的具體圖標(biāo)
通常使用 i 元素定義圖標(biāo)，例如下面聲明了元素顯示 ion-home 圖標(biāo)：
要了解有哪些圖標(biāo)及具體名稱，需要訪問(wèn) ionics.com。 點(diǎn)擊某個(gè)圖標(biāo)即可查看其 CSS 類(lèi)名
稱。
可以在任何元素中插入圖標(biāo)，使用元素的 font-size 樣式指定圖標(biāo)的大?。?br />
3.Ionic內(nèi)邊距
ionic 定義了常用的內(nèi)邊距樣式：
樣式名很直白，邊距統(tǒng)一為 10px。可以在任何元素上應(yīng)用這些樣式。
3． ionic界面組件列表
1. 列表 : .list
列表非常適合于手機(jī)屏幕上的信息的顯示。使用.list 定義列表容器， 使用.item 定義列表
成員：
對(duì)列表外觀的定制化主要集中在.item 元素上， .list 元素僅有 少數(shù)的幾個(gè)樣式定義：
2. 成員容器 : .item
列表的樣式定制主要發(fā)生在.item 元素上。在.item 元素內(nèi)， 可以插入文本、徽章、圖標(biāo)、
圖像（頭像、縮略圖或大圖）、按鈕等各種 樣式的元素：
3. .item : 嵌入文本
列表成員中經(jīng)常需要顯示不同規(guī)格的文本，比如新聞列表：
.item 元素可以使用 h2~h7/p 標(biāo)簽插入不同規(guī)格的文本。
帶徽章所需樣式：badge
15
4. .item : 嵌入圖標(biāo)
列表成員的內(nèi)容中插入圖標(biāo)，比單純的文字更加生動(dòng)：
要插入圖標(biāo)，需要滿足兩個(gè)條件：
1. 在.item 元素上聲明圖標(biāo)位置。圖標(biāo)可以位于列表的左側(cè)或右側(cè)， 分別使
用.item-icon-left 和.item-icon-right 聲明
2. 在.item 元素內(nèi)插入圖標(biāo) list-inset。
5. .item : 嵌入頭像
很多社交 App 中，一個(gè)相當(dāng)固定的 UI 模式是包含用戶頭像的信息列表：
在 ionic 中，頭像被設(shè)置為 40x40 固定大小。和插入圖標(biāo)類(lèi)似，向.item 中插入頭像需要滿
足兩個(gè)條件：
1. 在.item 元素上聲明頭像位置。頭像可以位于列表的左側(cè)或右側(cè)， 分別使
用.item-avatar-left 和.item-avatar-right 聲明
2. 在.item 元素內(nèi)使用 img 標(biāo)簽插入頭像。
6. .item : 嵌入縮略圖
回到今日頭條的新聞列表，我們給它加上兩張新聞圖片：
在 ionic中，縮略圖被定義為 80px大小，比頭像大，適合新聞圖片。 和插入頭像類(lèi)似，向.item
中插入縮略圖需要滿足兩個(gè)條件：
1. 在.item 元素上聲明縮略圖位置?？s略圖可以位于列表的左側(cè)或右側(cè)， 分別使
用.item-thumbnail-left 和.item-thumbnail-right 聲明
2. 在.item 元素內(nèi)使用 img 標(biāo)簽插入頭像。
注意：將 img 標(biāo)簽放到.item 內(nèi)容的開(kāi)頭！
7. .item : 嵌入大圖 item-p_w_picpath
8. .item card
要插入圖標(biāo)，需要滿足兩個(gè)條件：
1. . card 可以讓 list 和左右有一些邊距
2. 在. item-divider 元素定義 list 的頭和尾
4． ionic界面組件按鈕
1. 按鈕 : .button
ionic 使用.button 樣式定義按鈕元素：
一旦元素應(yīng)用了.button 樣式，就可以繼續(xù)選用兩類(lèi)預(yù)定義樣式來(lái)進(jìn)一步 聲明元素及其內(nèi)
容的外觀：
1. 同級(jí)樣式 - 同級(jí)樣式與.button 應(yīng)用在同一元素上，聲明元素的位置、配色等。
2. 下級(jí)樣式 - 下級(jí)樣式只能應(yīng)用在.button 的子元素上，聲明子元素的大小等特征。
2. .button : 嵌入圖標(biāo)
使用內(nèi)置的 Ionicons 樣式，圖標(biāo)可以很容易地加入到.button 中：
Home
但是更簡(jiǎn)潔的辦法是：直接在.button 上設(shè)置樣式，這樣可以有效減少元素的數(shù)目：
...
.icon-left - 將圖標(biāo)置于按鈕左側(cè)
.icon-right - 將圖標(biāo)置于按鈕右側(cè)
3. 在列表中使用按鈕
和插入圖標(biāo)類(lèi)似，向.item 中插入按鈕需要滿足兩個(gè)條件：
1. 在.item 元素上聲明按鈕位置。按鈕可以位于列表的左側(cè)或右側(cè)， 分別使
用.item-button-left 和.item-button-right 聲明
2. 在.item 元素內(nèi)插入按鈕。
4. button-block
button 顯示成塊元素
交流QQ群：187269144
QQ群2：438443293
QQ群3：248403526
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
重慶分公司
重慶分公司
