繁體中文

Bootstrap 教學

Bootstrap 布局

Bootstrap 內容

Bootstrap 组件

Bootstrap 表單

Bootstrap 輔助工具

Bootstrap 實用工具

Bootstrap 演示

以下是繁體中文的翻譯，使用Markdown格式：

Bootstrap-Sticky footer navbar Demo

# Bootstrap - 底部固定導航欄演示

你好，有志於網頁開發的各位！今天，我們將踏上一段令人興奮的旅程，使用Bootstrap來創建一個底部固定的導航欄。作為你們親切的鄰居計算機老師，我會一步一步地指導你們，確保你們理解我們寫的每一行代碼。所以，拿起你們最喜歡的飲料，坐好，我們來開始吧！

## 底部固定導航欄是什麼？

在我們開始編碼之前，讓我們了解一下我們要達到的目標。底部固定導航欄是一個導航欄，無論頁面上有多少內容或你滑動多遠，它都會停留在頁面的底部。就像那個無論順境還是逆境都陪伴著你的忠實朋友！

### 為什麼使用底部固定導航欄？

1. 它提供了對重要鏈接或操作的便捷訪問。
2. 它在移動設備上節省了屏幕空間。
3. 它通過始終顯示導航選項來提高用戶體驗。

現在我們知道了我們要建造什麼以及它有什麼用處，讓我們開始動手編寫代碼吧！

## 設置我們的HTML結構

首先，我們需要設置我們HTML文件的基礎結構。如果你是HTML新手，不用擔心；我會在過程中解釋每一部分。

```html
<!DOCTYPE html>
<html lang="zh-tw" class="h-100">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>底部固定導航欄演示</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">
    <!-- 我們將在此添加內容 -->

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

讓我們來分析一下：

  1. <!DOCTYPE html>: 這告訴瀏覽器我們使用的是HTML5。
  2. <html lang="zh-tw" class="h-100">: 我們頁面的根元素。我們添加了h-100類來使它佔據視口100%的高度。
  3. 在<head>標籤內：
    • 我們設置了字符編碼和視口。
    • 我們給我們的頁面設置了一個標題。
    • 我們鏈接到Bootstrap的CSS文件。
  4. <body class="d-flex flex-column h-100">: 我們使用Bootstrap類使身體成為一個佔據視口100%高度的彈性容器。
  5. 在<body>標籤結尾，我們包含了Bootstrap的JavaScript文件。

創建頭部

現在，讓我們在頁面上添加一個頭部：

<header>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">固定導航欄</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="切換導航">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav me-auto mb-2 mb-md-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">首頁</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">鏈接</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">禁用</a>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="搜索" aria-label="搜索">
                    <button class="btn btn-outline-success" type="submit">搜索</button>
                </form>
            </div>
        </div>
    </nav>
</header>

這段代碼創建了一個響應式的固定導航欄。它包含品牌名稱、導航鏈接和搜索表單。導航欄在小屏幕上會坍塌成漢堡菜單。

添加主內容

接下來，讓我們在頁面上添加一些主內容：

<main class="flex-shrink-0">
    <div class="container">
        <h1 class="mt-5">帶有固定導航欄的底部固定尾頁</h1>
        <p class="lead">在桌面瀏覽器中，使用這個自定義的HTML和CSS將尾頁固定在視口底部。</p>
        <p>如果需要，也可以使用<a href="#">帶有固定導航欄的底部固定尾頁</a>。</p>
    </div>
</main>

flex-shrink-0類在<main>元素上保證當沒有足夠空間時它不會縮小，這樣就會把我們的尾頁推到下面。

創建底部固定尾頁

現在我們來創建我們的主角，底部固定尾頁：

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

mt-auto類會將尾頁推到頁面底部，當內容不足以填滿視口時。

添加自定義CSS

為了讓一切運行完美，我們需要添加一點自定義CSS。將以下代碼添加到你文檔<head>標籤內的<style>標籤中：

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

    .footer {
        background-color: #f5f5f5;
    }
</style>

這段CSS為我們的主內容添加了一些頂部內邊距（以防止它被固定導航欄遮住）並為尾頁設置了一個背景顏色。

組合所有代碼

這裡是我們完整的代碼：

<!DOCTYPE html>
<html lang="zh-tw" class="h-100">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>底部固定導航欄演示</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        main > .container {
            padding: 60px 15px 0;
        }

        .footer {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body class="d-flex flex-column h-100">
    <header>
        <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">固定導航欄</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="切換導航">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="navbar-nav me-auto mb-2 mb-md-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">首頁</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">鏈接</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">禁用</a>
                        </li>
                    </ul>
                    <form class="d-flex">
                        <input class="form-control me-2" type="search" placeholder="搜索" aria-label="搜索">
                        <button class="btn btn-outline-success" type="submit">搜索</button>
                    </form>
                </div>
            </div>
        </nav>
    </header>

    <main class="flex-shrink-0">
        <div class="container">
            <h1 class="mt-5">帶有固定導航欄的底部固定尾頁</h1>
            <p class="lead">在桌面瀏覽器中，使用這個自定義的HTML和CSS將尾頁固定在視口底部。</p>
            <p>如果需要，也可以使用<a href="#">帶有固定導航欄的底部固定尾頁</a>。</p>
        </div>
    </main>

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

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

結論

就是这样，各位！我們成功地使用Bootstrap創建了一個帶有底部固定導航欄的網頁。記住，網頁開發就像烹飪一樣——需要練習才能達到完美。所以如果你第一次嘗試時效果不理想，不要氣餒。持續實驗，不久之後，你將會像大廚一樣快速地創作出美麗的網頁！

這裡是我們學到的快速總結：

组件 目的
HTML結構 提供我們網頁的基本結構
Bootstrap CSS 給我們預設樣式的組件和工具類
自定義CSS 讓我們精細調整頁面的外觀
頭部 包含我們的導航欄
主內容 持有我們頁面的主要內容
尾頁 留在頁面底部，即使內容很短
Bootstrap JS 為我們的交互式組件（如可折叠導航欄）提供支持

記住，掌握網頁開發的關鍵是練習和好奇心。所以持續編碼，持續學習，最重要的是，享受樂趣！下次見，快樂編程！

Credits: Image by storyset

上一教程:
Bootstrap仪表板示範
下一教程:
Bootstrap-Masonry 演示