導航添加依據 http://amazeui.org/css/ 下面內容屬學習筆記，如有理解偏差和錯誤請留言相告，感謝！* =（官網這塊寫的很詳細）
一、基本樣式
1.統一樣式
說明了為什么使用Normalize，而不是Rest。
2.基礎設置
a.css和模型
講了一個CSS3的新屬性：box-sizing。作為一個技術不到位的人，真沒看懂。自己查了下如下：
box-sizing的3種屬性取一即可
box-sizing:content-box | padding-box | border-box
box-sizing:content-box; /*寬度里面只包含內容*/
box-sizing:padding-box; /*寬度里面不包含padding*/
box-sizing:border-box; /*寬度里面不包含padding和border*/
b.字號及單位
講的em和rem和用法及注意事項。
rem 永遠基於根
em 繼承
比如
html{font-size:75%; /* 12÷16=75% */} /*這里定義了字體為12px*/
body{font-size:12px;font-size:1rem ; /* 12÷12=1 */} /*基於跟也就是html 只需要寫1rem即可，作用同12px。這里加上12px是為了兼容IE系列瀏覽器*/
3.文字排版*
a.字體
b.元素基本樣式
4.打印樣式
a.顯示URL連接 通過content把鏈接加在元素之后 類似：after
b.輔助Class 可以理解為打印機hack開關 ~~
c.參考鏈接 沒看
二、局相關
1.網格
Amaze UI 使用了 12 列的響應式網格系統。並提供了3種響應區間
am-u-sm-* 0-640px
am-u-md-* 640px-1024px
am-u-lg-* 1025px+
a.流式布局
.am-g 未限定寬度可以通過.am-g-fixed 來自由限定
.am-container至於它，我也不知道它是用來搞毛的~
b.基本使用*
c.列邊距*
d.不足12列的網格
實際使用中，如果行的網格數不足 12，需要在最后一列上添加 .am-u-end。
e.居中的列
添加 .am-u-xx-centered 實現列居中：
- 如果始終的設為居中，只需要添加
.am-u-sm-centered（移動優先，繼承）； - 某些區間不居中添加，
.am-u-xx-uncentered。
f.列排序*
2.等分網格
am-avg-sm-* 0-640px
am-avg-md-* 640px-1024px
am-avg-lg-* 1025px+
與布局網格不同的是，這里的數字表示幾等分，而不是占 12 等分中的幾列，比如 .am-avg-sm-2 會將子元素 <li> 的寬度設置為 50%。
a.基本使用*
b.響應式*
3.輔助類*
a.布局相關
b.文本工具
c.響應式輔助
三、HTML元素
1.按鈕* 只要添加對應的class就好啦！
a.基本使用
默認按鈕樣式 .am-btn
圓角按鈕樣式 .am-radius
橢圓按鈕樣式 .am-round
b.按鈕狀態
激活狀態：在按鈕上添加 .am-active class。
禁用狀態：在按鈕上設置 disabled 屬性或者添加 .am-disabled class。
c.按鈕尺寸 逐級變小
.am-btn-xl.am-btn-lg.am-btn-default.am-btn-sm.am-btn-xs
d.塊級顯示 添加 .am-btn-block class。
e.按鈕Icon 使用 Icon 之前需先引入 Icon 組件
2.代碼*
a.行內代碼 使用<code>標簽實現代碼高亮。
b.代碼片段 使用<pre>原格式輸出。
c.代碼高度 添加 .am-pre-scrollable 限制代碼塊高度，默認為 24rem。
3.表單
在容器上添加 .am-form class，容器里的子元素才會應用 Amaze UI 定義的樣式。
a.基本使用
checkbox、radio 類型的 <input> 與其他元素稍有區別：
- 塊級顯示時在容器上添加
.am-checkbox、.am-radioclass； - 行內顯示時在容器上添加
.am-checkbox-inline、.am-radio-inlineclass。
b.表單域狀態 只講了表單元素和a標簽的禁用
表單標簽內部添加disabled屬性
<a> 元素設置禁用狀態需要加上 .am-disabled class。
c.表單排列
在 <form> 添加 .am-form-horizontal class 並結合網格系統使用。
在外圍容器上添加 .am-form-inline。 注意： 行內排列的元素並沒有設置右邊距，默認使用 inline-block 元素的間距，壓縮 HTML 后行內表單元素的右邊距會消失，需要自行處理。
d.表單域Icon
表單 group 元素上添加 .am-form-icon，依賴 icon 組件。
e.驗證狀態
添加 .am-form-icon 和 .am-form-feedback。
注意：Icon 的樣式針對 .am-form-group 單行排列編寫，多行的時候會出現位置不對的情況。
f.表單域大小
.am-input-lg 和 .am-input-sm
g.輸入框組件
使用 .am-form-set 嵌套一系列 <input> 元素。
4.圖片
a.基礎樣式
img {
box-sizing: border-box;
max-width: 100%;
height: auto;
vertical-align: middle;
border: 0;
}
b.寬度自適應 如果要讓圖片始終和容器一樣寬，需要設置 width: 100%。
c.增強樣式 為<img>元素設置不同的 class，增強其樣式。
.am-img-radius圓角.am-img-round橢圓.am-img-circle圓形，一般用於正方形的圖片(你要覺得橢圓好看，用在長方形上也可以)
5.表格
a.基本樣式 添加 .am-table。
b.基本邊框 添加 .am-table-bordered 類。
c.圓角邊框 同時添加 .am-table-bordered 、 .am-table-radius，外層圓角邊框通過 box-shadow 實現。
e.單元格狀態 表示表格狀態的 class 添加到 tr 整行整行，添加到 td 高亮單元格。
.am-active激活；.am-disabled禁用；.am-primary藍色高亮；.am-success綠色高亮；.am-warning橙色高亮；.am-danger紅色高亮。
f.其它效果
.am-table-striped斑馬紋效果.am-table-hoverhover 狀態
g.所有樣式疊加 *
h.參考資源 表格排序 jQuery Table Sort
四、常用組件
1.小徽章
a.默認樣式 添加 .am-badge class 到 <div> 或者 <span> 元素。
b.圓角樣式 在默認樣式的基礎上添加 .am-radius class。
c.橢圓樣式 在默認樣式的基礎上添加 .am-round class。
d.大小 結合輔助類中的字號 class，改變徽章大小.
2.面包屑導航 .am-breadcrumb 面包屑導航。
3.按鈕組
a.把一系列要使用的 .am-btn 按鈕放入 .am-btn-group
b.將 .am-btn-group 放進 .am-btn-toolbar，實現工具欄效果。
c.給 .am-btn-group 增加 class .am-btn-group-lg 或 .am-btn-group-sm 或 .am-btn-group-xs 改變按鈕大小。
d.使用 .am-btn-group-stacked 使按鈕垂直排列顯示。
e.添加 .am-btn-group-justify class 讓按鈕組里的按鈕平均分布，填滿容器寬度。
注意： 只適用 。<a> 元素，<button> 不能應用 display: table-cell 樣式
使用 flexbox 實現，只兼容 IE 10+ 及其他現代瀏覽器。
4.關閉按鈕
關閉按鈕樣式，可以結合其他不同組件使用。對 <a> 或者 <button> 添加 .am-close class。
a.在元素上添加 .am-close class。
b.添加 .am-close-alt class。
c.添加 .am-close-spin class（需支持 CSS3 transform）。
5.評論列表
6.圖標
a.使用方法 在 HTML 上添加添加 am-icon-{圖標名稱} class。
b.圖標大小
.am-icon-sm，放大 150%.am-icon-md，放大 200%.am-icon-lg，放大 250%
c.button Icon 在 Icon 上添加 .am-btn-icon class。
d.旋轉動畫 注意：Chrome 和 Firefox 下， display: inline-block; 或 display: block; 的元素才會應用旋轉動畫。
e.復制圖標
f.存在問題
g.所有圖標列表
7.輸入框組 Input group 基於 Form 組件和 Button 組件擴展，依賴這兩個組件。
在容器上添加 .am-input-group，在標簽文字上添加 .am-input-group-label，具體請查看示例代碼。
a.基本使用
復選/單選框與輸入框 ：將單選框與復選框放入 .am-input-group-label 內。
輸入框結合 Button:需要用 .am-input-group-btn 包住按鈕，而不是 .am-input-group-label。
b.樣式變換
在 .am-input-group 添加標明尺寸的 class 即可。
包含 .am-input-group-lg、.am-input-group-sm。
8.列表
a.基本樣式
鏈接列表：使用 <ul> 結構嵌套鏈接列表，添加 .am-list。
純文字列表:在 .am-list 的基礎上添加 .am-list-static。
b.樣式變換
列表邊框：在容器上添加 .am-list-border class。
斑馬紋：添加 .am-list-striped class。
c.組合使用
添加 Badge與 Panel 組合 見 Panel 組件。
9.導航
a.基本樣式 <ul> 添加 .am-nav class 以后就是一個基本的垂直導航。默認樣式中並沒有限定導航的寬度，可以結合網格使用。
b.水平導航 在 .am-nav 的基礎上再添加 .am-nav-pills，形成一個水平導航。
c.標簽式導航 在 .am-nav 的基礎上添加 .am-nav-tabs，形成一個標簽式的導航。激活的標簽在 <li> 上添加 .am-active。
d.寬度自適應
在水平導航或標簽式導航上添加 .am-nav-justify 讓 <li> 平均分配寬度（通過display: table-cell 實現）。
平均分配只在 media-up (> 640px) 有效，<= 640px 時菜單會垂直堆疊（縮小瀏覽器窗口效果可以查看效果）。
e.導航狀態 導航狀態 class 添加在 <li> 上。
.am-disabled- 禁用.am-active- 激活
f.導航標題及分割線 導航標題及分隔線目前僅適用於垂直菜單。
.am-nav-header導航標題，直接放在<li>中。.am-nav-divider導航分隔線，添加到空的<li>上。
g.下拉菜單 需結合 JS Dropdown 組件使用。