Display

display Breakpoints

設定各種元素與組件的元素模式。使用類別名稱為 .u-dsp{@bp}:。可針對不同斷點範圍選擇不同值。

類別名稱
區塊 .u-dsp{@bp} 預設為 Block,如果使用在不同元素上會有不同的結果,例如:
  • table: table
  • thead: table-header-group
  • tbody: table-row-group
  • tfoot: table-footer-group
  • caption: table-caption
  • tr: table-row
  • th & td: table-cell
  • colgroup: table-column-group
  • col: table-column
  • li: list-item
區塊 .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 [email protected]:ib [email protected]"></div>

列印

如果要使用於列印時,可這麼使用 [email protected]:{*}