Bootstrap - 固定底部示例

什么是固定底部？

你好，未来的网页开发者们！今天，我们将使用Bootstrap来深入探讨固定底部的世界。但在我们开始编写代码之前，让我们先了解一下固定底部到底是什么。

Bootstrap-Sticky footer Demo

固定底部是一种即使在没有足够内容将其自然推到底部时，也会“粘”在浏览器窗口底部的页脚。它就像那个无论何时都陪伴着你的忠实朋友！

为什么使用固定底部？

想象一下，你正在构建一个内容较少的网站。如果没有固定底部，你的页面可能会看起来有点...嗯，空荡荡的。固定底部可以确保你的设计无论内容长度如何，看起来都是完整且专业的。这就好比在你的网页设计圣代上加上樱桃！

使用Bootstrap创建固定底部

现在我们知道了我们的目标，让我们卷起袖子，使用Bootstrap创建我们自己的固定底部。别担心如果你是新手——我们会一步步来！

步骤1：设置HTML结构

首先，我们需要创建基本的HTML结构。它看起来是这样的：

<!DOCTYPE html>
<html lang="zh-CN" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 固定底部示例</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="#">固定底部示例</a>
</div>
</nav>
</header>

<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>

这给了我们一个简单的页面，包含头部、主要内容和一个底部。

步骤3：添加自定义CSS

为了让一切看起来恰到好处，我们需要一点自定义CSS。将以下内容添加到你的 <head> 部分中：

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

这会给我们的主要内容添加一些顶部填充，以防止它被固定导航栏隐藏。

结果

按照这些步骤操作后，你应该拥有一个带有固定底部的美丽页面！当内容不足时，底部会固定在视口底部，而当内容足够多时，它会随着屏幕滚动而下。

常见问题及解决方案

问题	解决方案
底部与内容重叠	确保 `<main>` 有 `class="flex-shrink-0"`
底部不在底部	检查 `<body>` 是否有 `class="d-flex flex-column h-100"`
内容被导航栏隐藏	给主要内容容器添加填充

结论

就这样，朋友们！你已经使用Bootstrap创建了自己的固定底部。就像给你的网站穿上一双总是合脚的鞋子，不管内容是多还是少。

记住，网页开发就是关于实践和尝试的。不要害怕调整代码，尝试不同的样式，甚至将这个与Bootstrap的其他组件结合起来。谁知道呢？你可能会创造出下一个网页设计的大热门！

继续编码，持续学习，最重要的是，享受乐趣！下次见，这是你友好的计算机老师告别。快乐编码！

Credits: Image by storyset