Bootstrap - 垂直分隔線：初學者指南

你好，未來的網頁開發者們！今天，我們要深入探討Bootstrap的一個有趣且實用的功能：垂直分隔線。別擔心你對這個不熟悉；我會像祖母教孫子孫女烘培餅乾一樣，耐心地引導你走過每一步。所以，讓我們捋起袖子，開始吧！

垂直分隔線是什麼？

在我們跳進Bootstrap的具體細節之前，先來了解什麼是垂直分隔線。把它想像成網頁上一條垂直的線，用來分隔內容。這就像在筆記本的中間畫一條線來創造兩個欄位。在網頁設計中，我們使用垂直分隔線來創造不同內容部分之間的視覺分隔。

Bootstrap的垂直分隔線

Bootstrap，我們友好的鄰居CSS框架，提供了一種簡單的方法來創建垂直分隔線。它叫做.vr類別，代表“垂直分隔線”。讓我們看看它是如何工作的！

基本垂直分隔線

以下是如何使用垂直分隔線的一個簡單示例：

<div class="d-flex" style="height: 200px;">
<div class="vr"></div>
</div>

在這個示例中：

• 我們有一個帶有d-flex類別的容器<div>（這使它成為一個flex容器）。
• 在它裡面，我們有另一個帶有vr類別的<div>。
• style="height: 200px;"設置容器的身高，這樣我們可以看到我們的垂直分隔線。

當你運行這段代碼時，你會看到一條細小的垂直線出現。這就像魔法，但更好，因為是你讓它發生的！

自定義垂直分隔線

現在，讓我們讓我們的垂直分隔線變得有點花俏。我們可以改變它的顏色、厚度和不透明度。以下是如何操作：

<div class="d-flex" style="height: 200px;">
<div class="vr vr-blurry"></div>
</div>

在這個示例中，我們添加了vr-blurry類別，這給我們的垂直分隔線一種稍微模糊的效果。這就像通過霧氣重的窗戶看線條——非常時尚！

垂直分隔線與堆疊

現在，讓我們升級並使用Bootstrap的堆疊功能與垂直分隔線。Bootstrap中的堆疊就像三明治一樣——它們幫助你垂直或水平地堆疊內容。讓我們看看我們如何在堆疊中使用垂直分隔線：

<div class="hstack gap-3">
<div class="p-2">第一個項目</div>
<div class="vr"></div>
<div class="p-2">第二個項目</div>
<div class="vr"></div>
<div class="p-2">第三個項目</div>
</div>

讓我們分解一下：

• 我們有一個帶有hstack類別的容器<div>，它創建一個水平堆疊。
• gap-3類別在我們的堆疊項目之間添加一些間距。
• 我們有三個帶有內容的<div>元素，它們之間由兩個垂直分隔線分隔。

當你運行這段代碼時，你會看到三個文本項目被垂直線分隔。這就像在書架上組織書籍，書脊之間有書夾一樣！

响應式垂直分隔線

Bootstrap關注的是响应式設計，我們的垂直分隔線也可以是响应式的！讓我們創一條只在較大屏幕上出現的垂直分隔線：

<div class="hstack gap-3">
<div class="p-2">第一個項目</div>
<div class="vr d-none d-md-block"></div>
<div class="p-2">第二個項目</div>
</div>

在這個示例中：

• 我們添加了d-none來默認隱藏垂直分隔線。
• d-md-block使垂直分隔線在中等尺寸屏幕及以上的設備上可見。

這就像有一扇秘密門，只在需要時出現！

方法表格

這裡是我們所涵蓋的方法的便捷表格：

方法	描述
.vr	創建一個基本的垂直分隔線
.vr-blurry	創建一個模糊的垂直分隔線
.hstack	創建一個水平堆疊
.d-none	隱藏一個元素
.d-md-block	在中等尺寸屏幕及以上的設備上顯示一個元素

結論

好了，各位！我們已經踏上了Bootstrap垂直分隔線的土地。從基本的線條到响应式的模糊分隔符，你现在有了以風格和優雅組織你的網頁內容的能力。

記住，網頁設計就像烹飪一樣——它需要練習、創造力和願意嘗試的勇氣。所以不要害怕混合和匹配這些技術來創造你自己的獨特佈局。誰知道呢？你可能會創造出網頁設計的下一個大趨勢！

繼續編程，持續學習，最重要的是，享受其中的樂趣。直到下一次，快樂地使用Bootstrap吧！

Credits: Image by storyset