amazeui筆記-CSS 布局相關


CSS

等分網格:

    

說明:.am-avg-sm-2  數字表示幾等分 會將子元素 <li>的寬度設置為 50%

   只能用於 <ul> / <ol> 結構

輔助類:

基本容器:  .am-container

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

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

浮動相關:

    .am-cf - 清除浮動

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

    .am-fl - 左浮動

    .am-fr - 右浮動

    .am-center - 水平居中

垂直對齊/底部對齊:

    

    

顯示屬性:

  • .am-block - display 設置為 block
  • .am-inline - display 設置為 inline
  • .am-inline-block - display 設置為 inline-block

隱藏屬性:.am-hide

  <!-- 隱藏了,Demo 里看不到按鈕 -->
  <button class="am-btn am-btn-danger am-hide">I'm hidden.....</button>

內外邊距:

  尺寸

  • xs - 5px
  • sm - 10px
  • default - 16px
  • lg - 24px
  • xl - 32px

class列表 不加尺寸為默認大小(16px),{size} 可以為 0, xs, sm, lg, xl 中之一。

    

文本工具:  字體 .am-sans-serif

文本顏色: 

am-text-primary
am-text-secondary
am-text-success
am-text-warning
am-text-danger 

鏈接顏色減淡:.am-link-muted class 將鏈接顏色設置為灰色。

文字大小:

  • .am-text-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-top - 頂對齊
  • .am-text-middle - 居中對齊
  • .am-text-bottom - 底對齊

 文字換行及截斷:

  

圖文混排輔助:

  • .am-align-left
  • .am-align-right

響應式輔助:

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

       down 指小於區間,up 指大於區間, only 指僅在這個區間。

例:

  • .am-show-sm-only: 只在 sm 區間顯示
  • .am-show-sm-up: 大於 sm 區間時顯示
  • .am-show-sm: 在 sm 區間顯示,如果沒有設置 mdlg 區間的顯隱,則元素在所有區間都顯示
  • .am-show-md-down: 小於 md 區間時顯示

屏幕方向:

  • 橫屏:.am-show-landscape.am-hide-landscape
  • 豎屏:.am-show-portrait.am-hide-portrait

 


免責聲明!

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



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