amaze UI 筆記 - CSS

導航添加依據 http://amazeui.org/css/  下面內容屬學習筆記，若有理解誤差和錯誤請留言相告，感謝！* =（官網這塊寫的很詳細）

1、基本樣式

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.參考連接        沒看

2、局相關

 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.響應式輔助

3、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-radio class；
• 行內顯示時在容器上添加 .am-checkbox-inline、.am-radio-inline class。

　　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-hover hover 狀態

　　g.全部樣式疊加 *

　　h.參考資源 表格排序 jQuery Table Sort

4、經常使用組件

  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 組件使用。