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]:{*}

右上

The message port closed before a response was received.

左上

The message port closed before a response was received.

右下

The message port closed before a response was received.

左下

The message port closed before a response was received.

Hello World

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consequatur eligendi illum libero nostrum? Ab, ad consequatur cumque dolores enim esse fuga non. Adipisci cupiditate doloribus pariatur quidem repudiandae ullam.