顯示方式(Display)

      使用display通用類別快速且響應式的切換元件的顯示與否。我們的display通用類別包含許多常用的值,另外在打印時也能使用。

      工作原理

      使用響應式的display通用類別來改變display屬性。我們故意只支持display所有可能中的其中一個子集??梢砸罁枨髮⑦@些class調整出各種效果。

      符號

      isplay通用類別可以套用在所有斷點,從xs到xxl都在其中。而這些是從最小寬度min-width: 0;開始運用,因此預設不受media query限制,然而其余的斷點都包含縮寫。

      因此,這些class使用以下格式來命名:

      • .d-{value} for xs
      • .d-{breakpoint}-{value} for sm, md, lg, xl, and xxl.

      value為以下其中一個:

      • none
      • inline
      • inline-block
      • block
      • grid
      • table
      • table-cell
      • table-row
      • flex
      • inline-flex

      display value可以透過更改$displays變數、重新編譯SCSS來改變。

      這些media queries會影響等于或大于斷點的屏幕設置。舉例來說,.d-lg-none會在lg、xl跟xxl的屏幕上設置display: none;。

      示例

      d-inline
      d-inline
      <div class="d-inline p-2 bg-primary text-white">d-inline</div>
      <div class="d-inline p-2 bg-dark text-white">d-inline</div>
      d-block d-block
      <span class="d-block p-2 bg-primary text-white">d-block</span>
      <span class="d-block p-2 bg-dark text-white">d-block</span>

      隱藏元素

      為了更快速且友善的進行移動設備開發,請使用響應式的display class來顯示和隱藏元件。避免創建完全不同版本的同一個網站,而是按照每個屏幕尺寸隱藏元素。

      要隱藏元素,只需對任何響應式畫面使用.d-none或是.d-{sm,md,lg,xl,xxl}-none其中之一。

      如果只想在給定的屏幕區間上顯示元素,您可以將一個.d-*-none class和一個.d-*-* class組合,例如.d-none .d-md-block .d-xl-none .d-xxl-none將隱藏所有屏幕尺寸的元素,但中型和大型設備除外。

      Screen size Class
      Hidden on all .d-none
      Hidden only on xs .d-none .d-sm-block
      Hidden only on sm .d-sm-none .d-md-block
      Hidden only on md .d-md-none .d-lg-block
      Hidden only on lg .d-lg-none .d-xl-block
      Hidden only on xl .d-xl-none .d-xxl-block
      Hidden only on xxl .d-xxl-none
      Visible on all .d-block
      Visible only on xs .d-block .d-sm-none
      Visible only on sm .d-none .d-sm-block .d-md-none
      Visible only on md .d-none .d-md-block .d-lg-none
      Visible only on lg .d-none .d-lg-block .d-xl-none
      Visible only on xl .d-none .d-xl-block .d-xxl-none
      Visible only on xxl .d-none .d-xxl-block
      hide on lg and wider screens
      hide on screens smaller than lg
      <div class="d-lg-none">hide on lg and wider screens</div>
      <div class="d-none d-lg-block">hide on screens smaller than lg</div>

      打印顯示

      透過我們的print display通用類別,可以在打印時改變元素的display值。一樣包含display的各種.d-*通用類別。

      • .d-print-none
      • .d-print-inline
      • .d-print-inline-block
      • .d-print-block
      • .d-print-grid
      • .d-print-table
      • .d-print-table-row
      • .d-print-table-cell
      • .d-print-flex
      • .d-print-inline-flex

      可以將print與display的class組合在一起。

      Screen Only (Hide on print only)
      Print Only (Hide on screen only)
      Hide up to large on screen, but always show on print
      <div class="d-print-none">Screen Only (Hide on print only)</div>
      <div class="d-none d-print-block">Print Only (Hide on screen only)</div>
      <div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>

      Sass

      Utilities API

      Display utilities are declared in our utilities API in scss/_utilities.scss.

          "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
      ),
      
      返回頂部
      主站蜘蛛池模板: 精品乱子伦一区二区三区| 亚洲日本乱码一区二区在线二产线 | 亚洲AV永久无码精品一区二区国产| 亚洲av无码不卡一区二区三区 | 国产成人精品一区二三区熟女| 精品国产一区二区麻豆| 一区二区三区免费视频播放器| 久久国产高清一区二区三区| 蜜臀AV一区二区| 国产成人午夜精品一区二区三区| 国产一区二区电影| 久久精品动漫一区二区三区| 国产在线一区二区三区| 色狠狠一区二区三区香蕉| 国产高清一区二区三区 | 中文字幕AV无码一区二区三区| 亚洲一区二区三区成人网站| 精品无人乱码一区二区三区| 天码av无码一区二区三区四区| 北岛玲在线一区二区| 亚洲国产高清在线一区二区三区| 国产99精品一区二区三区免费 | 在线观看免费视频一区| 亚洲福利视频一区二区| 国产一区二区视频在线观看| 日韩精品无码一区二区视频| av无码一区二区三区| 一区二区视频在线观看| 亚洲av无码一区二区三区天堂| 天海翼一区二区三区高清视频| 精品一区二区久久久久久久网精| 精品一区二区三区在线观看l| 91视频一区二区三区| 国产一区二区三区小向美奈子| 无码日韩人妻AV一区二区三区| 精品亚洲综合在线第一区| 无码一区二区波多野结衣播放搜索 | 中文字幕久久亚洲一区| 亚洲男女一区二区三区| 久夜色精品国产一区二区三区| 亚洲无圣光一区二区|