AmazeUI佈局

　　AmazeUI使用了12列的響應式網絡系統。使用時需在外圍容器上添加.am-g class，在列上添加.am-u-[sm|md|lg]-[1-12] class，而後根據不一樣的屏幕需求設置不一樣的寬度。　　

　am-u-sm-*  0-640px     am-u-md-*  641px-1024px  am-u-lg-* 1025px+

　AmazeUI以移動優先的理念開發，若不設置大屏的網絡，應用到小屏幕的樣式會繼承到更大的屏幕上。

　am-g：網格的行，用於包裹列，清楚列的浮動

　am-u-xx-n：網格中的列，xx爲視口區間，n爲該列所佔的份數

　sm區間兩列是等分的，md區間爲1:2劃分，lg區間爲1:3劃分

　.am-g的寬度別設置爲100%，爲限定最大寬度，會隨着窗口自動縮放。能夠在行內添加,am-g-fixed class，將最大寬度(max-width)限制爲1000px。

　全寬的行 .am-container。am-container和網格列設置了相同的左右padding，能夠和網格內容對齊。

　網格拆分時使用了非證書百分比(100/12*n)，瀏覽器在計算的時候會有差別，最終全部列的寬度可能沒有達到100%，致使網格右側會有很小的空隙。實際使用中，若網格數不足12，須要在最後一列加上.am-u-end。

 

 

　　響應式佈局

　響應式輔助類控制元素顯隱 am-show-md-down  am-hide-md-down

　邊距離 am-u-sm-offset-1（1-10）

　列居中 am-u-xx-centered  如 am-u-sm-centered　　

　列不居中 am-u-xx-uncentered  如  am-u-sm-uncentered

　列排序：處於SEO考慮，有時會有一些結構和表現不一致的狀況，能夠經過am-u-xx-push-*/am-u-xx-pull-*來實現。

　移出行內邊距 am-g-collapse

 

　　

　　AVG-Grid（均分網格） 使用ul/ol建立等分列，用於內容的排列。只能用於<ul><ol>結構。

　am-avg-sm-*  0-640px  

　am-avg-md-*  641px-1024px

　am-avg-lg-*    1024px+　

　　*表示幾等分，而不是佔12列中的幾列。

　只添加.am-avg-sm-*應用於全部屏幕尺寸。

　<ul class="am-avg-sm-4 am-thumbnails">

　　<li><img class="am-thumbnail" src="" /></li>

　</ul>

　　九宮格

　<ul class="am-avg-sm-3 boxes">

　　　<li class="box box-1">1</li>

　　　　...

　　　<li class="box box-9">9</li>

　</ul>

 

 

　　水平滾動 am-scrollable-horizontal 

　　垂直滾動 am-scrollable-vertical

　　清除浮動 am-cf 

　　建立新的BFC清除浮動  am-nbfc

　　左浮動 am-fl

　　右浮動 am-fr

　　水平居中 am-center

　　垂直對齊原理是把父容器內的「幽靈」元素的高度設置爲100%，再經過設置須要對齊的元素vertical-align屬性實現。

　　am-vertical-align  將這個class添加到父容器中，父容器須要指定高度

　　am-vertical-align-middle  須要垂直居中的元素

　　am-vertical-align-bottom  添加到須要底部對齊的元素

　　am-block  display設置爲block

　　am-inline  display設置爲block

　　am-inline-block display設置爲inline-block　

　　am-hide 隱藏元素

　　尺寸 xs：5px  sm：10px  default：16px  lg：24px  xl：32px  

　　文本顏色  am-text-xx(primary;secondary,success,warning,danger)

　　連接顏色默認爲藍色，使用am-link-muted能夠將連接顏色設置爲灰色

　　文字大小 am-test-xs：12px am-text-sm：14px am-text-default：16px am-text-lg：18px am-text-xl：24px  am-text-xxl：32px am-text-xxxl：42px

　　文本對齊 am-text-left（左對齊） am-text-right（右對齊） am-text-center（居中） am-text-justify（自適應）

　　文本垂直對齊 am-text-top頂對齊   am-text-middle居中對齊   am-text-bottom底對齊

　　am-text-truncate 禁止換行，超出容器部分階段。以...結束

　　am-text-break 超出文字容器寬度時強制換行，主要用於英文排版

　　am-text-nowrap 禁止換行，不截斷超出容器寬度部分

　　Webkit內核的瀏覽器能夠經過-webkit-line-clamp私有屬性實現多行文字截取。其餘瀏覽器沒有這個屬性，一般作法是把容器的高度限定爲行高*顯示的行數，超出的部分隱藏。

　　.line-clamp {
　　　　overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
　　　　-webkit-line-clamp: 2; // 這裏修改成要顯示的行數
　　　　-webkit-box-orient: vertical;
　　}

　　

　　CSS Image Replacement，圖片替換計算兼顧顯示效果、可仿性、SEO。使用am-text-ir class結合背景圖片實現圖片替換

　　使用float實現相似html的align屬性的效果，父容器要清楚浮動。與.am-fl、am-fr相比，浮動的元素添加了margin。am-align-right am-align-left

　　調整瀏覽器窗口大小查看元素的顯隱 am-[show|hide]-[sm|md|lg][-up|-down|-only]

　　am-show-sm-only 只在sm區間顯示

　　am-show-sm-up  大於sm區間時顯示

　　am-show-md-down 小於sm區間時顯示

　　am-show-sm 在sm區間顯示

　　橫屏 am-show-landscape  am-hide-landscape

　　豎屏 am-show-portrait  am-hide-portrait