Bootstrap - 尺寸調整：初学者的全面指南

你好，未來的網頁開發者們！今天，我們將要深入Bootstrap尺寸調整的精彩世界。作為你們親切的鄰居計算機老師，我將指導你們踏上這個旅程，一步步前行。別擔心你們對編程還是新手——我們會從基礎開始，逐步學習。所以，來一杯咖啡（或者如果你喜歡，來一杯茶），我們開始吧！

Bootstrap尺寸調整是什麼？

在我們深入細節之前，讓我們了解一下Bootstrap尺寸調整是什麼。想像你正在佈置一個房間。你希望一些傢俱能夠完美地 fitting，一些佔據一半的空間，還有一些根據房間的大小進行調整。這正是Bootstrap尺寸調整幫助我們在網頁元素上做到的！

相對於父元素

讓我們從調整元素相對於它們父元素的尺寸開始。這就像決定一幅畫在牆上應該佔多少空間。

寬度類

Bootstrap提供了類，讓你可以將元素的寬度設為其父元素寬度的一定百分比。這裡有一個這些類型的便捷表格：

類型	描述
w-25	寬度 25%
w-50	寬度 50%
w-75	寬度 75%
w-100	寬度 100%
w-auto	自動寬度

讓我們看看這些類型是如何工作的：

<div class="container">
<div class="w-25 p-3" style="background-color: #eee;">寬度 25%</div>
<div class="w-50 p-3" style="background-color: #ddd;">寬度 50%</div>
<div class="w-75 p-3" style="background-color: #ccc;">寬度 75%</div>
<div class="w-100 p-3" style="background-color: #bbb;">寬度 100%</div>
<div class="w-auto p-3" style="background-color: #aaa;">自動寬度</div>
</div>

在這個例子中，我們創建了五個 div 元素，每個元素都有一個不同的寬度類型。p-3 類為可見性添加了一些內邊距。你會看到每個 div佔據了其父容器寬度的一定百分比。

高度類

同樣，Bootstrap也提供了設置高度的類：

類型	描述
h-25	高度 25%
h-50	高度 50%
h-75	高度 75%
h-100	高度 100%
h-auto	自動高度

這是你可以如何使用這些類型的例子：

<div style="height: 200px;">
<div class="h-25 d-inline-block" style="width: 120px; background-color: #eee;">高度 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: #ddd;">高度 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: #ccc;">高度 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: #bbb;">高度 100%</div>
<div class="h-auto d-inline-block" style="width: 120px; background-color: #aaa;">自動高度</div>
</div>

在這個例子中，我們為父 div 設置了一個固定的高度，然後在子元素上使用高度類型。d-inline-block 類使這些 div 元素以內聯方式顯示。

相對於視口寬度

現在，讓我們來討論根據視口寬度調整元素尺寸。這就像調整電視屏幕以適應不同房間的大小。

Bootstrap使用 vw 單位，這代表 "視口寬度"。這裡有一些類型：

類型	描述
vw-100	寬度 100vw
min-vw-100	最小寬度 100vw
max-vw-100	最大寬度 100vw

讓我們看一個例子：

<div class="vw-100" style="background-color: #eee;">這個 div 與視口同寬。</div>

這個 div 將始終與視口一樣寬，即使你調整瀏覽器窗口的大小。

相對於視口高度

與視口寬度類似，我們也可以使用 vh 單位根據視口高度調整元素尺寸。

類型	描述
vh-100	高度 100vh
min-vh-100	最小高度 100vh
max-vh-100	最大高度 100vh

這是你可以如何使用這些類型的例子：

<div class="vh-100" style="background-color: #eee;">這個 div 與視口同高。</div>

這個 div 將始終與視口一樣高，並隨著瀏覽器窗口的調整而調整。

相對於視口

最後，讓我們看看與視口寬度和高度相關的尺寸調整。

最小寬度 100%

<div class="min-vw-100" style="background-color: #eee;">100vw</div>

這個 div 將至少與視口一樣寬，但如果其內容需要更多空間，它可以擴展。

最小高度 100%

<div class="min-vh-100" style="background-color: #eee;">100vh</div>

同樣，這個 div 將至少與視口一樣高，但如果有需要，它可以擴展。

結合所有內容

現在我們已經涵蓋了所有的尺寸調整選項，讓我們創建一個有趣的例子來應用它們：

<div class="container">
<div class="row">
<div class="col-md-6">
<div class="w-75 p-3 mb-2" style="background-color: #e9ecef;">
我佔據了父元素寬度的 75%！
</div>
<div class="h-50 p-3" style="background-color: #ced4da;">
我佔據了父元素高度的 50%！
</div>
</div>
<div class="col-md-6">
<div class="vw-100 p-3 mb-2" style="background-color: #adb5bd;">
我與視口同寬！
</div>
<div class="vh-50 p-3" style="background-color: #6c757d; color: white;">
我佔據了視口高度的 50%！
</div>
</div>
</div>
</div>

在這個例子中，我們使用了寬度、高度和視口相關的尺寸調整來創建一個多樣化和響應式的佈局。試著調整瀏覽器窗口的大小，看看這些元素是如何適應的！

這就是全部了，各位！你們已經踏出了進入Bootstrap尺寸調整世界的第一步。記住，熟能生巧，所以不要害怕在自們的專案中嘗試這些類型。在你還沒有意識到之前，你將能夠像專業人士一樣創建響應式佈局！

開心地編程，願你的網站永遠恰到好處！?

Credits: Image by storyset