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 區間顯示，如果沒有設置 md、lg 區間的顯隱，則元素在所有區間都顯示
• .am-show-md-down: 小於 md 區間時顯示

屏幕方向：

• 橫屏：.am-show-landscape, .am-hide-landscape
• 豎屏：.am-show-portrait, .am-hide-portrait