.container больше не нужен
Все верстальщики в своих проектах используют div.container для центрирования контента и этот способ имеет некоторые особенности, от которых можно избавиться. Прочитав эту статью, Вы узнаете про способ, который позволит полностью отказаться от контейнера. Я попытаюсь рассказать о плюсах и минусах использования контейнера и альтернативного способа центрирования контента средствами только лишь css.
P.S. Надеюсь качество GIF’ок позволяет что-то разглядеть.
Изображение выше и код наглядно показывают как работает стандартный контейнер в типовой вёрстке сайта. Наверное все знают, что обычно создается тег section, в него помещается div.container и уже в него помещают различный контент. Он занимает всю ширину экрана, например, до 1170px и когда экран становится больше, то играет роль обёртки и фиксирует контент в центре страницы, не давая ему «разбежаться» в стороны.
Так почему бы сразу не задать эти стили для контента? Если задать эти стили для секции без контейнера, то вроде бы всё смотрится нормально.
Но как только требуется задать фон для секции, ситуация сразу выходит из под контроля:
Если задать для секции фон, внутрь секции положить контейнер с его стилями, а в него уже контент, то всё заработает так, как надо:
Самый очевидный минус контейнера — создание лишних блоков в разметке, которое ведет к увеличению цепочки вложенностей элементов и понижению читаемости кода.
Также создание контейнера может вызвать сложности в названиях классов (иногда нужно придумать дополнительный класс для обёртки внутри контейнера). Это всё просто увеличивает код.
Выше мы рассмотрели самый простой пример. Но если на сайте 15 секций или больше? Это 15 лишних блоков. А если нам внутри контейнера нужно разделить секцию еще на две части и сделать их flex-элементами? Нужно создать div-обёртку, это еще по одному блоку в контейнер. И уже +2 лишних блока на секцию! Как я уже сказал выше — эти div’ные вложенности «мусорят» в разметке. Но возможности css позволяют нам обойтись и без них.
Взяв за основу сетку bootstrap можно значительно упростить себе работу с css медиа-запросами, используя следующий код:
Что он делает? Если кратко, то держит контент всегда в центре и меняет его размеры на разных экранах:
Допустим нам нужна ширина контента 1180px, значит 1920 — 1180 = 740 / 2 = 370px — будут боковые отступы в нашей секции. Смотрим:
Да уж. При уменьшении экрана, наши отступы сжимают контент. Не годится. Может возможно сделать отступы динамическими? Возможно! И ресурсами одного лишь css!
Для этого воспользуемся функцией calc(). На данный момент css-функция calc() поддерживается на 96.5%, что всего на 1% меньше, чем flexbox, а это значит, что её можно смело использовать. Для динамических внутренних отступов нужно выполнить одну математическую операцию.
Давайте уже скорее посмотрим на пример:
UPD: Упросил формулу. Спасибо Metotron0.
Таким образом мы задаём боковые внутренние отступы с помощью функции calc(), которая при любом разрешении экрана высчитывает эти отступы так, чтобы контент был 1180px! Вы только попробуйте.
Можно поиграться с корректирующим значением 590px и сделать контент 1140px или 1170px, как угодно!
Посмотрите сравнение этого метода с контейнером прямо сейчас!
Комбинация с медиа-запросами
Было бы очень хорошо встроить это в сетку от bootstrap, чтобы легче было адаптировать сайт.
Итого на разных размерах экранов мы имеем:
Пример из реальной практики, сравнение методов
Всё еще не видите пользы от метода с динамическими отступами? Тогда давайте взглянем на пример из реальной практики. Надевайте очки разработчика — есть следующая секция (кликабельно):
А теперь посмотрите как это выглядит если использовать динамические отступы:
Только посмотрите как уменьшился код, он стал чище, читать его стало легче. Получилась секция, которая содержит блок с текстом и форму — ничего лишнего! И это всего лишь одна секция. Повторюсь: а если на сайте 15 секций?
Итак, начинаем подводить итоги:
Иначе они перезапишут динамические отступы.
Рекомендации
Мне нравится метод с динамическими внутренними отступами. Попробуйте его вместо привычной «контейнерной» вёрстки и вы быстро заметите как повысилась чистота вашего кода. Если есть какие-то сомнения в этом методе, то пишите их в комментарии — обсудим!
Рекомендую использовать не %, а vw. Чтобы ширина считалась не от родителя, а от ширины области промотора браузера. Так просто надёжнее. Поддержка vw — 96% тут.
Создайте свой шаблон этих стилей с медиа-запросами, например:
Заключение
Метод с динамическими отступами выполняет ту же функцию, что и div.container, но полностью лишён всех его недостатков. Возможно этот метод имеет какие-то подводные камни, но я пока их не встретил. Пока всё работает абсолютно так же, как с контейнером.
Не бойтесь чего-то нового. Просто начните применять этот метод и в скором времени вы почувствуете некоторое облегчение. Используйте css на полную катушку!
Bootstrap 4. Контейнер и сетка. Часть 1
Bootstrap 4 — это открытый и бесплатный HTML, CSS и JS фреймворк, который используется веб-разработчиками для быстрого создания адаптивных дизайнов сайтов. В сущности — это просто набор сss- и js-файлов. После подключения этих файлов к странице станут доступны большое количество готовых классов и компонентов.
Сетка
Сетка — это набор предопределённых css-классов, с помощью которых можно задать необходимое поведение блокам и построить с их помощью адаптивный макет сайта.
Оберточный контейнер
Оберточный контейнер — это элемент сетки, с которого начинается создание макета для всей страницы или её части (шапка, основной области, подвал). Контейнер может быть адаптивно-фиксированным (класс container ) или адаптивно-резиновым (класс container-fluid ).
Ряды и адаптивные блоки
Следующий элемент сетки — это ряд (блок div с классом row ), который применяется для оборачивания других элементов (адаптивных блоков). Первое назначение ряда — это нейтрализация положительного внутреннего отступа (15px слева и справа) контейнера. А второе — он служит flex-контейнером для flex-элементов (адаптивных блоков). Как нетрудно догадаться, сетка Bootstrap 4 построена на Flexbox.
Последний элемент сетки — адаптивные блоки ( div с классом col- <1…12>или col-
Адаптивные блоки (или колонки) имеют горизонтальные отступы, но их можно удалить, если добавить класс no-gutters для ряда:
Медиа-запросы
Заготовка страницы
Примеры использования сетки
Первый пример
Данный адаптивный блок будет иметь:
Второй пример
Адаптивные блоки в ряду по умолчанию располагаются горизонтальными линиями. В пределах горизонтальной линии адаптивные блоки выстраиваются последовательно слева направо. В одну горизонтальную линию могут поместиться адаптивные блоки с суммарным числом колонок не более 12. Адаптивные блоки, которые не помещаются в текущую линию, переходят на следующую.
Третий пример
При указании ширины адаптивному блоку для какой-то контрольной точки, она будет распространяться не только на эту точку, но и на все следующие, если они не заданы.
Четвертый пример
Пятый пример
Стили, чтобы сразу видеть, какая сейчас ширина окна браузера:
Обзор
Получите подробную информацию о ключевых элементах структурной базы Bootstrap, включая наш подход к лучшей, более быстрой и эффективной веб-разработке.
Тип документа HTML5
В Bootstrap используются некоторые HTML элементы и CSS свойства, которые требуют использования типа документа HTML5. Включайте его в начале всех проектов.
Ориентированный в первую очередь на мобильные устройства
В Bootstrap 2 мы внедряли возможности адаптирования сайтов для мобильных устройств. Приложение Bootstrap 3 изначально рассчитано на работу с мобильными устройствами. Вместо того чтобы добавлять дополнительные шаблоны для мобильных устройств, мы встроили их в ядро программы. Bootstrap в первую очередь рассчитан на мобильные устройства. Макеты для мобильных устройств хранятся в библиотеке, а не отдельными файлами.
Вы можете ограничить возможности масштабирования на мобильных устройствах добавляя user-scalable=no в метатег viewport. Это ограничит масштабирование, это означает что пользователи смогут только листать, в результат ваш сайт будет чувствоваться как нативное приложение (без возможности изменения). В любом случае, мы не рекомендуем это, используйте с осторожностью.
Шрифты и ссылки
Bootstrap стандартно устанавливает масштабы отображения элементов, шрифты и стили ссылок. В частности, мы:
Normalize.css
Для улучшения кросс-браузерного отображения, мы используем Normalize.css, проект от Николас Галлахер и Джонатан Нил.
Контейнеры (хранилища)
Bootstrap требует наличия содержащего элемента для обертывания содержимого сайта и размещения нашей сетки. Вы можете выбрать один из двух контейнеров для использования в ваших проектах. Обратите внимание, что из-за padding и больше, ни один контейнер не является вкладываемым.
Система сеток (Блочная система)
Bootstrap включает в себя отзывчивую, mobilefirst систему разметки, которая соответствующим образом масштабирует до 12 столбцов при увеличении размера устройства или экрана просмотра. Она включает в себя предопределенные классы для упрощенной компоновки разметки, а также мощный класс-примесь для генерации более осмысленных (семантических) макетов.
Введение
Система разметки (сетка) используется для создания макетов страниц через группы строк и столбцов в которых размещается ваш контент. Вот как система разметки работает:
Посмотрите на примеры применения этих принципов к вашему коду.
Мультимедийные запросы
Мы используем следующие медиа-запросы в наших файлах Less для создания ключевых точек разрыва в нашей сетке.
Мы иногда расширяем эти медиа-запросы, что включают max-width для ограничения CSS до более узкого набора устройств.
Параметры разметки
Посмотрите, как особенности сетки Bootstrap работают на нескольких устройствах с помощью удобной таблицы.
97px
Пример: Сложенные по горизонтали
В этой статье разберём сетку Bootstrap 4. Сетка – это базовая часть этого фреймворка, которая позволяет очень быстро и достаточно просто верстать адаптивные шаблоны.
Сетку Bootstrap 4 можно использовать отдельно (без других компонентов). Этот вариант применения фреймворка тоже используется веб-разработчиками, т.к. не всегда готовые Bootstrap элементы, такие как кнопки, навигационные панели, таблицы и прочие компоненты можно использовать в рамках того или иного проекта. Зачастую это касается проектов с уникальным дизайном. В этом случае нужные элементы проще написать с нуля самостоятельно, вместо того чтобы переписывать готовые компоненты Bootstrap.
В этом случае к проекту достаточно подключить из архива только файл «bootstrap-grid.min.css».
Назначение Bootstrap сетки. Контрольные точки
Сетка Bootstrap 4 – это основная часть фреймворка. Она предназначена для создания адаптивных шаблонов.
Сетка Bootstrap 4 основывается на CSS Flexbox и медиа-запросах (CSS media queries). Чтобы понять, как она работает более точно, рекомендуется сначала изучить эти CSS технологии.
Следующий шаг – это разобраться с тем, что такое адаптивный макет сайта.
Если кратко, адаптивный макет – это такой макет, вид которого может изменяться в зависимости от того, какую ширину viewport имеет браузер. Это означает, что при одних значениях ширины viewport адаптивный макет может выглядеть одним образом, а при иных – совершенно по-другому.
Более подробно почитать про адаптивные макеты можно в этой статье.
На схеме приведены основные контрольные точки, которые Bootstrap 4 имеет по умолчанию:
Это означает что до 576px макет сайта может отображаться одним образом, от 576px до 768px – другим образом и т.д. Таким образом, можно создать макет, который на каждом из этих участков может выглядеть по-разному.
| Ширина viewport браузера | Контрольная точка (название устройства) |
|---|---|
| >=0 | без обозначения (xs) |
| >=576px | sm |
| >=768px | md |
| >=992px | lg |
| >=1200px | xl |
Если вы знакомы с сеткой Bootstrap 3, то в ней количество контрольных точек равнялось четырём.
Из чего состоит сетка?
Сетка Bootstrap 4 состоит из:
Все эти части сетки – это обычные HTML элементы, к которым просто добавлены определённые классы.
| Ширина viewport браузера | Контрольная точка (название устройства) | Ширина адаптивно-фиксированного контейнера (container) |
|---|---|---|
| >=0 | без обозначения (xs) | 100% |
| >=576px | sm | 540px |
| >=768px | md | 720px |
| >=992px | lg | 960px |
| >=1200px | xl | 1140px |
Это означает, что адаптивно-фиксированный контейнер будет иметь :
| Ширина viewport браузера | Контрольная точка (название устройства) | Ширина адаптивно-резинового контейнера (container-fluid) |
|---|---|---|
| >=0 | без обозначения (xs) | 100% |
| >=576px | sm | |
| >=768px | md | |
| >=992px | lg | |
| >=1200px | xl |
При верстке макета не следует одни обёрточные контейнеры помещать внутрь других.
Ряды (.row)
Ряд – это элемент бутстрап сетки, который выступает в роли непосредственного контейнера для адаптивных блоков (других элементов сетки, которые мы рассмотрим ниже).
С точки зрения CSS Flexbox, ряд – это flex-контейнер, а адаптивные блоки – это flex-элементы.
Компенсация внутренних padding полей осуществляется так же как и в Bootstrap 3, за счёт отрицательных левых и правых внешних отступов, равных 15px ( margin-left:-15px и margin-right:-15px ).
Пример, в котором показано, что вне зависимости от того, как на каком уровне вложенности непосредственно находится некоторый контент, его отступ от левого и правого края при правильной HTML структуре всегда будет равняться 15px:
Адаптивные блоки (.col)
Создание адаптивного блока осуществляется очень просто посредством добавления одного или нескольких классов col-?-? к необходимому HTML элементу, расположенному непосредственно в ряду.
Данное число определяет, какую часть ширины будет занимать адаптивный блок начиная с указанной контрольной точки от ширины родительского блока, т.е. ряда. При этом ширина ряда в числовом выражении (колонках Bootstrap) по умолчанию равна 12.
Например, блок с классом col-md-4 начиная с контрольной точки md будет занимать 4/12 ширины ряда, т.е. 33,3% (т.е. 4/12*100% = 33.3%).
| Ширина viewport | Контрольная точка | Класс | Ширина адаптивного блока |
|---|---|---|---|
| Крохотная ширина (>=0) | без обозначения (xs) | col-? | от col-1 до col-12 |
| Маленькая ширина (>=576px) | sm | col-sm-? | от col-sm-1 до col-sm-12 |
| Средняя ширина (>=768px) | md | col-md-? | от col-md-1 до col-md-12 |
| Большая ширина (>=992px) | lg | col-lg-? | от col-lg-1 до col-lg-12 |
| Очень большая ширина (>=1200px) | xl | col-xl-? | от col-xl-1 до col-xl-12 |
Например, рассмотрим, какую ширину будет иметь следующий адаптивный блок:
Список, объясняющий какую ширину адаптивный блок, будет иметь на разных контрольных точках:
При указании ширины адаптивному блоку мы указываем класс, содержащий контрольную точку, начиная с которой данная ширина будет действовать. Эту ширину данный блок будет иметь до тех пор, пока она будет переопределена с помощью другого класса, действие которого начинается с более большой ширины viewport.
Адаптивные блоки без указания количества колонок
Рассмотрим несколько примеров.
1. Создание в ряду 5 адаптивных блоков с одинаковой шириной.
2. Ширина блоков с классом col при наличии в линии адаптивного блока с количеством колонок.
В некоторых версиях браузерах Safari есть ошибка при использовании такой разметки, она может быть разбита на несколько линий.
Исправить это можно 2 способами:
Кроме этого, сетка Bootstrap 4 позволяет располагать адаптивные блоки без указания количества колонок на нескольких линиях.
Если данное действие необходимо использовать только для некоторых контрольных точек, то к нему (классу w-100 ) дополнительно нужно ещё добавить служебные отзывчивые классы Bootstrap 4.
В этом примере переноситься на новую линию адаптивные блоки будут только до действия контрольной точки md :
Расположение адаптивных блоков в ряду
Адаптивные блоки в ряду по умолчанию располагаются горизонтальными линиями. В пределах горизонтальной линии адаптивные блоки выстраиваются последовательно слева направо. В одну горизонтальную линию могут поместиться адаптивные блоки с суммарным числом колонок не более 12. Адаптивные блоки, которые не помещаются в текущую линию переходят на следующую.
Рассмотрим ещё один пример, в котором адаптивные блоки имеют различную ширину на различных контрольных точках:
Основной принцип верстки макета
Основной принцип верстки макета веб-страницы на сетке Bootstrap 4 заключается во вкладывании одних адаптивных блоков в другие.
При этом ширина адаптивных блоков это всегда относительная величина, которая задаётся в колонках Bootstrap и зависит только от ширины родителя, т.е. ряда.
Размещать контент веб-страницы следует только в адаптивных блоках.
Например, в имеющийся макет, а именно в адаптивный блок col-8 вложим ещё 2 блока:
Для этого предварительно необходимо в блок col-8 положить ряд (контейнер для адаптивных блоков):
После этого добавим 2 адаптивных блока в ряд:
Выравнивание адаптивных блоков
Выравнивания адаптивных блоков в горизонтальном и вертикальном направлении осуществляется в Bootstrap 4 с помощью служебных flex-классов.
Вертикальное выравнивание адаптивных блоков
Выравнивание адаптивных блоков в пределах линии ряда по вертикали осуществляется посредством одного из следующих классов, который необходимо дополнительно добавить к row :
Например, выровняем все адаптивные блоки по центру линии ряда:
По умолчанию адаптивные элементы занимают всю высоту линии ряда, в которой они расположены.
Выравнивание какого-то определённого адаптивного блока по вертикали в пределах линии может осуществляться одним из следующих классов:
Данные классы необходимо добавлять к адаптивным блокам, а не к ряду.
Например, выравниваем адаптивный блок 2 по нижнему краю линии:
Горизонтальное выравнивание адаптивных блоков
Для выравнивания адаптивных блоков в горизонтальном направлении предназначены следующие классы:
Например, распределим адаптивные блоки в горизонтальном направлении равномерно:
Адаптивная разметка без полей
Обратите внимание, что данный класс ( no-gutters ) действует только на адаптивные блоки, которые непосредственно размещены в этом ряду. Т.е. на адаптивные блоки, которые не имеют в качестве родителя данный ряд, CSS свойства по убиранию padding не распространятся.
Смещение адаптивных блоков
В Bootstrap 4 смещение адаптивных блоков можно выполнить с помощью:
Классы offset
Классы offset предназначены для смещения адаптивных блоков вправо на определённое количество колонок.
Данные классы имеют следующий синтаксис:
<2>– величина смещения, указываемая с помощью количества колонок Bootstrap.
В качестве примера установим смещение адаптивным блокам так, как это показано на рисунке.
Смещение с помощью margin классов
Изменение визуального порядка следования адаптивных блоков
По умолчанию адаптивные блоки визуально отображаются в том порядке, в котором они расположены в HTML коде.
Вместо
Например, изменим порядок следования двух адаптивных блоков:
Ещё один пример (с использованием адаптивных классов order ):
Пример с использованием классов order как с числом, так и со словами first и last :
Пример адаптивной вёрстки на сетке Boostrap 4
Создадим адаптивную разметку блока веб-страницы, приведённого на рисунке, с помощью сетки Bootstrap 4.
1. Создаём разметку блока для мобильных устройств ( xs ).
2. Настраиваем разметку для контрольной точки sm :
3. Устанавливаем блокам количество колонок, которые они должны иметь на устройствах md и lg :
4. Создаём разметку для xl :
Убираем ненужные контрольные точки у адаптивных блоков:
Кроме этого, изначально в Bootstrap 4 адаптивный блок имеет ширину, равную 100%. Это позволяет при создании адаптивных блоков не указывать количество колонок, если их первоначальная ширина должна быть равна 12 колонок (100%).
