ionic css布局介紹(一)

                                                ionic css 布局介紹

1. 基本布局
2. 色彩、圖標(biāo)和邊距
3. 界面組件列表
4. 界面組件按鈕
5. 界面組件 表單輸入
6. 界面組件選項卡
7. 定制布局 柵格系統(tǒng)
------------------------------------------------

1． 基本布局

1.布局模式

基本布局： 標(biāo)題/header、內(nèi)容/content 和頁腳/footer。

標(biāo)題區(qū)總是位于屏幕頂部，頁腳區(qū)總是位于屏幕底部，而內(nèi)容區(qū)占據(jù)剩余的空間。 ionic 使用以下 CSS 類
聲明對應(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 將元素聲明為屏幕上絕對定位的塊狀區(qū)域，具有 固定的高度（ 44px）：

使用方式：

1. <any class="bar">...</any>

3. .bar : 位置

ionic 使用以下樣式定義條塊的位置：

.bar-header - 置頂
.bar-subheader - header 之下置頂

.bar-footer - 置底
.bar-subfooter - footer 之上置底

下面例子，使用了三個條塊：標(biāo)題、副標(biāo)題、頁腳：

4. .bar : 嵌入子元素

在 ionic 中，有三種.bar 子元素的樣式是預(yù)定義的：
標(biāo)題文字 - 對包含標(biāo)題文字的元素應(yīng)用.title 樣式，通常使用 h2 元素：

<any class="bar">
<any class="title">...</any>
</any>

按鈕 - 對用作按鈕的元素，應(yīng)用.button 樣式，通常使用 button 或 a 元素作為按鈕。注意按鈕
將使用.bar 的配色方案：

<any class="bar">
<any class="button">...</any>
</any>

工具欄 - 工具欄包含一組按鈕。對用作工具欄的元素，應(yīng)用.button-bar 樣式，通常 使用 div
元素作為工具欄：

<any class="bar">
<any class="button-bar">...</any>
</any>

5. bar : 嵌入 input

一種常見的 UI 模式是在標(biāo)題欄中嵌入搜索欄，比如美團(tuán)：

在.bar 元素中嵌入 input 元素，需要注意兩點：
1. 在條塊元素上應(yīng)用.item-input-inset 樣式
2. 將 input 包裹在應(yīng)用.item-input-wrapper 樣式的元素內(nèi)
這是因為，在 ionic 的實現(xiàn)中， .bar 中的.input 樣式定義如下：

.bar.item-input-inset{
.item-input-wrapper{
.input{
...
}
}
}

6. 內(nèi)容： .content 和.scroll-content
ionic 預(yù)定義了兩個內(nèi)容容器樣式：
.content – 相對定位
.scroll-content - 絕對定位，內(nèi)容元素占滿整個屏幕
這兩種樣式都可以使用以下樣式進(jìn)一步確定位置及范圍：

2． Ionic 色彩、圖標(biāo)和邊距
1.ionic 定義了九種前景/背景/邊框的色彩樣式

2.ionic 中的圖標(biāo)

ionic 使用 ionicons 圖標(biāo)樣式庫。 ionicons 采用了 TrueType 字體實現(xiàn)圖標(biāo)樣式，有超過
500 個圖標(biāo)可供選擇。
使用圖標(biāo)很簡單，在元素上聲明以下兩個 CSS 類即可：
.icon - 將元素聲明為圖標(biāo)
.ion-{icon-name} - 聲明要使用的具體圖標(biāo)
通常使用 i 元素定義圖標(biāo)，例如下面聲明了元素顯示 ion-home 圖標(biāo)：
<i class="icon ion-home"></i>
要了解有哪些圖標(biāo)及具體名稱，需要訪問 ionics.com。 點擊某個圖標(biāo)即可查看其 CSS 類名
稱。
可以在任何元素中插入圖標(biāo)，使用元素的 font-size 樣式指定圖標(biāo)的大?。?br /><any >
<i class="icon ion-search"></i>
</any>
3.Ionic 內(nèi)邊距
ionic 定義了常用的內(nèi)邊距樣式：
樣式名很直白，邊距統(tǒng)一為 10px?？梢栽谌魏卧厣蠎?yīng)用這些樣式。

3． ionic 界面組件列表
1. 列表 : .list
列表非常適合于手機(jī)屏幕上的信息的顯示。使用.list 定義列表容器， 使用.item 定義列表
成員：
<any class="list">
<any class="item">...</any>
<any class="item">...</any>
<any class="item">...</any>
<any class="item">...</any>
</any>

對列表外觀的定制化主要集中在.item 元素上， .list 元素僅有 少數(shù)的幾個樣式定義：

2. 成員容器 : .item
列表的樣式定制主要發(fā)生在.item 元素上。在.item 元素內(nèi)， 可以插入文本、徽章、圖標(biāo)、
圖像（頭像、縮略圖或大圖）、按鈕等各種 樣式的元素：

3. .item : 嵌入文本
列表成員中經(jīng)常需要顯示不同規(guī)格的文本，比如新聞列表：

.item 元素可以使用 h2~h7/p 標(biāo)簽插入不同規(guī)格的文本。

帶徽章所需樣式：badge

<i class="badge positive-bg light">15</i>

4. .item : 嵌入圖標(biāo)
列表成員的內(nèi)容中插入圖標(biāo)，比單純的文字更加生動：

要插入圖標(biāo)，需要滿足兩個條件：
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 中，一個相當(dāng)固定的 UI 模式是包含用戶頭像的信息列表：

在 ionic 中，頭像被設(shè)置為 40x40 固定大小。和插入圖標(biāo)類似，向.item 中插入頭像需要滿
足兩個條件：
1. 在.item 元素上聲明頭像位置。頭像可以位于列表的左側(cè)或右側(cè)， 分別使
用.item-avatar-left 和.item-avatar-right 聲明
2. 在.item 元素內(nèi)使用 img 標(biāo)簽插入頭像。

6. .item : 嵌入縮略圖
回到今日頭條的新聞列表，我們給它加上兩張新聞圖片：

在 ionic中，縮略圖被定義為 80px大小，比頭像大，適合新聞圖片。 和插入頭像類似，向.item
中插入縮略圖需要滿足兩個條件：
1. 在.item 元素上聲明縮略圖位置。縮略圖可以位于列表的左側(cè)或右側(cè)， 分別使
用.item-thumbnail-left 和.item-thumbnail-right 聲明
2. 在.item 元素內(nèi)使用 img 標(biāo)簽插入頭像。
注意：將 img 標(biāo)簽放到.item 內(nèi)容的開頭！

7. .item : 嵌入大圖 item-p_w_picpath

8. .item card

要插入圖標(biāo)，需要滿足兩個條件：
1. . card 可以讓 list 和左右有一些邊距
2. 在. item-divider 元素定義 list 的頭和尾
<div class="list card">
</div>

<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>

4． ionic 界面組件按鈕
1. 按鈕 : .button
ionic 使用.button 樣式定義按鈕元素：
<any class="button">...</any>
一旦元素應(yīng)用了.button 樣式，就可以繼續(xù)選用兩類預(yù)定義樣式來進(jìn)一步 聲明元素及其內(nèi)
容的外觀：
1. 同級樣式 - 同級樣式與.button 應(yīng)用在同一元素上，聲明元素的位置、配色等。
2. 下級樣式 - 下級樣式只能應(yīng)用在.button 的子元素上，聲明子元素的大小等特征。

2. .button : 嵌入圖標(biāo)
使用內(nèi)置的 Ionicons 樣式，圖標(biāo)可以很容易地加入到.button 中：
<a class="button">
<i class="icon ion-home"></i>Home
</a>
但是更簡潔的辦法是：直接在.button 上設(shè)置樣式，這樣可以有效減少元素的數(shù)目：
<a class="button icon-left ion-home">...</a>
.icon-left - 將圖標(biāo)置于按鈕左側(cè)
.icon-right - 將圖標(biāo)置于按鈕右側(cè)

3. 在列表中使用按鈕
和插入圖標(biāo)類似，向.item 中插入按鈕需要滿足兩個條件：
1. 在.item 元素上聲明按鈕位置。按鈕可以位于列表的左側(cè)或右側(cè)， 分別使
用.item-button-left 和.item-button-right 聲明
2. 在.item 元素內(nèi)插入按鈕。
4. button-block
button 顯示成塊元素
<button class="button button-calm button-block">button-light</button>

交流QQ群：187269144 

QQ群2：438443293

QQ群3：248403526