以下是原文翻译成繁體中文的版本，使用Markdown格式：
# Bootstrap - 垂直對齊：初學者的全面指南
你好，有抱負的網頁開發者！我很興奮能成為你進入Bootstrap和垂直對齊世界的導師。作為一個教了多年計算機科學的人，我可以告訴你，掌握垂直對齊就像學騎自行車一樣 - 起初可能看起來有點棘手，但一旦你掌握了要領，你很快就會騎得飛快！
## 了解Bootstrap中的垂直對齊
在我們深入細節之前，讓我們花一會兒時間來了解垂直對齊是什麼。想像你在排列書架上的書。有時候你希望它們都整齊地排在底部，有時候你可能希望它們居中，甚至可能希望它們與頂部對齊。這就是我們在網頁上對元素所做的，不過我們處理的是文字、圖像和其他內容，而不是書。
### 为什么要關心垂直對齊
你可能會想，“我為什麼要在乎垂直對齊？”讓我告訴你一個小故事。我曾經有一個學生，他創建了一個非常漂亮的網站，但所有的內容都擠在每個部分的頂部。看起來就像網頁穿著太高腰的褲子！正確的垂直對齊可以讓專業看起來的網站和看起來有點...awkward的網站之間產生差異。
## Bootstrap的垂直對齊類
Bootstrap，我們友好的鄰居CSS框架，帶有一套使垂直對齊變得簡單的類。讓我們看看這些類以及如何使用它們。
### Align Items類
Bootstrap提供了在flex容器內對齊項目的類。這裡有一個這些類及其效果的表格：
| 類別 | 效果 |
|-------|--------|
| .align-items-start | 將項目對齊到容器的開始 |
| .align-items-center | 在容器中垂直居中項目 |
| .align-items-end | 將項目對齊到容器的結尾 |
| .align-items-baseline | 將項目對齊到容器的基線 |
| .align-items-stretch | 擴展項目以填滿容器（默認） |
讓我們通過一些代碼示例來看看這些類的作用：
```html
<div class="d-flex align-items-start" style="height: 200px;">
<div>開始</div>
<div>對齊</div>
<div>內容</div>
</div>在這個例子中，我們使用 d-flex 來創建一個flex容器，並使用 align-items-start 來將項目對齊到容器的頂部。style="height: 200px;" 只是要給我們的容器一些高度，這樣我們就可以看到對齊的作用。
現在，讓我們試著將我們的內容居中：
<div class="d-flex align-items-center" style="height: 200px;">
<div>居中</div>
<div>垂直</div>
<div>對齊</div>
</div>看起來是不是很容易？我們只是將 start 改為 center，現在內容就完美地垂直居中了。
Align Self類
有時候，你可能想在容器內對個別項目進行不同的對齊。這時 align-self 類就派上用場了。這裡有一個這些類的表格：
| 類別 | 效果 |
|---|---|
| .align-self-start | 將項目對齊到容器的開始 |
| .align-self-center | 在容器中垂直居中項目 |
| .align-self-end | 將項目對齊到容器的結尾 |
| .align-self-baseline | 將項目對齊到容器的基線 |
| .align-self-stretch | 擴展項目以填滿容器（默認） |
讓我們看一個例子：
<div class="d-flex" style="height: 200px;">
<div class="align-self-start">開始</div>
<div class="align-self-center">中心</div>
<div class="align-self-end">結尾</div>
</div>在這個例子中，同一個容器中的每個div都以不同的方式對齊。這就像有三本書放在書架上，每本書坐在不同的高度！
使用Flexbox工具進行垂直對齊
Bootstrap的flexbox工具提供了對垂直對齊的更多控制。讓我們探索一些這些。
Justify Content類
這些類讓你可以沿著flex容器的主軸對齊項目。這裡有一個這些類的表格：
| 類別 | 效果 |
|---|---|
| .justify-content-start | 將項目對齊到容器的開始 |
| .justify-content-center | 在容器中水平居中項目 |
| .justify-content-end | 將項目對齊到容器的結尾 |
| .justify-content-between | 像膠水一樣均勻分佈項目 |
| .justify-content-around | 像膠水一樣均勻分佈項目 |
讓我們看一個例子：
<div class="d-flex justify-content-center" style="height: 200px;">
<div>居中</div>
<div>水平</div>
</div>這會將我們的內容在容器內水平居中。
結合垂直和水平對齊
現在，讓我們來點魔法。我們可以結合這些類來實現水平和垂直的完美對齊。看看這個：
<div class="d-flex justify-content-center align-items-center" style="height: 200px;">
<div>完美地</div>
<div>居中</div>
</div>這段代碼會創建一個容器，其中內容在水平和垂直方向上都完美居中。這就像在飛镖中射中靶心，但容易得多！
响應式對齊
Bootstrap若沒有響應式設計就不會是Bootstrap。你可以通過添加斷點縮寫到類來使對齊響應式。例如：
<div class="d-flex align-items-start align-items-sm-center align-items-md-end" style="height: 200px;">
<div>響應式</div>
<div>對齊</div>
</div>這會在超小設備上將內容對齊到頂部，在小設備上居中對齊，在中型設備及以上的設備上對齊到底部。這就像你的內容在做瑜伽，彎曲和伸展以適應不同的屏幕大小！
結論
這就是了，各位！我們一起穿過了Bootstrap垂直對齊的土地，從基本概念到高級技術。記住，熟能生巧。不要害怕嘗試這些類，並觀察它們如何影響你的佈局。
當我們結束時，我想起另一個學生曾經告訴我，學習Bootstrap就像學習一種新語言。起初，它看起來令人生畏，但一旦她掌握了要領，她就覺得自己可以更有效地傳達設計想法。
所以，勇往直前，我的年輕學徒們，願完美的對齊力量與你同在！開心編程！
Credits: Image by storyset