Русский

Учебник Bootstrap

Макеты Bootstrap

Содержание Bootstrap

Компоненты Bootstrap

Bootstrap Формы

Поддержка Bootstrap

Утилиты Bootstrap

Демо Bootstrap

Bootstrap - Footers Demo

Здравствуйте,野心勃勃的网页开发者们！今天，我们将深入Bootstrap脚注的精彩世界。作为你友好邻里的计算机科学老师，我很兴奋能引导你们走这段旅程。所以，拿起你最喜欢的饮料，舒服地坐下来，让我们开始吧！

Bootstrap - Footers Demo

Что такое footer?

Прежде чем мы перейдем к конкретике Bootstrap,давайте начнем с азов. Представьте, что вы читаете книгу. Что вы обычно находите в нижней части каждой страницы? Correct - номер страницы, иногда заголовки глав или другую полезную информацию. Ну, в цифровом мире у нас есть что-то похожее для веб-сайтов, и мы называем это footer!

Footer - это секция в нижней части веб-страницы, содержащая информацию, такую как:

  • Уведомления о авторских правах
  • Контактная информация
  • Ссылки на важные страницы
  • Иконки социальных сетей
  • Меню быстрой навигации
  • Ссылки на отказ от ответственности или политику конфиденциальности

Представьте это как friendly farewell в конце вашей веб-страницы, предоставляющий访客ам полезную информацию перед тем, как они уйдут или перейдут на другую часть вашего сайта.

Почему использовать Bootstrap для footers?

Теперь вы, возможно, задаетесь вопросом: "Why我应该使用Bootstrap для моего footer?" Ну, мои азартные студенты, Bootstrap как супер英雄的工具kit для веб-разработчиков. Он предоставляет предстроенные компоненты и стили, которые делают создание адаптивных и привлекательных веб-элементов breeze. Что касается footers,Bootstrap предлагает:

  1. Адаптивный дизайн из коробки
  2. Однородный стиль across diferentes браузеров
  3. Легко использовать grid систему для макета
  4. Предварительно стилизованные компоненты, которые вы можете настроить

Давайте закатаем рукава и посмотрим, как мы можем создать了一些 awesome footers с Bootstrap!

Основной Bootstrap Footer

Давайте начнем с простого footer. Вот пример кода:

<footer class="bg-light text-center text-lg-start">
<div class="container p-4">
<div class="row">
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">Содержание footer</h5>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste atque ea quis
molestias. Fugiat pariatur maxime quis culpa corporis vitae repudiandae aliquam
voluptatem veniam, est atque cumque eum delectus sint!
</p>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Ссылки</h5>
<ul class="list-unstyled mb-0">
<li><a href="#!" class="text-dark">Ссылка 1</a></li>
<li><a href="#!" class="text-dark">Ссылка 2</a></li>
<li><a href="#!" class="text-dark">Ссылка 3</a></li>
<li><a href="#!" class="text-dark">Ссылка 4</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase mb-0">Ссылки</h5>
<ul class="list-unstyled">
<li><a href="#!" class="text-dark">Ссылка 1</a></li>
<li><a href="#!" class="text-dark">Ссылка 2</a></li>
<li><a href="#!" class="text-dark">Ссылка 3</a></li>
<li><a href="#!" class="text-dark">Ссылка 4</a></li>
</ul>
</div>
</div>
</div>
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2023 Copyright:
<a class="text-dark" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
</footer>

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

  1. Мы начинаем с тега <footer> и даем ему некоторые классы Bootstrap для стилизации.
  2. Внутри, у нас есть контейнер с строками и столбцами (система grid Bootstrap).
  3. Мы поделили footer на три секции:主要内容 и два столбца ссылок.
  4. Внизу, у нас есть уведомление о авторских правах.

Магия классов Bootstrap делает это адаптивным, что означает, что он будет хорошо смотреться как на десктопе, так и на мобильных устройствах!

Прилипший footer

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

<body class="d-flex flex-column min-vh-100">
<!-- Your main content goes here -->
<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Прилипший footer</h1>
<p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</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>
</body>

В этом примере:

  1. Мы используем flexbox, чтобы footer оставался внизу.
  2. Класс min-vh-100 убедитесь, что тело занимает至少 весь высоту видимой области.
  3. Класс mt-auto на footer толкает его вниз.

Footer с социальными иконками

Давайте оживим вещи с социальными иконками! Вот пример:

<footer class="bg-dark text-center text-white">
<div class="container p-4 pb-0">
<section class="mb-4">
<!-- Facebook -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-facebook-f"></i>
</a>

<!-- Twitter -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-twitter"></i>
</a>

<!-- Google -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-google"></i>
</a>

<!-- Instagram -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-instagram"></i>
</a>

<!-- LinkedIn -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-linkedin-in"></i>
</a>

<!-- Github -->
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button">
<i class="fab fa-github"></i>
</a>
</section>
</div>

<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
© 2023 Copyright:
<a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>
</div>
</footer>

Этот footer:

  1. Использует темный фон с белым текстом для контраста.
  2. Включает иконки социальных сетей в виде кнопок.
  3. Использует иконки Font Awesome (убедитесь, что вы включили библиотеку Font Awesome).

Заключение

И вот оно, мои чудесные студенты! Мы исследовали мир Bootstrap footers, от простого до прилипшего до социальногο. Помните, footers как вишенка на вершине вашего веб-страницы sundae - они могут быть внизу, но они могут真的 сделать ваш сайт сияет!

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

Вот таблица, резюмирующая основные классы Bootstrap, которые мы использовали:

Класс Цель
bg-light Светлый цвет фона
bg-dark Темный цвет фона
text-center Выровнять текст по центру
container Создать адаптивный контейнер с фиксированной шириной
row Создать строку для системы grid
col-lg-6, col-md-12, и т.д. Определить宽度 столбцов для разных размеров экранов
list-unstyled Убрать стиль по умолчанию для списка
mt-auto Добавить margin-top: auto
py-3 Добавить отступы сверху и снизу
btn Создать кнопку
btn-outline-light Создать обведенную светлую кнопку

Продолжайте программировать, продолжайте учиться, и помните - в мире веб-разработки, footer - это только начало!

Credits: Image by storyset

Предыдущий учебник:
Bootstrap - Демонстрация заголовков
Следующий учебник:
Bootstrap - Демонстрация героев