Описание сетки Bootstrap и отличия версий

Фреймворк Bootstrap - это безусловный хит среди готовых решений для сайтов в силу проработанности деталей. Что такое Bootstrap? Это набор инструментов для разработки, включающий в себя CSS стили и скрипты.

Особенности сетки Bootstrap

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

Очень сложно сделать универсальное решение, подходящее всем и, судя по популярности, создателям Bootstrap эта задача удалась.

Наверно, каждый веб разработчик проходит в своём развитии несколько стадий:

  • скачивает Bootstrap целиком, с кнопками, формами и прочим, не всегда применяемым арсеналом;
  • понимая, со временем, что неиспользуемых стилей и скриптов слишком много, открывает для себя раздел Customize на сайте getbootstrap.com, настраивает сборку из необходимых компонентов;
  • осваивает Node.js, скачивает исходники Bootstrap с github и делает сборку на своём компьютере локально под каждые конкретные задачи;
  • понимает, что лишних классов всё равно много, а исходные mixin-ы править лень, пишет свои классы, столько, сколько используется в проекте и размер на разных экранах устанавливает, исходя из макета.

Основные элементы разметки Bootstrap

Сетка Bootstrap - это "скелет" страницы, определяющий положение блоков на ней.

Расположение блоков на странице
Расположение блоков на странице

Допустим, нужно разместить блоки на типовом лендинге, где некоторые секции страницы имеют ширину во весь экран, а некоторые - ограничены каким то значением и расположены посередине.

Основной "строительный материал", из которого складывается веб страница - HTML-тег <div>, типичное "поведение" которого (если не указан класс), занимать всю ширину и располагаться с новой строки.

Если внутри необходимо разместить содержимое, ограниченное по ширине, добавляем div с классом container (здесь и далее - классы Bootstrap). Внутри контейнера происходит дальнейшее деление на мелкие блоки - добавляется div class="row" (строка) и в нём - колонки, которые в Bootstrap именуются, начиная с col-. Число колонок, "умещающихся" в ширину строки - 12 (это сетка по умолчанию, принятая в Bootstrap, при необходимости, можно задать своё деление).

Почему 12 колонок? Да потому что это число делится на 2, 3, 4 и 6, что позволяет реализовать самые типовые макеты. Соответственно, на рисунке-примере HTML-разметка будет выглядеть так:

<div>
 <div class="container">
  <div class="row">
    <!-- Две колонки в половину ширины -->
    <div class="col-md-6">Текст первой колонки</div>
    <div class="col-md-6">Текст второй колонки</div>
  </div>
 </div>
</div>

для верхнего блока, и, для нижнего - следующим образом:

<div>
 <div class="container">
  <div class="row">
    <!-- Три колонки в 1/3 ширины -->
    <div class="col-md-4">Текст первой колонки</div>
    <div class="col-md-4">Текст второй колонки</div>
    <div class="col-md-4">Текст третьей колонки</div>
  </div>
 </div>
</div>

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

Если колонку, в свою очередь, необходимо также поделить по ширине - добавляем div class="row" и в нём колонки по той же схеме.

Здесь пример сетки Bootstrap 3, обратите внимание на стили CSS - именно так формируются основные структурные элементы сетки - контейнер, строка и колонка. Для колонок разной ширины разница только в свойстве width - оно задаётся в процентах от общей ширины. Относительное значение width придаёт вёрстке адаптивность под разные устройства.

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

Недостатки сетки Bootstrap версии 3

Сетка Bootstrap 3 основана на CSS свойстве float, которое поддерживается во всех браузерах, включая старые версии, но не лишено недостатков. Один из них очевиден в приведённом примере - колонки имеют высоту, соответствующую содержимому, и не развёртываются по высоте родительского элемента (row).

Одно из решений - выставлять фиксированную height или минимальную min-height высоту колонок (соответственно разную, для разных устройств). Данную задачу можно решить с помощью jQuery (пример иллюстрирует реализацию при нажатии на ссылку или, после раскомментирования одной строки скрипта, включается выравнивание при загрузке страницы).

Кроме того, чтобы колонки вели себя предсказуемо при адаптации, для контейнера и строки используются добавление псевдоэлементов :before и :after, которые визуально не отображаются, а лишь компенсируют недостатки свойства float (имеющего назначение в виде "обтекания" рисунка текстом). А оптимизация HTML страницы предполагает использование минимально необходимого количества элементов.

Классы разметки в 4-ой версии

Классы контейнера и строки остались те же - .container и .row. Классов колонок добавилось, но прежние так же актуальны.

Сетка в Bootstrap 4 формируется указанием родительскому элементу свойства display:flex;. Cовременные версии браузеров его поддерживают:

Поддержка свойства flex
Поддержка браузерами свойства flex (caniuse.com)

Internet Explorer, даже в версии 11 отличился - дословный перевод "частичная поддержка из-за большого количества ошибок".

Указывая классы с цифрами - получаем колонки c определённой шириной, как и в прежней версии (пример).

Колонки в родительском .row теперь занимают всю высоту строки.

Используя новый класс .col - можно никакие цифры в классах не складывать, и добавлять любое количество div-ов с этим классом - их ширина будет одинакова.

Некоторым из колонок нужно задать ширину, а остальным нет? Сочетаем в одном .row классы колонок с цифрами и без них - и колонки с классом .col равномерно распределятся по оставшейся ширине строки.

Выравнивание содержимого колонки по вертикали? С flex это делается достаточно просто. Указываем родительскому элементу следующие CSS правила:

display: flex;
flex-direction: column;
justify-content: center;

Выводы по использованию

Решение, какую версию фреймворка Bootstrap зависит, не в меньшей мере, от аудитории сайта, который предстоит разрабатывать. Точнее, от браузера, который используют ваши пользователи.

Люди пожилого возраста, например, часто пользуются устаревшими компьютерами, что подразумевает Windows XP, а это Internet Explorer 8 версии максимум.

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

Мобильные устройства - на старых смартфонах операционная система, как и браузеры, уже не обновляется. В этом случае можно частично выйти из положения, переключая на маленьких экранах .row на свойство display:block;, а колонки на flex:unset;. Тогда они просто будут выводиться одна под другой во всю ширину экрана (что на маленьких экранах, обычно, и делается).


При перепечатке и копировании ссылка на сайт обязательна.

Опубликовано: 24.02.2020 г. 30


Похожие публикации

Как устроен сайт

Как устроен сайт

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

Инструменты разработчика

Инструменты разработчика

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

Псевдоэлементы CSS

Псевдоэлементы CSS

Псевдоэлементы позволяют добавить стилизацию определённой части HTML элемента (тега), либо дополнить его содержимое.