Layout 布局
通過基礎的 24 分欄，迅速簡便地創建布局。
¶基礎布局
使用單一分欄創建基礎的柵格布局。
¶分欄間隔
分欄之間存在間隔。
¶混合布局
通過基礎的 1/24 分欄任意擴展組合形成較為復雜的混合布局。
¶分欄偏移
支持偏移指定的欄數。
¶對齊方式
通過 flex 布局來對分欄進行靈活的對齊。
¶響應式布局
參照了 Bootstrap 的 響應式設計，預設了五個響應尺寸：xs、sm、md、lg 和 xl。
¶基於斷點的隱藏類
Element 額外提供了一系列類名，用於在某些條件下隱藏元素。這些類名可以添加在任何 DOM 元素或自定義組件上。如果需要，請自行引入以下文件：
import 'element-ui/lib/theme-chalk/display.css'; 包含的類名及其含義為：
hidden-xs-only- 當視口在xs尺寸時隱藏hidden-sm-only- 當視口在sm尺寸時隱藏hidden-sm-and-down- 當視口在sm及以下尺寸時隱藏hidden-sm-and-up- 當視口在sm及以上尺寸時隱藏hidden-md-only- 當視口在md尺寸時隱藏hidden-md-and-down- 當視口在md及以下尺寸時隱藏hidden-md-and-up- 當視口在md及以上尺寸時隱藏hidden-lg-only- 當視口在lg尺寸時隱藏hidden-lg-and-down- 當視口在lg及以下尺寸時隱藏hidden-lg-and-up- 當視口在lg及以上尺寸時隱藏hidden-xl-only- 當視口在xl尺寸時隱藏
¶Row Attributes
| 參數 | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| gutter | 柵格間隔 | number | — | 0 |
| type | 布局模式，可選 flex，現代瀏覽器下有效 | string | — | — |
| justify | flex 布局下的水平排列方式 | string | start/end/center/space-around/space-between | start |
| align | flex 布局下的垂直排列方式 | string | top/middle/bottom | top |
| tag | 自定義元素標簽 | string | * | div |
¶Col Attributes
| 參數 | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| span | 柵格占據的列數 | number | — | 24 |
| offset | 柵格左側的間隔格數 | number | — | 0 |
| push | 柵格向右移動格數 | number | — | 0 |
| pull | 柵格向左移動格數 | number | — | 0 |
| xs | <768px 響應式柵格數或者柵格屬性對象 |
number/object (例如： {span: 4, offset: 4}) | — | — |
| sm | ≥768px 響應式柵格數或者柵格屬性對象 |
number/object (例如： {span: 4, offset: 4}) | — | — |
| md | ≥992px 響應式柵格數或者柵格屬性對象 |
number/object (例如： {span: 4, offset: 4}) | — | — |
| lg | ≥1200px 響應式柵格數或者柵格屬性對象 |
number/object (例如： {span: 4, offset: 4}) | — | — |
| xl | ≥1920px 響應式柵格數或者柵格屬性對象 |
number/object (例如： {span: 4, offset: 4}) | — | — |
| tag | 自定義元素標簽 | string | * | div |