Ioniccss主要由以下4部分組成

1.基本布局類

2.顏色和圖標類

3.界面組件類

4.柵格系統(tǒng)類

一、布局

1.定高條塊定義

.bar——將元素聲明為屏幕上絕對定位的塊狀區(qū)域，具有固定的高度（44px）

效果截圖

2.條塊位置

.bar-header - 置頂

.bar-subheader - header之下置頂

.bar-footer - 置底

.bar-subfooter - footer之上置底

3.內容

.content - 流式定位，內容在文檔流中按順序定位

.scroll-content - 絕對定位，內容元素占滿整個屏幕

4.bar子元素

有三種.bar子元素的樣式是預定義的：

...

標題文字- 對包含標題文字的元素應用.title樣式，通常使用h1元素。

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

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

5.bar嵌入input

在條塊元素上應用.item-input-inset樣式

將input包裹在應用.item-input-wrapper樣式的元素內