Bootstrap - Sticky Footer Demo

什麼是固定底部的 Footer？

大家好，未來的網頁開發者！今天，我們將要進入 Bootstrap 的固定底部 Footer 世界。但在我們開始編寫代碼之前，讓我們先來了解什麼是固定底部的 Footer。

Bootstrap-Sticky footer Demo

固定底部的 Footer 是一種會「粘」在瀏覽器視窗底部的 Footer，即使當內容不足以將其自然推到底部時也是如此。這就像那個無論如何總是陪伴著你的忠實朋友！

為什麼使用固定底部的 Footer？

想像你正在建立一個內容少的網站。沒有固定底部的 Footer，你的頁面可能會看起來有點... 嗯，空空的。固定底部的 Footer 可以確保你的設計看起來完整且專業，無論內容的長度如何。這就像是將櫻桃放在你的網頁設計聖代上的最後一筆！

使用 Bootstrap 創建固定底部的 Footer

現在我們已經知道我們的目標是什麼，讓我們挽起袖子，使用 Bootstrap 創造我們自己的固定底部 Footer。別擔心如果你是新手——我們會一步一步來！

步驟 1：設置 HTML 構架

首先，我們需要創建基本的 HTML 構架。這是它的樣子：

<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Fixed Footer Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<header>
<!-- 你的頁眉內容放在這裡 -->
</header>

<main class="flex-shrink-0">
<!-- 你的主要內容放在這裡 -->
</main>

<footer class="footer mt-auto py-3 bg-light">
<!-- 你的底部內容放在這裡 -->
</footer>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

讓我們來分析一下：

我們在 <html> 標籤中添加 class="h-100" 以使其佔滿視窗的 100% 高度。
<body> 標籤有 class="d-flex flex-column h-100" 來創建一個佔滿整個高度的 flexbox 容器。
我們使用 <main class="flex-shrink-0"> 來防止主要內容被縮小。
<footer> 標籤有 class="footer mt-auto py-3 bg-light" 來將其推到底部並添加一些樣式。

步驟 2：添加內容

現在，讓我們在頁面上添加一些內容：

<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed Footer Demo</a>
</div>
</nav>
</header>

<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Fixed footer with fixed navbar</h1>
<p class="lead">在桌面瀏覽器中，使用這個自定義的 HTML 和 CSS 將 Footer 固定在視窗底部。</p>
</div>
</main>

<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">將固定底部內容放在這裡。</span>
</div>
</footer>

這給我們一個簡單的頁面，包含一個頁眉、一些主要內容和一個 Footer。

步驟 3：添加自定義 CSS

為了讓一切看起來剛剛好，我們需要一點自定義 CSS。將這段代碼添加到你的 <head> 段落中：

<style>
main > .container {
padding: 60px 15px 0;
}
</style>

這會為我們的主要內容添加一些頂部間距，以防止它被固定導航欄遮住。

結果

跟隨這些步驟之後，你應該會有一個帶有固定 Footer 的美麗頁面！當內容不夠時，Footer 將會固定在視窗底部，當有足夠內容將屏幕填滿時，它會被推下。

常見問題和解決方案

問題	解決方案
Footer 與內容重疊	確保 `<main>` 有 `class="flex-shrink-0"`
Footer 不在底部	檢查 `<body>` 是否有 `class="d-flex flex-column h-100"`
內容被導航欄遮住	為主要內容容器添加間距

結論

好了，各位！你剛剛使用 Bootstrap 創造了你自己的固定底部 Footer。這就像是給你的網站穿上一雙永遠合腳的鞋，無論你的內容是長是短。

記住，網頁開發是關於實踐和試驗的。不要害怕調整代碼，嘗試不同的樣式，或者甚至將這個與其他 Bootstrap 组件結合。誰知道呢？你可能會創造出網頁設計的下一個大熱門！

繼續編碼，繼續學習，最重要的是，玩得開心！下次見，這是你的鄰居電腦老師告別。快樂編碼！

Credits: Image by storyset