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
- 5pxsm
- 10px- default - 16px
lg
- 24pxxl
- 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