Bootstrap 4. Сетка

В сетке Bootstrap по умолчанию содержится 12 колонок. Число 12 делится на много других чисел, поэтому им очень удобно оперировать.

Имеются три главных компонента сетки - контейнер, ряд и колонка.

Контейнер представлен классом .container для фиксированной ширины и .container-fluid на всю ширину страницы. Контейнеры помогают выравнивать содержимое страницы.

Container-fluid – это полностью резиновый контейнер, который растягивается всегда на 100% ширины окна, поэтому если у вас полностью резиновый сайт, вам нужен именно такой контейнер.

Внутри этого контейнера должен быть ещё один блок с классом .row, то есть ряд сетки.

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

Классы колонок содержат в названии число колонок. Колонка имеет класс col-x-x, где первый x – обозначение устройства, а второй – количество колонок от 1 до 12. Максимальное число - 12 колонок в ряд. Таким образом, если вы хотите разбить контент на три равные части, то используйте .col-sm-4 (4 * 3 = 12).

Ширина колонки вычисляется автоматически относительно родительского элемента.

Колонки имеют горизонтальные отступы для создания пространства между собой.

Было выделено 5 основных типов устройств по ширине экрана. Для самых маленьких устройств (extra small), у которых ширина экрана менее 576 пикселей, префикс класса – col-xs-. Далее идет sm (small, ширина от 576 до 768 пикселей), md (medium, ширина от 768 до 992 пикселей), lg (large ), с шириной от 992 до 1200 пикселей и xl (extra large) с шириной более 1200 пикселей.

Перестроение начинается с определённых величин: 540px, 720px, 960px, 1140px.

Опорные точки основаны на минимальной ширине и распространяются выше. Например, col-sm-4 применим к маленьким, средним, большим и сверхбольшим экранам по нарастающей.

Как же работают классы типа col-x-x? Очень просто.

Создадим три одинаковые колонки.

Одна треть/col-sm-4
Одна треть/col-sm-4
Одна треть/col-sm-4

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      Одна треть/col-sm-4
    </div>
    <div class="col-sm-4">
      Одна треть/col-sm-4
    </div>
    <div class="col-sm-4">
      Одна треть/col-sm-4
    </div>
  </div>
</div>

Три равные колонки будут на маленьких, средних, больших и очень экранах. Колонки центрируются внутри родительского .container.

Теперь создадим другой пример, когда на маленьких экранах всё будет размещаться в одной колонке. При увеличении размеров разметка будет меняться. Удобнее проверять на настольном компьютере, уменьшив ширину браузера до маленьких величин и постепенно его увеличивая.

col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-1
col-md-8
col-md-4
col-md-4
col-md-4
col-md-4
col-md-6
col-md-6

<div class="container">
  <div class="row">
    <div class="col-md-1">col-md-1</div>
    <div class="col-md-1">col-md-1</div>
    <div class="col-md-1">col-md-1</div>
    <div class="col-md-1">col-md-1</div>
    <div class="col-md-1">col-md-1</div>
    <div class="col-md-1">col-md-1</div>
    <div class="col-md-1">col-md-1</div>
    <div class="col-md-1">col-md-1</div>
    <div class="col-md-1">col-md-1</div>
    <div class="col-md-1">col-md-1</div>
    <div class="col-md-1">col-md-1</div>
    <div class="col-md-1">col-md-1</div>
  </div>
  <div class="row">
    <div class="col-md-8">col-md-8</div>
    <div class="col-md-4">col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-4">col-md-4</div>
    <div class="col-md-4">col-md-4</div>
    <div class="col-md-4">col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-6">col-md-6</div>
    <div class="col-md-6">col-md-6</div>
  </div>
</div>

В этом примере мы использовали класс .col-md-* для построения сетки, начиная с десктопных устройств (medium). Всё, что меньше (телефоны (xs) и планшеты (sm)), будет выводиться в одну колонку, так как мы не указали для этих размеров правила.

Mobile и desktop

Если такое поведение не устраивает, то добавляйте класс .col-xs-*.

На мобильных устройствах одна колонка растянется на всю ширину, а вторая займёт половину ниже. Так как больше 12 колонок быть не может, то задав ширину у первой колонки в 12 единиц, мы заставили вторую колонку перейти на следующую строку и занять половину (col-xs-6)

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

На мобильных занимает каждая колонка половину экрана. Третья колонка разместится с новой строки под первой колонкой. На настольных устройствах колонки разместятся в один ряд, занимая одну треть каждая.

.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4

<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

Колонки всегда занимают половину экрана на мобильных и настольных устройствах.

.col-xs-6
.col-xs-6

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

Mobile, tablet, desktop

Ещё больше вариативности. Добавляем поддержку планшетов, используя класс .col-sm-*.

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

Подведём итог. Создадим две колонки в пропорции 3:1.


  <div class = "row">
  	<div class = "col-md-3 col-sm-6">Первая колонка ряда</div>
  	<div class = "col-md-1 col-sm-6">Вторая колонка ряда</div>
  </div>
Первая колонка ряда
Вторая колонка ряда

С помощью этих классов мы определили: на средних и больших устройствах дать первому блоку ширину в 3 колонки из 12, а второму – 1 из 12. А вот на маленьких экранах планшетов следует оба блока показать на 50% ширины ряда.

А что же произойдет на самых маленьких экранах телефонов? Если сузить окна браузера до размеров телефона, то отменится правило для extra small и каждый блок станет занимать по 100% ширины в ряде. Запомните, что это поведение блоков по умолчанию – занимать 100% ширины в своем контейнере.

Если мы задаем, например, col-sm-6, то такая ширина сохранится у блока и на md и lg, если для этих устройств ничего не прописано.

А вот на xs, то есть на экстра-маленьких устройствах, ширина блока будет 100%, а не 50%. То есть наследование прописанной ширины происходит только для больших устройств, но ни в коем случаев не для меньших. Например, если вы напишите такой класс: col-lg-6, то такая ширина у блока будет только на экранах более 1200 пикселей. На md, sm, xs будет другая ширина.

Вы можете указывать блоку не один, а несколько классов. Например, col-xs-6 col-md-4.

На xs-экранах будет 50%, то есть половина ширины контейнера. На sm то же самое – 50%, так как значение наследуется для устройств с большей шириной. На md блок займет треть ширины. На самых больших экранах тоже треть. Опять же, значение наследуется из md.

Вы можете прописать так:


<div class="col-xs-10 col-sm-8 col-md-6 col-lg-4"></div>

Мы задали своё отображение для каждого типа устройств.

Можно вкладывать сетку в какой-угодно блок. Давайте рассмотрим такой пример кода:

1 блок
2 блок
3 блок

<div class="container">
  <div class="row">
  	<div class="col-sm-8 col-md-6">
  	  <div class= "row">
  	  	<div class="col-sm-4 col-md-3">1 блок</div>
  	  	<div class="col-sm-4 col-md-3">2 блок</div>
  	  	<div class="col-sm-4 col-md-3">3 блок</div>
  	  </div>
  	</div>
  </div>
</div>

У нас есть общий контейнер (фиолетовый), а в нём один ряд. В ряд вложен блок, который занимает половину ширины контейнера на средних и больших экранах, две трети на маленьких и 100% на самых маленьких. Внутри ещё три блока.

Ряд является контейнером для других рядов и т.д. Обязательно придерживайтесь в коде структуры: контейнер – ряд — ячейки (колонки).

Адаптивные утилиты (старое)

Наверняка вы не планируете на мобильных устройствах отображать 100% элементов сайта, которые видны на больших десктопах – вам попросту некуда будет всё это впихнуть. Очень часто на мобильных устройствах полностью убирают боковую колонку, сворачивают меню, удаляют какие-то большие декоративные элементы и т.д.

В Bootstrap все это очень легко делать с помощью классов, которые называют адаптивными утилитами.

Чтобы скрыть элемент на нужном устройстве, достаточно всего лишь использовать один из четырех классов: hidden-xs|sm|md|lg. Хочу отметить, что элемент будет скрыт только на указанной ширине экрана, на всех остальных он останется видимым.

Если вам нужно сделать элемент видимым только на одном из четырех типов устройств, удобнее использовать классы visible-xs|sm|md|lg- block|inline|inline-block.

Кроме самого ключевого слова и типа устройств тут еще нужно указать, как именно отображать элемент: как блочный, строчный или блочно-строчный. Примеры:

visible-xs-inline – элемент будет виден только на самых маленьких экранах и будет отображаться как строка.

visible-lg-block – будет виден только на самых больших экранах и будет блочным.

Адаптивные утилиты позволяют как угодно трансформировать сайт на всех типах устройств. Используйте их по мере необходимости в своей верстке.

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

В flexbox макетах все ячейки в строке имеют высоту колонки с наибольшим контентом.

Чтобы помочь представить две системы, посмотрите демо обеих сеток.

Когда колонок в строке становится больше 12, тринадцатая колонка перепрыгивает на следующую строку. Эффект называется переход столбца и работает одинаково в обычной сетке и flex-bootstrap.


<div class="row">
   <div class="col-xs-6">.col-xs-6</div>
   <div class="col-xs-6">.col-xs-6</div>
   <div class="col-xs-3">.col-xs-3, This column will move to the next line.</div>
</div>
.col-xs-6
.col-xs-6
.col-xs-3, This column will move to the next line.

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

Различные примеры сеток смотрите также в FlexBox

Реклама