F2E合作社｜display屬性控制｜Bootstrap 5網頁框架開發入門

前言

Bootstrap 有訂定一系列通用類別，在不同解析度能有不同的樣子，在手機裡是胖子（ block ）、但平板又突然變瘦（ inline ）、桌機變隱形（ none ）、大桌機又會出現（ flex ），隨心所欲改變形態就像百變怪一樣，快一起來看看怎麼操作吧！

（ 圖片來源 ）

官方網站的 Display property 頁面

符號

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

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

• .d-{value} 支持 xs
• .d-{breakpoint}-{value} 支持 sm, md, lg, xl, 和 xxl

value 為以下其中一個：

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

基本範例

HTML

<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>

HTML

<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>

隱藏元素

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

斷點

運用在列印的 Display

透過 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 組合在一起。

<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>

參考資料

1. Display property · Bootstrap v5.0
2. Display之顯示/隱藏/屬性控制-金魚都能懂的Bootstrap5網頁框架開發入門 | 網頁開發 | 網頁教學
3. Display · Bootstrap 5 繁體中文文件 - 六角學院 v5.0