Как в bootstrap footer прижать к низу экрана. Несколько простых решений

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

Где это применимо?

Основная масса сайтов содержит в себе примерно одинаковый набор частей, на которые разбивается первый: шапку (header), основной блок с контентом, место для меню, место для рекламы и «подвал» (footer). Все они могут размещаться на сервисе в различном порядке, а также дополняться другими объектами (слайдерами, лентами новостей, местами для комментариев и т.д.).

На сайтах футеры нужны для:

Указания авторства, года создания, названия компании, сервиса и т.д., и других похожих атрибутов;
Размещения навигационной панели;
Указания контактной информации и прочее.

Чемоданчик с инструментами

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

Если вы выбрали css – каскадные таблицы стилей – и язык разметки html, то здесь можно прибегнуть к таким решениям проблемы, как создание таблицы или же поиграться с позиционированием блоков. Если же вы предпочитаете работать с инструментами Bootstrap, то здесь на сцену выходят такие штуки, как fixed navigation bar и affix.

Меню, зафиксированное снизу

Если вам необходимо разместить навигационную панель сайта в его «подвале», то воспользуйтесь возможностями navigation bar. С его помощью можно закрепить меню как сверху экрана, так и снизу, используя класс .navbar- fixed- top или .navbar- fixed- bottom. Нас интересует второе.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bottom navbar</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    .little {
      width: 50%;
      margin-left: 25%;
      text-align: center;
  }
  </style>
 
</head>
<body>
 
<nav class="navbar navbar-fixed-bottom navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">МойБренд</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">О нас</a></li>
      <li><a href="#">Продукция</a></li>
      <li><a href="#">Доставкка и оплата</a></li>
      <li><a href="#">Контакты</a></li>
    </ul>
  </div>
</nav>
 
<div class="container little">
  <div class="row">
    <div class="col-md-12">
 
      <h2>Первый заголовок </h2>
      <h3>Здесь расположен как-то текстовый контент.</h3>
      <h2>Второй заголовок </h2>
      <h3>И его очень-очень-очень много!</h3>
            <!-- Добавьте побольше текста, чтобы на веб-странице появился скролл -->
     </div>
  </div>
</div>
 
</body>
</html>

Использование Affix Plugin

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

Так, в примере футер будет расположен снизу страницы при прокрутке контента, пока пользователь не опустит скролл до конца. В этом случае футер закрепится в «подвале».

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
 
  .affix {
      bottom: 0;
  }
  footer{
  margin-left: -15px;
  text-align: center;
  height: 45px;
  width: 100%;
color:#fff;
background-color:#2196F3;
  }
  </style>
</head>
<body>
 
<div class="container-fluid" style="color:#fff;background-color:#2196F3;height:150px;">
  <h1>Пример работы плагина</h1>
  <h3>Пролистайте информацию на странице</h3>
</div>
<br>
 
<div class="container">
  <div class="row">
    <div class="col-sm-offset-3 col-sm-6 col-sm-offset-3">   
      <h1>Много бесполезного текста...</h1>
      <h1>специально для появления скролла.</h1>
       <h1>Много бесполезного текста...</h1>
      <h1>специально для появления скролла.</h1>
    </div>
  </div>
</div>
<div class="container-fluid">
  <footer data-spy="affix" data-offset-bottom="0">
     <p>Все права защищены</p>
  </footer>
</div>
 
</body>
</html>

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

С уважением, Роман Чуешов

Прочитано: 2895 раз