AmazeUI 框架知識點－組件

1、Badge

　　默認：添加 .am-badge class 到 <div> 或者 <span> 元素。

　　圓角：在默認樣式的基礎上添加 .am-radius class。

　　橢圓：在默認樣式的基礎上添加 .am-round class。

　　大小：結合輔助類中的字號 class，改變徽章大小。am-text-sm

2、面包屑導航：

　　.am-breadcrumb 默認分隔符  寫在父級 ol\ul

　　am-breadcrumb am-breadcrumb-slash 斜杠分割

　　結合icon  <li><a href="#" class="am-icon-home">首頁</a></li>

3、按鈕

4、關閉按鈕 

　　在元素上添加 .am-close   形狀是×

　　帶邊框是：添加 .am-close-alt

　　使用 Icon Font   class="am-close am-close-alt am-icon-times"

　　hover 旋轉  .am-close-spin

5、評論列表 am-comment  （文檔）

6、icon圖標

　　在 HTML 上添加添加 am-icon-{圖標名稱} class。

　　.am-icon-sm放大 150%。。。。

　　.am-icon-btn 可以是一個圖標按鈕

　　.am-icon-spin icon旋轉

　　添加 .am-icon-fw 將圖標設置為固定的寬度，解決寬度不一致問題

7、鏈接列表：

　　鏈接列表：使用 <ul> 結構嵌套鏈接列表，添加 .am-list。

　　截斷列表：在 <a> 上添加 .am-text-truncate class 可以實現(xiàn)文字超出一行時截斷為 ...

　　純文字列表：在 .am-list 的基礎上添加 .am-list-static。

　　列表邊框：在容器上添加 .am-list-border class。

　　斑馬紋：添加 .am-list-striped class。

　　添加 Badge  class="am-badge am-badge-success"

　　添加 ICON  <i class="am-icon-home am-icon-fw"></i>

8、導航

　　導航樣式組件，在 <ul> 鏈接列表中添加 .am-nav class

　　<ul> 添加 .am-nav class 以后就是一個基本的垂直導航。默認樣式中并沒有限定導航的寬度，可以結合網格使用。

　　在 .am-nav 的基礎上再添加 .am-nav-pills，形成一個水平導航。

　　在 .am-nav 的基礎上添加 .am-nav-tabs，形成一個標簽式的導航。激活的標簽在 <li> 上添加.am-active。

　　寬度自適應：在水平導航或標簽式導航上添加 .am-nav-justify 讓 <li> 平均分配寬度（通過display: table-cell 實現(xiàn)）。

　　.am-nav-header 導航標題，直接放在 <li> 中。

　　.am-nav-divider 導航分隔線，添加到空的 <li> 上。

9、導航條

　　在容器上添加 .am-topbar class，然后按照示例組織所需內容

　　在容器上添加 .am-topbar-inverse，調整為背景色為主色調的樣式，內部結構同上。

　　在 .am-topbar 上添加 .am-topbar-fixed-top class，實現(xiàn)頂部固定。

　　在 .am-topbar 上添加 .am-topbar-fixed-bottom class，實現(xiàn)底部固定

10、分頁

　　分頁組件，<ul> / <ol> 添加 .am-pagination class， 包含一系列 <li>。在 <li> 上添加狀態(tài) class：

　　.am-disabled - 禁用（不可用）

　　.am-active - 激活

　　居中：在默認樣式的基礎上添加 .am-pagination-centered class。

　　靠右：在默認樣式的基礎上添加 .am-pagination-right class。

　　左右對齊：添加 .am-pagination-prev 及 .am-pagination-next 到 <li>，創(chuàng)建一個僅包含 上一頁 和 下一頁 的分頁組件。

11、進度條：

　　進度條組件，.am-progress 為容器，.am-progress-bar 為進度顯示信息。

　　<div class="am-progress">

　　　　<div class="am-progress-bar" style="width: 40%">40%</div>

　　進度條高度：在 .am-progress 添加 .am-progress-xs .am-progress-sm 可以設置進度條高度。

　　進度條條紋：在進度條容器上添加 .am-progress-striped 顯示條紋效果，可結合進度條顏色 class 使用。

　　進度條動畫：進度條容器上添加 .am-active 激活進度條動畫（CSS Animation）。

12、縮略圖

　　在 <img> 添加 .am-thumbnail 類；也可以在 <img> 外面添加一個容器，如 <div>、<figure>、<a> 等，再將 class 添加到容器上。

　　圖片標題：am-thumbnail-caption

　　在am-thumbnail內加入.am-caption可以添加任何類型的HTML內容標題、段落、或按鈕。

13、css3動畫

14、文章