ionic css布局介紹(一)

                                                ionic css 布局介紹

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

1． 基本布局

1.布局模式

基本布局： 標題/header、內容/content 和頁腳/footer。

標題區總是位于屏幕頂部，頁腳區總是位于屏幕底部，而內容區占據剩余的空間。 ionic 使用以下 CSS 類
聲明對應區域:

.bar.bar-header - 聲明元素為標題區
.bar.bar-footer - 聲明元素為底部
.content . scroll-content- 聲明元素為內容區

2. .bar 位置以及顏詳解

圖標參考：http://ionicons.com/

樣式.bar 將元素聲明為屏幕上絕對定位的塊狀區域，具有 固定的高度（ 44px）：

使用方式：

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

3. .bar : 位置

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

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

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

下面例子，使用了三個條塊：標題、副標題、頁腳：

4. .bar : 嵌入子元素

在 ionic 中，有三種.bar 子元素的樣式是預定義的：
標題文字 - 對包含標題文字的元素應用.title 樣式，通常使用 h2 元素：

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

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

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

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

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

5. bar : 嵌入 input

一種常見的 UI 模式是在標題欄中嵌入搜索欄，比如美團：

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

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

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

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

2.ionic 中的圖標

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

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

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

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

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

.item 元素可以使用 h2~h7/p 標簽插入不同規格的文本。

帶徽章所需樣式：badge

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

4. .item : 嵌入圖標
列表成員的內容中插入圖標，比單純的文字更加生動：

要插入圖標，需要滿足兩個條件：
1. 在.item 元素上聲明圖標位置。圖標可以位于列表的左側或右側， 分別使
用.item-icon-left 和.item-icon-right 聲明
2. 在.item 元素內插入圖標 list-inset。

5. .item : 嵌入頭像
很多社交 App 中，一個相當固定的 UI 模式是包含用戶頭像的信息列表：

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

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

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

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

8. .item card

要插入圖標，需要滿足兩個條件：
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>
一旦元素應用了.button 樣式，就可以繼續選用兩類預定義樣式來進一步 聲明元素及其內
容的外觀：
1. 同級樣式 - 同級樣式與.button 應用在同一元素上，聲明元素的位置、配色等。
2. 下級樣式 - 下級樣式只能應用在.button 的子元素上，聲明子元素的大小等特征。

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

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

交流QQ群：187269144 

QQ群2：438443293

QQ群3：248403526