Bootstrap - 輔助底部示例

你好，有抱負的網頁開發者們！今天，我們將進入Bootstrap輔助底部的奇妙世界。作為你們親切的鄰居計算機科學老師，我很興奮能夠帶領你們開展這次旅程。所以，拿起你們最喜歡的飲料，放鬆身心，讓我們開始吧！

Bootstrap - Footers Demo

輔助底部是什麼？

在我們深入Bootstrap的具體內容之前，讓我們從基礎開始。想像你正在閱讀一本書。你通常會在每頁的底部找到什麼？沒錯 - 頁碼，有時候是章節標題，或其他有用的信息。在數字世界中，我們為網站有類似的东西，我們稱之為輔助底部！

輔助底部是網頁底部的一個部分，包含以下信息：

著作權聲明
聯繫信息
連接到重要頁面的鏈接
社交媒體图标
快速導航菜單
免責聲明或隱私政策鏈接

把它看作是你網頁末尾的友好告別，為訪客在離開或導航到網站的另一部分之前提供有用的信息。

為什麼要用Bootstrap來設計輔助底部？

現在，你可能會想，“我為什麼要用Bootstrap來設計我的輔助底部？”親愛的學生們，Bootstrap就像是一個網頁開發者的超級英雄工具包。它提供了預先构建的組件和樣式，讓創建有響應性和吸引力的網頁元素變得輕鬆。當涉及到輔助底部時，Bootstrap提供了：

一開始就是響應式設計
在不同瀏覽器中一致的樣式
易於使用的網格系統來佈局
可定制的預設樣式組件

讓我們捋起袖子，看看我們如何使用Bootstrap創造一些出色的輔助底部！

基本Bootstrap輔助底部

讓我們從一個簡單的輔助底部開始。這裡有一個代碼示例：

<footer class="bg-light text-center text-lg-start">
<div class="container p-4">
<div class="row">
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">輔助底部內容</h5>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
voluptatem veniam, est atque cumque eum delectus sint!
</p>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">鏈接</h5>
<ul class="list-unstyled mb-0">
<li><a href="#!" class="text-dark">鏈接 1</a></li>
<li><a href="#!" class="text-dark">鏈接 2</a></li>
<li><a href="#!" class="text-dark">鏈接 3</a></li>
<li><a href="#!" class="text-dark">鏈接 4</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase mb-0">鏈接</h5>
<ul class="list-unstyled">
<li><a href="#!" class="text-dark">鏈接 1</a></li>
<li><a href="#!" class="text-dark">鏈接 2</a></li>
<li><a href="#!" class="text-dark">鏈接 3</a></li>
<li><a href="#!" class="text-dark">鏈接 4</a></li>
</ul>
</div>
</div>
</div>
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2023 著作權：
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
</footer>

讓我們來分析一下：

我們從一個<footer>標籤開始，並給它一些Bootstrap類來進行樣式設計。
在其中，我們有一個容器，有行和列（Bootstrap的網格系統）。
我們將輔助底部分為三個部分：主要內容和兩個鏈接列。
在底部，我們有一個著作權聲明。

Bootstrap類的魔法在於這是響應式的，意味著它在桌面和移動設備上都會看起來很好！

頂部固定輔助底部

有時候，你希望你的輔助底部固定在頁面的底部，特別是當內容不足以將其推下去時。這是創建固定在底部的輔助底部的方法：

<body class="d-flex flex-column min-vh-100">
<!-- 你的主要內容放在這裡 -->
<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">頂部固定輔助底部</h1>
<p class="lead">在桌面瀏覽器中，使用這個自定義的HTML和CSS將輔助底部固定在視口底部。</p>
</div>
</main>

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

在這個示例中：

我們使用flexbox來確保輔助底部保持在底部。
min-vh-100類使身體至少佔據視口的全部高度。
輔助底部上的mt-auto類將其推到底部。

带有社交图标的輔助底部

讓我們用一些社交媒體图标來增加趣味性！這是一個示例：

<footer class="bg-dark text-center text-white">
<div class="container p-4 pb-0">
<section class="mb-4">
<!-- Facebook -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-facebook-f"></i>
</a>

<!-- Twitter -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-twitter"></i>
</a>

<!-- Google -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-google"></i>
</a>

<!-- Instagram -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-instagram"></i>
</a>

<!-- LinkedIn -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-linkedin-in"></i>
</a>

<!-- Github -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-github"></i>
</a>
</section>
</div>

<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2023 著作權：
<a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
</footer>

這個輔助底部：

使用深色背景和白色文字以形成對比。
包含作為按鈕的社交媒體图标。
使用Font Awesome图标（確保包含Font Awesome庫）。

結論

就这样，我親愛的學生們！我們探索了Bootstrap輔助底部的世界，從簡單到固定在頂部，再到社交媒體友好的設計。記住，輔助底部就像是網頁冰淇淋上的櫻桃 - 它們可能在底部，但它們真的能让你的網站閃耀！

在你繼續網頁開發的旅程中，不要害怕嘗試不同的輔助底部樣式。混合和匹配元素，玩轉顏色，最重要的是，樂在其中！

這裡是一個總結我們使用過的關鍵Bootstrap類的表格：

類	用途
bg-light	浅色背景
bg-dark	深色背景
text-center	文字居中
container	創建有響應性的固定寬度容器
row	創建網格系統的行
col-lg-6, col-md-12, 等.	定義不同屏幕尺寸的列寬度
list-unstyled	移除默認列表樣式
mt-auto	添加 margin-top: auto
py-3	添加到頂部和底部的填充
btn	創建按鈕
btn-outline-light	創建帶有淺色輪廓的按鈕

持續編程，持續學習，記住 - 在網頁開發的世界裡，輔助底部只是開始！

Credits: Image by storyset