Bootstrap - Stacks：初學者指南

你好，未來的網頁開發者們！今天，我們將要進入Bootstrap Stacks的精彩世界。別擔心你之前從未寫過一行代碼——我將成為你這次刺激旅程中的友好導遊。在本教程結束時，你將能像專業人士一樣堆疊元素！

Bootstrap - Stacks

Bootstrap Stacks是什麼？

在我們開始之前，讓我們先來了解一下Bootstrap中的stacks是什麼。想像你正在用樂高積木建造一座塔。你可以將它們垂直堆疊（一個放在另一個上面）或水平堆疊（並排）。Bootstrap stacks的工作原理與此類似，但我們是在網頁上排列HTML元素。

現在，讓我們探討一下Bootstrap中的兩種主要stacks類型：

垂直Stack

垂直stack就像一疊薄餅——每個元素都坐在下面元素的上面。在Bootstrap中，我們使用.vstack類來創建垂直stack。

基本垂直Stack

讓我們從一個簡單的例子開始：

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

在這段代碼中：

我們創建了一個包含vstack類的容器<div>。
gap-3在我們堆疊的項目之間添加了一些間距。
每個項目都是一個帶有p-2類的<div>，用於內距。

當你運行這段代碼時，你會看到三個垂直堆疊的方框，每個方框中都包含文字。就是這麼簡單！

帶有不同內容的垂直Stack

讓我們來點刺激的：

<div class="vstack gap-3">
<button class="btn btn-secondary">點我！</button>
<div class="bg-light border">我是一個方框</div>
<div class="bg-light border">
<h3>我是一個標題</h3>
<p>而我是些文字</p>
</div>
</div>

在這裡，我們混合了不同類型的內容：

一個按鈕（使用Bootstrap的按鈕類）
一個帶有淺色背景和邊框的簡單div
一個帶有標題和段落的更複雜的div

這展示了垂直stack的多功能性。你並不僅限於簡單的文字方框！

水平Stack

現在，讓我們換個方向，來谈谈水平stacks。如果垂直stack像薄餅，那麼水平stack就像一排骨牌——元素並排。我們使用.hstack類來實現這點。

基本水平Stack

這裡有一個簡單的例子：

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

這段代碼與我們的垂直stack非常相似，但我們使用hstack而不是vstack。結果如何？三個方框並排！

帶有對齊的水平Stack

讓我們讓事情更有趣：

<div class="hstack gap-3">
<div class="bg-light border">第一個項目</div>
<div class="bg-light border ms-auto">第二個項目</div>
<div class="bg-light border">第三個項目</div>
</div>

在這個例子中：

我們為項目添加了背景和邊框。
第二個項目的ms-auto類將其推向右邊，在第一個和第二個項目之間創造間距。

這展示了我們如何在水平stack中控制定位。

結合垂直和水平Stacks

現在，讓我們來點魔法。我們可以結合垂直和水平stacks來創建複雜的佈局：

<div class="vstack gap-3">
<div class="hstack gap-3">
<input class="form-control me-auto" type="text" placeholder="在這裡添加你的項目...">
<button type="button" class="btn btn-secondary">提交</button>
<div class="vr"></div>
<button type="button" class="btn btn-outline-danger">重置</button>
</div>
<div class="bg-light border">自定義項目</div>
<div class="bg-light border">自定義項目</div>
</div>

這個複雜的例子展示了：

一個作為主要容器的垂直stack
垂直stack中的一個水平stack（輸入框和按鈕）
在垂直stack下方的更多項目

結果是一個表單樣結構，下面有額外的元素——這是網頁設計中常見的一種模式！

Stack方法表

這裡是一個方便的表格，總結了我們討論過的關鍵類和方法：

類/方法	描述	示例
`.vstack`	創建一個垂直stack	`<div class="vstack">`
`.hstack`	創建一個水平stack	`<div class="hstack">`
`gap-{size}`	在stack項目之間添加間距	`<div class="vstack gap-3">`
`ms-auto`	在hstack中將項目推向右邊	`<div class="ms-auto">`
`.vr`	在hstack中創建一個垂直分隔線（分隔符）	`<div class="vr"></div>`

結論

好了，各位！我們已經穿越了Bootstrap Stacks的土地，從簡單的垂直排列到水平和垂直stacks的複合排列。記住，網頁設計就像用樂高積木建造——從這些簡單的部件開始，很快你就能創造出惊人的結構！

用這些例子練習，嘗試不同的組合，並不怕犯錯誤。這是我們所有人都學習和成長為開發者的方式。在你意識到之前，你將能夠像有經驗的專業人士一樣堆疊元素！

快樂編程，願你的stacks總是對齊完美！?

Credits: Image by storyset