Строки и столбцы сетки Bootstrap — это «звезда шоу», когда речь идет об адаптивном дизайне. я расскажу тебе обо всем
Уровни сетки, медиа-запросы и точки останова в Bootstrap 4. Все дело в ширине.
Bootstrap 4 имеет 5 адаптивных уровней (также известных как «точки останова»), которые вы, возможно, заметили в
некоторые из предыдущих примеров столбцов (например, col-lg-4, col-md).
Bootstap 4 Responsive Breakpoints (в зависимости от ширины экрана):
(xs) — ширина экрана
см — ширина экрана ≥ 576px
md — ширина экрана ≥ 768 пикселей
lg — ширина экрана ≥ 992px
xl — ширина экрана ≥ 1200 пикселей
Почему я поставил (xs) в скобках, а не другие точки останова? Поскольку xs (сверхмаленький) используется по умолчанию
точки останова, инфикс -xs , который использовался для Bootstrap 3. x, больше не используется в Bootstrap 4.x. Итак, вместо
используя col-xs-6 , это просто col-6 .
Bootstrap использует медиа-запросы CSS для установки этих точек останова. Они позволяют управлять поведением столбца при различной ширине экрана.
Например, : вот 2 столбца, каждый шириной 50%:
<дел>
<дел>
Столбец 1
Столбец 2
col-sm-6 означает использование 6 из 12 столбцов шириной (50%) на типичной небольшой ширине устройства (больше или равной 768 пикселей):
меньше 768 пикселей , 2 столбца становятся шириной 100% и располагаются вертикально:
Это связано с тем, что (xs) является точкой останова по умолчанию или подразумеваемой. Поскольку я не указал ширину столбца по умолчанию, ширина 50% применялась только к 768px и шире для точки останова sm.
Поскольку (xs) является точкой останова по умолчанию, подразумевается col-12. Итак, это:
Столбец
Фактически то же самое, что и это:
Столбец
Большие точки останова переопределяют меньшие точки останова.
xs (по умолчанию) > заменено на sm > заменено на md > заменено на lg > заменено на xl
Или наоборот…
xl > переопределения lg > переопределения md > переопределения sm > переопределения (xs)
Таким образом, col-sm-6 на самом деле означает 50% ширины для малых и больших размеров. Для одинаковой ширины столбца на всех уровнях просто установите ширину для наименьшего желаемого уровня. Например :
Например :
..
то же, что и
..
Для другой ширины столбца на большем уровне используйте соответствующую большую точку останова, чтобы переопределить меньшую точку останова.
Например, 3 столбца шириной на см, а 4 столбца шириной на 9 см.0044 md-и-up:
..
Столбцы автоматического макета Bootstrap 4 также работают быстро. Из-за их простоты я предпочитаю их классическим 12-элементным колонкам.
Столбцы с автоматическим макетом идеально подходят для любых сценариев макета, где требуются столбцы одинаковой ширины. Но не забывайте, столбцы из 12 единиц можно смешивать по мере необходимости.
Взгляните на несколько примеров сетки с автоматическим макетом…
3 столбца одинаковой ширины. Столбцы остаются горизонтальными при любой ширине и не располагаются вертикально, потому что точка останова xs установлена по умолчанию:
.
<дел>
<дел>
<дел>1
<дел>2
<дел>3
3 столбца одинаковой ширины (адаптивные). В этом примере столбцы остаются горизонтальными до точки останова см в 576 пикселей, а затем складываются вертикально:
<дел>
<дел>
<дел>1
<дел>2
<дел>3
Помните, что вы можете отключить sm для любой необходимой точки останова (md, lg, xl).
2 колонки, левая боковая панель и правая. Вот пример комбинирования классических столбцов с заданной шириной:
с авторазметкой столбцов. Правая колонка автоматически увеличится, чтобы заполнить всю ширину.
Боковая панель будет располагаться сверху на контрольной точке sm, равной 576px:
<дел>
<дел>
боковая панель
основной
Ключевые моменты адаптивного дизайна с использованием сетки:
Столбцы будут складываться вертикально (и станут полной ширины) при меньшей ширине экрана, если только вы не используете
конкретный col-* class в вашей разметке HTML. Используйте специальный col-* , чтобы предотвратить вертикальное наложение.
Меньшие классы сетки также применяются к большим экранам, если они не переопределены специально для большей ширины экрана.
Таким образом, фактически совпадает с .
Поэтому вам нужно использовать класс только для наименьшей ширины, которую вы хотите поддерживать.
Строки display:flex , поэтому столбцы имеют одинаковую высоту в одной строке. Используйте автоматические поля или элементы выравнивания Flexbox и
justify-content для горизонтального или вертикального выравнивания (по центру, внизу, справа и т. д.).
Предыдущая: Как использовать Bootstrap Grid
Следующая: Как использовать Bootstrap JavaScript
Как на самом деле работает сетка Bootstrap | Кэрол Скелли | WDstack
Вы перешли на Bootstrap 4 ? Я сделал. Вот обновленная история Grid: How the Bootstrap 4 Grid Works ___________________________________________________________________
За последние несколько лет я ответил на много (более 800!) вопросов по Bootstrap на Stack Overflow. Часто эти вопросы связаны с сеткой Bootstrap __ этой мощной смесью контейнеров , строк и столбцов , которые делают адаптивные макеты возможными и гибкими с Bootstrap.
Чаще всего на вопросы о сетке Bootstrap можно ответить, поняв некоторые основы того, что такое сетка и как она работает. Здесь я поясню сетку Bootstrap, чтобы вы больше не задавались вопросом о таких вещах, как…
Как работают различные размеры сетки (или точки останова)?
Почему в Bootstrap есть сетка из 12 единиц (столбцов)?
Можно ли иметь более 12 столбцов в одной строке?
Почему в строке отрицательное поле?
Не требуется много времени, чтобы новички в Bootstrap почувствовали себя с сеткой как дома. Вот HTML-разметка, которую мы будем использовать в Bootstrap для создания простого макета веб-страницы с двумя столбцами.
Я шириной 3 единицы
Ширина 9 единиц
Корневой элемент (верхнего уровня) сетки Bootstrap — это контейнер. Сначала контейнер может показаться тривиальным или ненужным, но в он очень важен для управления шириной макета . Bootstrap предоставляет 2 типа (класса) контейнеров:
— полноразмерный контейнер, охватывающий всю ширину области просмотра.
— контейнер фиксированной ширины с центром в центре области просмотра.
Размер контейнера уменьшается по ширине, так что в конечном итоге его ширина становится равной 100 % (такой же, как у контейнера-жидкости) на устройствах меньшего размера.
Попробуйте демонстрацию контейнера
Контейнеры Bootstrap ( . container или .container-fluid ) работают в тесном сотрудничестве с .row и .col-* (столбцы) для создания «сетки».
Внутри контейнера класс .row используется для содержания столбцов сетки. Рядов должно быть всегда размещать внутри контейнера ( .container или .container-fluid ), чтобы обеспечить правильный интервал (между содержимым страницы и краем браузера). Если вы не поместите строку внутрь контейнера, она будет шире ширины области просмотра, что приведет к горизонтальной полосе прокрутки.
Bootstrap .row использует отрицательных полей (-15px), чтобы противодействовать заполнению (15px) контейнера. Конечный результат № визуальное расстояние (поле или отступ) по бокам строки внутри контейнера. Есть несколько причин, по которым в Bootstrap используется подход «отрицательная маржа» .
Почему Bootstrap использует отрицательные поля?
Все системы сетки имеют интервалы или «желоба» вокруг столбцов. В случае Bootstrap желоб создается с использованием отступов в 15 пикселей вокруг каждого столбца. Эффективный желоб отображается между соседними столбцами в 30px. Внешние столбцы (крайний левый и крайний правый) должны иметь 1/2 отступа (15 пикселей) снаружи, чтобы сохранить одинаковый интервал.
Вместо использования определенного класса, такого как `.first` или `.last`, для этих внешних столбцов сетки, Bootstrap использует отрицательные поля. Это выравнивает желоба крайнего левого и крайнего правого столбцов с внешним краем контейнера .row .
Подход с «отрицательной маржой» — это не просто уловка. Некоторые системы сеток вместо этого настраивают отступы (или поля) в первом/последнем столбцах, используя логику дочернего селектора CSS. Но, как вы можете видеть здесь, это не очень хорошо работает с , так как первый и последний столбцы отображают визуально может отличаться от фактических первого и последнего столбцов в HTML-разметке любой данной строки.
Существуют и другие причины, по которым Bootstrap использует отрицательные поля, включая более простой CSS, вложение и перенос столбцов, которые обсуждаются далее в этой статье.
Связь между .container и .row дополнена столбцами (col-*). Каждая строка делится по горизонтали с помощью классов столбцов Bootstrap col-*. Только столбцы должны быть непосредственными дочерними элементами строк . Горизонтальное расположение на странице имеет значение, поскольку ширина экрана является важным фактором для адаптивного дизайна.
Визуальное пространство между каждым столбцом (известное как желоб ) создается с отступом (15 пикселей) слева и справа от каждого столбца. В результате эффективное расстояние между содержимым каждого столбца составляет 30 пикселей (15 пикселей слева + 15 пикселей справа). Первый (самый левый) и последний (самый правый) столбцы идеально выровнены по краю строки благодаря этому отрицательная маржа обсуждалась ранее.
Причина, по которой Bootstrap имеет сетку из 12 единиц (вместо 10, 16 и т. д.), заключается в том, что 12 равномерно делится на 6 (половины), 4 (четверти) и 3 (трети). Это значительно упрощает адаптацию к различным макетам. Столбцы сетки Bootstrap идентифицируются разными CSS-классами col-(точка останова)-(единицы). Так, например, col-md-3 будет столбцом, который занимает 3 из 12 единиц (или 25%) в строке.
Чтобы включить или «установить» ширину столбца в макете, просто используйте соответствующий класс col-*-* в разметке HTML. Столбцы занимают процент ширины родительского контейнера.
В дополнение к понятию ширины столбца, Bootstrap имеет различные «точки останова» или размеры сетки. Сетка Bootstrap 3 поставляется в четырех (4) размерах, чтобы соответствовать разной ширине экрана (или окна просмотра). Каждый «размер» сетки охватывает диапазон , который предназначен для наилучшего соответствия ширине экрана типичного устройства, такого как настольные компьютеры, ноутбуки, планшеты и смартфоны. Bootstrap использует мультимедийные запросы CSS для создания чувствительных точек останова, которые устанавливают границы для каждого размера сетки. Эти размеры сетки позволяют изменять расположение столбцов, чтобы они наилучшим образом соответствовали разной ширине экрана и устройствам — суть адаптивного дизайна.
xs — for the smallest screen widths like smartphones < 768 px
sm — for small screen widths like smartphones and tablets >= 768 px
md — for средний ширина экрана как у планшетов и ноутбуков >= 992 px
lg — для больших ширина экрана как у настольных компьютеров >= 1200 px
В грядущей сетке Bootstrap 4 будет добавлена новая точка останова xl для размещения самых широких экранов рабочего стола с высоким разрешением. Различные точки останова объединяются с единицами столбцов для создания различных макетов столбцов на разных устройствах. Например, col-md-3 будет иметь ширину 25% на экранах среднего размера, а затем вы можете добавить col-xs-6, чтобы сделать тот же столбец шириной 50% на самых маленьких экранах.
Чтобы включить или «использовать» размер сетки, просто укажите его с помощью соответствующего класса col-*-* в HTML-разметке. Например,
3 единицы шириной на средних экранах …
..
6 единиц ширины на малых экранах …
..
Объедините классы, чтобы использовать изменение ширины столбца для разных размеров сетки…
..
Ключевые моменты , которые следует помнить о точках останова и размерах сетки:
Столбцы будут складываться вертикально (и станут полной ширины) на экранах xs, если вы не используете определенный класс col-xs-* в разметке HTML. . Используйте xs, чтобы предотвратить вертикальное наложение.0012
Меньшие классы сетки и применяются к большим экранам, если они не переопределены специально для больших экранов. Таким образом, фактически совпадает с. Поэтому вам нужно использовать класс только для наименьшей ширины устройства, которое вы хотите поддерживать.
Вот еще несколько примеров, демонстрирующих различные макеты сетки Bootstrap с использованием разных точек останова.
Создавая различные адаптивные макеты, вы обнаружите, что в некоторых сценариях требуются более сложные комбинации строк и столбцов, чтобы все «соответствовало» нескольким устройствам.
Обтекание столбцов
В некоторых адаптивных сценариях вы увидите, что необходимо иметь столбцов, превышающих 12 единиц в одном элементе .row. Рассмотрим, например, макет, в котором мы хотим 3 столбца на больших устройствах и 2 столбца на меньших устройствах :
Чтобы получить этот макет, наша разметка сетки Bootstrap выглядит следующим образом:
x < /div>
х
х
x
x
x
Можно ли иметь более 12 столбцов в одной строке?
Как видно из разметки, общее количество столбцов в строке превышает 12 . Этот метод известен как перенос столбцов и является одной из самых мощных функций RWD в Bootstrap.
Из документации Bootstrap :
«Если в одной строке размещено более 12 столбцов, каждая группа дополнительных столбцов будет перенесена на новую строку как единое целое»
Итак.. да, можно иметь более 12 столбцов в строке ряд. Просто помните, что перенос осуществляется по высоте столбца, и в некоторых случаях вам нужно будет использовать адаптивный сброс, чтобы «очистить» содержимое переноса. Вы можете использовать Bootstrap `clearfix` DIV каждые X столбцов, или вы можете использовать сброс очистки только с помощью CSS, как в этом примере. Это позволяет очищать поплавки Bootstrap и соответственно переносить столбцы на следующую строку независимо от высоты.
Подробнее — Когда использовать класс строк Bootstrap
Смещения
Функция сетки offset позволяет перемещать столбцы вправо или создавать больше пробелов слева. Это удобно, когда вам нужен более узкий центрированный макет .
Вот пример столбцов шириной 2–33% (col-*-4), центрированных путем перемещения первых столбцов на 2 единицы (col-offset-md-2).
<дел> <дел> 1
2
Вложенность
Во многих сценариях требуется, чтобы столбцов находились внутри столбцов , и в этом случае наши столбцы становятся контейнерами. Bootstrap позволяет нам вкладывать строки и столбцы-* в другие столбцы-*, что позволяет лучше контролировать, когда столбцы располагаются вертикально в определенных контрольных точках.
Если мы не забудем подумать о «сначала мобильные», мы можем вложить желаемый меньший макет устройства внутрь желаемого более крупного макета . Позволяет столбцам переключаться между позициями (изменять порядок), когда столбцы располагаются вертикально на небольших устройствах:
1
2
3
4
Большой/средний макет (обратите внимание на порядок столбцов):
Небольшой макет:
При вложении всегда помните, что нужно использовать еще одну строку вокруг внутренних столбцов, чтобы обеспечить правильный интервал/заполнение. Также внутренние строки не должны превышать 12 столбцов. Хотя вы можете использовать вложение для изменения положения столбцов на разных устройствах, вы также можете использовать классы push и pull в Bootstrap.
Заказ (Push-Pull)
Часто требуется вертикальное расположение столбцов на устройствах с меньшим экраном (планшеты/телефоны), где горизонтальное пространство ограничено. Типичный макет страницы с двумя столбцами — это то место, где мы можем увидеть наиболее распространенный вариант использования порядка столбцов. Используя CSS-классы Bootstrap col-*-push-* и col-*-pull-*, мы можем использовать функцию упорядочения столбцов сетки Bootstrap. На маленьких (мобильных) экранах мы хотим показать наш основной контент вверху, а затем боковую панель навигации внизу. Это также помогает SEO, так как основной контент находится ближе к верхней части страницы, когда бот Google индексирует страницу.
main content
sidebar
Важно помнить, что можно использовать как вложенные классы, так и классы push/pull на изменить порядок столбцов .
x, больше не используется в Bootstrap 4.x. Итак, вместо
используя 
Поскольку я не указал ширину столбца по умолчанию, ширина 50% применялась только к 768px и шире для точки останова sm.
Для одинаковой ширины столбца на всех уровнях просто установите ширину для наименьшего желаемого уровня. Например :
Используйте специальный 
Вот обновленная история Grid: 
Вот HTML-разметка, которую мы будем использовать в Bootstrap для создания простого макета веб-страницы с двумя столбцами.
container 
В случае Bootstrap желоб создается с использованием отступов в 15 пикселей вокруг каждого столбца. Эффективный желоб отображается между соседними столбцами в 30px. Внешние столбцы (крайний левый и крайний правый) должны иметь 1/2 отступа (15 пикселей) снаружи, чтобы сохранить одинаковый интервал.
Каждый «размер» сетки охватывает диапазон , который предназначен для наилучшего соответствия ширине экрана типичного устройства, такого как настольные компьютеры, ноутбуки, планшеты и смартфоны. Bootstrap использует мультимедийные запросы CSS для создания чувствительных точек останова, которые устанавливают границы для каждого размера сетки. Эти размеры сетки позволяют изменять расположение столбцов, чтобы они наилучшим образом соответствовали разной ширине экрана и устройствам — суть адаптивного дизайна.
Различные точки останова объединяются с единицами столбцов для создания различных макетов столбцов на разных устройствах. Например, col-md-3 будет иметь ширину 25% на экранах среднего размера, а затем вы можете добавить col-xs-6, чтобы сделать тот же столбец шириной 50% на самых маленьких экранах.
. Используйте xs, чтобы предотвратить вертикальное наложение.0012
Этот метод известен как перенос столбцов и является одной из самых мощных функций RWD в Bootstrap.
Это удобно, когда вам нужен более узкий центрированный макет .
Также внутренние строки не должны превышать 12 столбцов. Хотя вы можете использовать вложение для изменения положения столбцов на разных устройствах, вы также можете использовать классы push и pull в Bootstrap.