简体中文

Bootstrap 教程

Bootstrap 布局

Bootstrap 内容

Bootstrap 组件

Bootstrap 表单

Bootstrap 辅助工具

Bootstrap 实用工具

Bootstrap 演示

Bootstrap - 固定底部导航栏示例

你好，有抱负的网页开发者们！今天，我们将踏上一段激动人心的旅程，使用Bootstrap创建一个固定底部的导航栏。作为你友好的邻居计算机老师，我将逐步引导你完成这个过程，确保你理解我们编写的每一行代码。所以，拿起你最喜欢的饮料，坐下来，让我们一起开始吧！

Bootstrap-Sticky footer navbar Demo

固定底部导航栏是什么？

在开始编码之前，让我们了解一下我们要实现什么。固定底部的导航栏是一个始终位于页面底部的导航栏，无论页面上有多少内容或者你滚动多远，它都会在那里。它就像那个无论顺境还是逆境都陪伴着你的忠实朋友！

为什么使用固定底部导航栏？

  1. 它提供了对重要链接或操作的轻松访问。
  2. 它在移动设备上节省屏幕空间。
  3. 它通过始终保持导航选项可见来提高用户体验。

现在我们知道了我们要构建什么以及它为什么有用，让我们开始动手写代码吧！

设置我们的HTML结构

首先，我们需要设置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>固定底部导航栏示例</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-cn" class="h-100">: 我们页面的根元素。我们添加了h-100类，使其占据视口100%的高度。
  3. 在<head>标签内：
  • 我们设置字符编码和视口。
  • 我们给我们的页面一个标题。
  • 我们链接到Bootstrap CSS文件。
  1. <body class="d-flex flex-column h-100">: 我们使用Bootstrap类使正文成为一个占据视口100%高度的flex容器。
  2. 在<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-cn" 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 演示