Bootstrap - 定位：初学者的全面指南

你好，有抱負的網頁開發者們！作為你們友好的鄰居電腦老師，我很興奮帶領你們進入Bootstrap定位的世界。別擔心如果你從未寫過一行代碼 - 我們將從基礎開始，逐步學習。所以，拿起你們最喜歡的飲料，放鬆身心，讓我們一起深入探討吧！

Bootstrap中的定位是什麼？

在我們深入細節之前，讓我們了解一下在Bootstrap中我們所說的"定位"是什麼意思。定位是關於控制元素在網頁上的出現位置。這就像在房間裡擺放家具 - 你希望每樣東西都在正確的位置！

定位值

在Bootstrap中，我們有幾個定位值可以使用。讓我們來看看這些值的便捷表格：

定位值	描述
static	預設位置
relative	相對於其正常位置定位
absolute	相對於其最近定位的祖先定位
fixed	相對於瀏覽器窗口定位
sticky	在相對和固定之間切換

現在，讓我們通過一些例子來詳細解釋這些值。

靜態定位

這是所有元素的默認位置。讓我們看一個例子：

<div class="position-static">
我是一個靜態元素！
</div>

在這種情況下，div將只是坐在它自然會在文檔流中的位置。沒有花哨的東西，但這對我們的基線理解很重要。

相對定位

相對定位允許你將元素相對於其正常位置移動。這是它是如何工作的：

<div class="position-relative" style="top: 20px; left: 30px;">
我是被相對定位的！
</div>

這個div將會從其正常位置向下移動20像素，向右移動30像素。這就像告訴你的寵物，“往左移一點，夥伴！”

絕對定位

絕對定位有點複雜。它將元素定位於其最近定位的祖先。如果沒有，它會使用文檔體。讓我們看看它在行動：

<div class="position-relative">
<div class="position-absolute" style="top: 0; right: 0;">
我被絕對定位在右上角！
</div>
</div>

在這個例子中，內部div將會定位在其父div的右上角。這就像一張可以放在公告板上任何地方的便箋！

固定定位

固定定位就像給元素一個永久的屏幕位置。即使你滾動，它也會保持在原地。這是如何使用它的：

<div class="position-fixed" style="bottom: 0; right: 0;">
我被固定在屏幕的右下角！
</div>

這個div將總是顯示在瀏覽器窗口的右下角，無論你滾動多少。這對於像“回到頂部”按鈕這樣的東西來說非常完美！

粘性定位

粘性定位是定位中的變色龍。它在達到一定的滾動點之前像relative，然後變成fixed。它對於導航菜單來說非常棒。這是一個例子：

<div class="position-sticky" style="top: 0;">
當你向下滾動時，我會粘在頂部！
</div>

這個div將會隨著頁面正常滾動，直到它達到視口頂部，然後它會粘在那裡，當你繼續滾動時。

排列元素

現在我們了解了不同的定位值，讓我們來討論如何在頁面上排列元素。Bootstrap提供了一些方便的類來實現這一點。

顶部、底部、开始和结束

你可以使用像top-0、bottom-50、start-50和end-0這樣的類來定位元素。這是一個例子：

<div class="position-relative" style="height: 200px;">
<div class="position-absolute top-0 start-0">左上角</div>
<div class="position-absolute top-0 end-0">右上角</div>
<div class="position-absolute bottom-0 start-0">左下角</div>
<div class="position-absolute bottom-0 end-0">右下角</div>
</div>

這將會將四個div放置在父div的每個角落。這就像在白板上放置便箋！

居中元素

在網頁設計中，居中元素是一個常見的任務。Bootstrap使用translate-middle類使這變得容易。這是如何水平垂直居中一個元素的：

<div class="position-relative" style="height: 200px;">
<div class="position-absolute top-50 start-50 translate-middle">
我正處於中心！
</div>
</div>

這將內部div在其父元素中水平和垂直居中。這就像在飛镖中命中靶心 - 正在中心！

再來幾個例子

讓我們用幾個更多的例子來鞏固我們的理解。

响應式粘性顶部

這是如何創建一個在較大屏幕上粘在頂部的導航欄：

<nav class="navbar navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">粘性頂部導航欄</a>
</div>
</nav>

這個導航欄在手機設備上會隨頁面滾動，但在較大的屏幕上會粘在頂部。這就像一隻變色龍，根據環境改變！

覆蓋效果

你可以使用定位創造一個覆蓋效果：

<div class="position-relative">
<img src="beautiful-landscape.jpg" alt="風景" style="width: 100%;">
<div class="position-absolute top-50 start-50 translate-middle text-white">
<h2>美麗的風景</h2>
<p>享受這美景！</p>
</div>
</div>

這將文本放置在圖像上，水平和垂直居中。這就像給明信片添加一個標題！

以上就是Bootstrap定位的旅程，各位！記住，熟能生巧，所以不要害怕嘗試這些概念。開心編程，願你的元素總是完美定位！

Credits: Image by storyset