Display
display Breakpoints
設定各種元素與組件的元素模式。使用類別名稱為 .u-dsp{@bp}:。可針對不同斷點範圍選擇不同值。
| 類別名稱 | 值 | |
|---|---|---|
| 區塊 | .u-dsp{@bp} |
預設為 Block，如果使用在不同元素上會有不同的結果，例如：
|
| 區塊 | .u-dsp{@bp}:b | block |
| 行內 | .u-dsp{@bp}:i | inline |
| 行內區塊 | .u-dsp{@bp}:ib | inline-block |
| 行內-Flex | .u-dsp{@bp}:if | inline-flex |
| Flex | .u-dsp{@bp}:f | flex |
| 行內-Grid | .u-dsp{@bp}:ig | inline-grid |
| Grid | .u-dsp{@bp}:g | grid |
| 行內表格 | .u-dsp{@bp}:it | inline-table |
| 表格 | .u-dsp{@bp}:t | table |
| 表格欄 | .u-dsp{@bp}:tc | table-cell |
| 表格行 | .u-dsp{@bp}:tr | table-cell |
| 不顯示 | .u-dsp{@bp}:n | none |
<div class="u-dsp:n u-dsp@md:ib u-dsp@lg"></div>
列印
如果要使用於列印時，可這麼使用 .u-dsp@pt:{*}。