Bootstrap - 顯示：初學者的全面指南

你好，有抱負的網頁開發者！今天，我們將深入 Bootstrap 最有用的功能之一：顯示工具。作為你友善的鄰居計算機老師，我在這裡以清晰的解釋和大量的範例來指導你了解這個主題。所以，來一杯咖啡（或者茶，如果你喜歡的話），我們開始吧！

Bootstrap 顯示是什麼？

在我們深入細節之前，讓我們先了解 Bootstrap 中的「顯示」是指什麼。在網頁開發中，「顯示」指的是元素如何在網頁上顯示。Bootstrap 提供了一組類別，讓你可以輕鬆控制元素的顯示行為。

把它想像成在房間裡擺放家具。有時候你希望一件家具是可見的，有時候你希望藏起來，而有時候你希望它根據房間的大小（或者在我們的案例中，螢幕的大小）有不同的行為。

記法

Bootstrap 為其顯示類別使用了一種簡單且直觀的記法。一般的格式是：

.d-{value}

其中 {value} 可以是以下其中之一：

值	描述
none	隱藏元素
inline	將元素顯示為行內元素
inline-block	將元素顯示為行內級別的區塊容器
block	將元素顯示為區塊元素
table	將元素顯示為表格
table-cell	將元素顯示為表格單元格
table-row	將元素顯示為表格行
flex	將元素顯示為區塊級別的彈性容器
inline-flex	將元素顯示為行內級別的彈性容器

讓我們看一些範例：

<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-inline 讓兩個 div 元素並排顯示。它們會出現在旁邊而不是垂直堆疊。

<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-block 讓 span 元素（通常為行內元素）以區塊形式顯示。它們會垂直堆疊。

响應式變體

現在，讓我們來看看真正有趣的部分！Bootstrap 讓你可以根據螢幕大小應用不同的顯示屬性。這種格式的類別為：

.d-{breakpoint}-{value}

其中 {breakpoint} 可以是以下其中之一：

斷點	描述
sm	小型設備 (≥576px)
md	中型設備 (≥768px)
lg	大型設備 (≥992px)
xl	超大型設備 (≥1200px)

例如：

<div class="d-none d-md-block">
這段文字在小螢幕上將被隱藏，但在中型和更大的螢幕上可見。
</div>

這個 div 默認為隱藏（d-none），但在中型螢幕和更大的螢幕上會以區塊形式顯示（d-md-block）。

隱藏元素

在響應式設計中隱藏元素是一個常見任務。Bootstrap 使用 d-none 類別來簡化這個過程：

<div class="d-none">你看不見我！</div>

這個元素將完全隱藏，不論螢幕大小。

但如果你只想在特定螢幕大小上隱藏元素呢？這時候響應式變體就派上用場了：

<div class="d-lg-none">我在大型螢幕以下的所有螢幕上都是可見的。</div>
<div class="d-none d-lg-block">我只在大型螢幕和以上出現。</div>

打印顯示

Bootstrap 還讓你可以控制在頁面打印時元素的顯示方式！使用 d-print-{value} 類別：

<div class="d-none d-print-block">我只有在打印頁面時才會出現！</div>
<div class="d-print-none">我打印時會消失！</div>

這在創建不需要另外的樣式表的打印友好版本網頁時特別有用。

組合所有內容

讓我們創建一個使用多種顯示工具的小範例：

<div class="container">
<h1 class="d-none d-md-block">歡迎來到我們的網站</h1>
<h2 class="d-md-none">歡迎</h2>

<p class="d-inline-block bg-light p-2">我總是為 inline-block。</p>
<p class="d-none d-lg-inline-block bg-light p-2">我在大螢幕上以行內形式出現。</p>

<div class="d-flex justify-content-between">
<div>彈性項目 1</div>
<div>彈性項目 2</div>
<div class="d-none d-xl-block">我只在超大型螢幕上出現</div>
</div>

<footer class="d-print-none">這個頁腳在打印時不會出現。</footer>
</div>

在這個範例中：

• 我們有一個適用於中型螢幕和以上的大標題，以及一個適用於小型螢幕的小標題。
• 我們有兩個段落，其中一個只在大型螢幕上出現。
• 我們使用彈性框，其中第三個項目只在超大型螢幕上出現。
• 頁腳不會被打印。

結論

好了，各位！我們已經探討了 Bootstrap 的顯示工具。記住，掌握這些工具的關鍵是實踐。嘗試創建有自己風格的佈局，嘗試不同的螢幕大小，並不怕混合和匹配這些類別。

作為你以前計算機老師，我無法強調這些工具在真實世界的網頁開發中有多麼有價值。它們將為你節省無數小時撰寫自定義 CSS 和調試佈局問題的時間。

現在，去自信地創建有響應性、自适应的佈局吧！並記住，在網頁開發的世界裡，就像在生活中一樣，有時候最強大的工具是知道何時讓某些東西消失。快樂編程！

Credits: Image by storyset