Bootstrap - Fixed Footer Navbar Demo

Привет, ambitные веб-разработчики! Сегодня мы отправимся в увлекательное путешествие по созданию липкой навигационной панели в footer с использованием Bootstrap. Как ваш доброжелательный соседский компьютерный учитель, я проведу вас через этот процесс шаг за шагом, убедившись, что вы понимаете каждый фрагмент кода, который мы напишем. Так что возьмите любимый напиток, сядьте поудобнее и погружайтесь с нами!

Bootstrap-Sticky footer navbar Demo

Что такое липкая панель в footer?

Прежде чем мы начнем программировать, давайте поймем, что мы пытаемся достичь. Липкая панель в footer - это панель навигации, которая остается внизу страницы, regardless от того, сколько контента на странице или насколько далеко вы прокручиваете. Это как верный друг, который остается с вами через thick и thin!

Why Use a Sticky Footer Navbar?

Она предоставляет легкий доступ к важным ссылкам или действиям.
Она экономит место на экране, особенно на мобильных устройствах.
Она улучшает пользовательский опыт, держа навигационные опции всегда видимыми.

Теперь, когда мы знаем, что мы создаем и почему это полезно, давайте脏 руки с кодом!

Настройка нашей HTML структуры

Сначала нам нужно настроить базовую структуру нашего HTML-документа. Не волнуйтесь, если вы новички в HTML; я объясню каждую часть по мере продвижения.

<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Footer Navbar Demo</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>

Давайте разберем это:

<!DOCTYPE html>: Это говорит браузеру, что мы используем HTML5.
<html lang="en" class="h-100">: Корневой элемент нашей страницы. Мы добавили класс h-100, чтобы он занимал 100% высоты области просмотра.
Внутри тега <head>:

Мы устанавливаем кодировку и viewport.
Мы даем нашей странице заголовок.
Мы подключаем CSS-файл Bootstrap.

<body class="d-flex flex-column h-100">: Мы используем классы Bootstrap, чтобы сделать тело flex-контейнером, который занимает 100% высоты области просмотра.
В конце тега <body>, мы включаем JavaScript-файл Bootstrap.

Создание заголовка

Теперь добавим заголовок на нашу страницу:

<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<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="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>

Этот код создает адаптивную панель навигации, которая липнет к顶部 страницы. Она включает имя бренда, навигационные ссылки и форму поиска. Панель навигации сворачивается в гамбургер-меню на smaller экранах.

Добавление основного контента

Далее добавим основной контент на нашу страницу:

<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Sticky footer with fixed navbar</h1>
<p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use <a href="#">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div>
</main>

Класс flex-shrink-0 на элементе <main> обеспечивает то, что он не сжимается, когда нет достаточно места, pushing наш footer вниз.

Создание липкого footer

Теперь для звезды нашего шоу, липкого footer:

<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>

Класс mt-auto толкает footer к низу страницы, когда нет достаточно контента, чтобы заполнить область просмотра.

Добавление пользовательского CSS

Чтобы все работало идеально, нам нужно добавить немного пользовательского CSS. Добавьте это внутри тега <style> в <head> вашего документа:

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

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

Этот CSS добавляет отступ сверху основного контента (чтобы он не был скрыт за липкой панелью навигации) и устанавливает цвет фона для footer.

Объединение всего вместе

Вот наш полный код:

<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Footer Navbar Demo</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="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<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="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>

<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Sticky footer with fixed navbar</h1>
<p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
<p>Use <a href="#">the sticky footer with a fixed navbar</a> if need be, too.</p>
</div>
</main>

<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>

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

Заключение

И вот мы и сделали,folks! Мы успешно создали webpage с липкой панелью навигации в footer с использованием Bootstrap. Помните, что веб-разработка похожа на готовку - она требует практики, чтобы получить идеальный результат. Так что не отчаивайтесь, если это не выглядит идеально с первого раза. Продолжайте экспериментировать, и antes de que te das cuenta, вы будете создавать красивые веб-страницы, как master chef!

Вот краткое резюме того, что мы узнали:

Компонент	Назначение
HTML Structure	Provides the basic structure of our webpage
Bootstrap CSS	Gives us pre-styled components and utility classes
Custom CSS	Allows us to fine-tune the appearance of our page
Header	Contains our navigation bar
Main Content	Holds the primary content of our page
Footer	Stays at the bottom of the page, even when content is short
Bootstrap JS	Enables interactive components like the collapsible navbar

Помните, ключ к maîtriser la développement web - это практика и好奇心. Так что продолжайте программировать, продолжайте учиться и, самое главное, получайте удовольствие! Until next time, happy coding!

Credits: Image by storyset

Предыдущий учебник:

Демонстрация панели Bootstrap

Следующий учебник:

Демонстрация Bootstrap-Masonry