AmazeUI 框架知識點-布局和樣式整理


1、Amaze UI 將所有元素的盒模型設置為 border-box。這下好了,媽媽再也不用擔心沒計算好 paddingborder 而使布局破相了。

2、Amaze UI 將瀏覽器的基准字號設置為 62.5%,也就是 10px,現在 1rem = 10px —— 為了計算方便。然后在body 上應用了 font-size: 1.6rem;,將頁面字號設置為 16px

3、<h1> - <h6> 保持粗體,設置了邊距;<h1> 為正常字號的 1.5 倍;<h2> 為正常字號的 1.25 倍;其他保持正常字號。

4、<blockquote> 引用塊

5、網格:

  .am-g: 網格中的行,用於包裹列,清除列的浮動;

  .am-u-xx-n: 網格中的列,xx 為視口區間,n 為該列所占的份數,如 n 為 3 時表示這一列占整行寬度的 3/12,即 1/4

  行 .am-g 的寬度被設置為 100%, 未限定最大寬度,會隨着窗口自動縮放

  可以在行上添加 .am-g-fixed class,將最大寬度限制為 1000px

  通過 .am-g + .am-g-fixed 限制行的寬度,網格並不需要容器,這可能和某些框架不太一樣。

  有時某些可能是全寬的,這時候容器 .am-container就派上用場了:.am-container 和網格列設置了相同的左右 padding,可以和網格內容對齊。

  實際使用中,如果行的網格數不足 12,需要在最后一列上添加 .am-u-end。這樣不會最后一個向右浮動

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

7、添加 am-u-sm-offset-*am-u-md-offset-*am-u-lg-offset-* 設置列的左邊距。

8、添加 .am-u-xx-centered 實現列居中:

  • 如果始終的設為居中,只需要添加 .am-u-sm-centered(移動優先,繼承);
  • 某些區間不居中添加, .am-u-xx-uncentered

9、在行 .am-g 上添加 .am-g-collapse,移除列的內邊距(padding)。

10、Average Grid,均分網格(原 Block Grid),使用 ul / ol 創建等分列,用於內容的排列。

  與布局網格不同的是,這里的數字表示幾等分,而不是占 12 等分中的幾列,比如 .am-avg-sm-2 會將子元素<li> 的寬度設置為 50%

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

11、.am-container 放到了網格里面。

  .am-scrollable-horizontal 內容超出容器寬度時顯示水平滾動條。

  .am-scrollable-vertical 內容超過設置的高度以后顯示滾動條,默認設置的高度為 240px

  .am-cf - 清除浮動

  .am-nbfc - 使用 overflow: hidden; 創建新的 BFC 清除浮動

  • .am-fl - 左浮動
  • .am-fr - 右浮動
  • .am-center - 水平居中

12、垂直居中

  .am-vertical-align 將這個 class 添加到父容器,父容器需要指定高度。

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

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

13、隱藏:.am-hide

14、.am-margin

  .am-margin-horizontal-{size}

  .am-margin-vertical-{size}

  .am-margin-left-{size}

  .am-margin-right-{size}

  .am-margin-top-{size}

  .am-margin-bottom-{size}

  size:xs sm lg xl;

15、字體、文本顏色、鏈接顏色減淡:.am-link-muted

  字體大小:.am-text  xs12 sm14 default16 lg18 xl24 xxl32 xxxl42

16、文本對齊或居中

  .am-text-left/center/right/justify

  .am-sm-text-left

  .am-sm-only-text-left

  .am-md-text-left

  .am-md-only-text-left

  .am-lg-text-left

17、文本垂直對齊

  .am-text-top

  .am-text-middle

  .am-text-bottom

18、.am-text-truncate禁止換行,超出容器部分截斷

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

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

19、.am-align-left

  .am-align-right

20、.am-show-sm-only: 只在 sm 區間顯示

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

  .am-show-sm: 在 sm 區間顯示,如果沒有設置 mdlg 區間的顯隱,則元素在所有區間都顯示

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

21、屏幕方向

  橫屏:.am-show-landscape.am-hide-landscape

  豎屏:.am-show-portrait.am-hide-portrait


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM