Bootstrap: Адаптивная верстка и меню

Система сеток Bootstrap позволяет создавать адаптивные макеты, корректно отображающиеся на устройствах с различными размерами экрана. Рассмотрим работу с сеткой и создание адаптивного меню.

Система сеток Bootstrap

Для создания адаптивных блоков, изменяющих размеры в зависимости от ширины экрана, используются классы Bootstrap. Например:

<div class="row">
  <div class="col-4 col-md-6 col-lg-6 col-xl-6"></div>
  <div class="col-8 col-md-6 col-lg-6 col-xl-6"></div>
</div>

Этот код определяет два блока внутри контейнера row. Классы col-4, col-md-6, col-lg-6, col-xl-6 задают ширину блока в зависимости от размера экрана:

col-4: блок занимает 4 из 12 колонок на маленьких экранах (смартфоны).
col-md-6: блок занимает 6 колонок на средних экранах (планшеты).
col-lg-6: блок занимает 6 колонок на больших экранах (ноутбуки).
col-xl-6: блок занимает 6 колонок на очень больших экранах (большие мониторы).

На больших экранах оба блока занимают по шесть колонок (половина ширины), на планшетах – также по шесть, а на смартфонах первый блок занимает 4 колонки, второй – 8. Макет адаптируется к различным размерам экрана.

Порядок отображения блоков можно менять классами push и pull:

<div class="col-5 col-lg-push-7 col-lg-5"></div>
<div class="col-7 col-lg-pull-5 col-lg-7"></div>

На больших экранах второй блок (col-lg-7) сдвинут влево на 5 колонок, а первый (col-lg-5) – вправо на 7.

Система сеток позволяет вкладывать сетки друг в друга:

<div class="row">
  <div class="col-6">
    <div class="row">
      <div class="col-6"></div>
      <div class="col-6"></div>
    </div>
  </div>
  <div class="col-6"></div>
</div>

Внутри блока, занимающего 6 колонок родительской сетки, создана ещё одна сетка из двух блоков по 6 колонок.

Адаптивное меню

Для создания меню используется тег <nav> с классом navbar navbar-expand-lg:

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ItProger</a>
    <ul class="navbar-nav">
      <li class="nav-item active"><a class="nav-link" href="#">Главное</a></li>
      <li class="nav-item"><a class="nav-link" href="#">О нас</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Обратная связь</a></li>
    </ul>
  </div>
</nav>

navbar-brand: класс для логотипа или названия сайта.
navbar-nav: класс для списка элементов меню.
nav-item: класс для каждого элемента меню.
nav-link: класс для ссылки внутри элемента меню.
active: класс для выделения активного элемента меню.
container-fluid: класс для растягивания меню на всю ширину экрана.

Это создает простое адаптивное меню, корректно отображающееся на экранах разных размеров. Замена container-fluid на container сделает меню нерастянутым на всю ширину.

Bootstrap предоставляет мощные инструменты для создания адаптивных веб-сайтов. Система сеток и компоненты, такие как navbar, позволяют быстро создавать сложные макеты, адаптирующиеся к различным устройствам.