育將電腦工作室 - 線上書籍

數位相簿很上手
=======

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

如何運作

使用 display 的通用類別 Class 來改變 [`display` 屬性](https://developer.mozilla.org/en-US/docs/Web/CSS/display)，我們故意只支援 `display` 所有可能的一個子集，可以依據需求將這些 Class 調整出各種效果。

符號

Display 通用類別可以套用在所有[中斷點](http://bootstrap.hexschool.com/docs/4.0/layout/overview/#responsive-breakpoints)，從 `xs` 到 `xl` 都在其中，而這些是從最小寬度 `min-width: 0;` 開始運用，因此預設不受 media query 限制，然而其餘的斷點都包含縮寫。

因此，這些 Class 使用以下格式來命名：

- `.d-{value}` for `xs`
- `.d-{breakpoint}-{value}` for `sm`, `md`, `lg`, and `xl`.
 
*value* 可以替換成以下：

- `none`
- `inline`
- `inline-block`
- `block`
- `table`
- `table-cell`
- `table-row`
- `flex`
- `inline-flex`
 
這些 media queries 會設置大於中斷點，舉例來說： `.d-lg-none` 在 `lg` 和 `xl` 屏幕上設置 `display：none;`。

範例：

1. d-inline ```
  <pre class="brush:as3;">
  <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>
  ```
2. d-block ```
  <pre class="brush:as3;">
  <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>
  ```
3. 隱藏元素 為了更快速且友善的移動設備開發，請使用響應式 display Class 來顯示和隱藏元件。避免創建完全不同版本的同一個網站，而不是按照每個螢幕尺寸隱藏元素。
  
  要在給定的螢幕上顯示一個元素，您可以將一個 `.d-*-none` 與 `.d-*-*` 結合起來，例如 `.d-none.d-md-block.d-xl-none` 將隱藏所有螢幕尺寸的元素，除了中型和大型設備。
  
   <table> <thead> <tr> <th>Screen Size</th> <th>Class</th> </tr> </thead> <tbody> <tr> <td>Hidden on all</td> <td>`.d-none`</td> </tr> <tr> <td>Hidden only on xs</td> <td>`.d-none .d-sm-block`</td> </tr> <tr> <td>Hidden only on sm</td> <td>`.d-sm-none .d-md-block`</td> </tr> <tr> <td>Hidden only on md</td> <td>`.d-md-none .d-lg-block`</td> </tr> <tr> <td>Hidden only on lg</td> <td>`.d-lg-none .d-xl-block`</td> </tr> <tr> <td>Hidden only on xl</td> <td>`.d-xl-none`</td> </tr> <tr> <td>Visible on all</td> <td>`.d-block`</td> </tr> <tr> <td>Visible only on xs</td> <td>`.d-block .d-sm-none`</td> </tr> <tr> <td>Visible only on sm</td> <td>`.d-none .d-sm-block .d-md-none`</td> </tr> <tr> <td>Visible only on md</td> <td>`.d-none .d-md-block .d-lg-none`</td> </tr> <tr> <td>Visible only on lg</td> <td>`.d-none .d-lg-block .d-xl-none`</td> </tr> <tr> <td>Visible only on xl</td> <td>`.d-none .d-xl-block`</td> </tr> </tbody> </table>
  
   ```
  <pre class="brush:as3;">
  <div class="d-lg-none">hide on screens wider than lg</div>
  <div class="d-none d-lg-block">hide on screens smaller than lg</div>
  ```

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown