在任何网页中,页脚都是出现在页面底部的部分。在很多网页中,我们可以看到页脚是“固定”的,这意味着无论我们在页面上向上还是向下滚动,页脚都会停留在其原本的位置,即页面的底部。
如何使用 Bootstrap 实现固定页脚
在 Bootstrap 中,提供了一些预定义的类,我们要做的就是将这些类分配给相应的元素,从而将任何元素固定在网页的底部。实现这一目标的步骤如下所示:
- 创建一个新的名为 index.html 的 HTML 文件。
- 使用 link 标签引入一个 Bootstrap CDN 链接。
- 现在,声明一些随机文本,以便页面可以滚动。
- 声明页脚并向其添加相关的类,以便应用 bootstrap 样式。
- 我们将添加 footer 和 fixed-bottom 类,这样可以将页脚声明为页脚,然后它将获得相应的样式从而变为固定。
- 现在,在页脚内添加您想要展示的任何内容。
示例: 下面的代码解释了如何使用 Bootstrap 创建固定页脚。
HTML
“
Sticky Footer with Bootstrap
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
Scrollable Content
GeeksforGeeks is a leading platform that
provides computer science resources and
coding challenges for programmers
and technology enthusiasts, along with
interview and exam preparations for
upcoming aspirants. With a strong emphasis
on enhancing coding skills and
knowledge, it has become a
trusted destination for over 12 million plus
registered users worldwide.
The platform offers a vast collection of
tutorials, practice problems,
interview tutorials, articles, and courses,
covering various domains of computer science.
Our exceptional mentors hailing from top
colleges & organizations have the
ability to guide you on a journey from the
humble beginnings of coding to
the pinnacle of expertise. Under their guidance
watch your skills flourish
as we lay the foundation and help you conquer
the world of coding.
Our brand is built on the pillars of expertise,
accessibility, and community.
We strive to empower individuals to enhance
their programming skills, to
bridge the gap between academia and industry,
and provide a supportive
community to the learners. GeeksforGeeks is
committed to promoting
technological advancement and providing
opportunities for growth in the
ever-evolving field of computer science.
GeeksforGeeks is a leading platform that
provides computer science resources and
coding challenges for programmers
and technology enthusiasts, along with
interview and exam preparations for
upcoming aspirants. With a strong emphasis
on enhancing coding skills and knowledge,
it has become a trusted destination for
over 12 million plus registered users
worldwide. The platform offers a vast
collection of tutorials, practice
problems, interview tutorials, articles,
and courses, covering various domains
of computer science.
Our exceptional mentors hailing from top
colleges & organizations have the ability
to guide you on a journey from the
humble beginnings of coding to
the pinnacle of expertise. Under their guidance
watch your skills flourish as we lay the
foundation and help you conquer
the world of coding.
Our brand is built on the pillars of expertise,
accessibility, and community. We strive to
empower individuals to enhance their programming
skills, to bridge the