Bootstrap использует систему FlexBox. В сетке Bootstrap по умолчанию содержится 12 колонок. Число 12 делится на много других чисел, поэтому им очень удобно оперировать. Ваша задача - разбивать колонки таким образом, чтобы в сумме они давали 12, например, две колонки в пропорции 8:4 или три колонки 5:4:3. Если вы ошибётесь и число колонок будет больше 12, то лищние колонки будут переноситься на следующую строку по правилам FlexBox.
Имеются три главных компонента сетки - контейнер, ряд и колонка.
Контейнер представлен классом container для фиксированной ширины и container-fluid на всю ширину страницы. Контейнеры помогают выравнивать содержимое страницы.
Container-fluid – это полностью резиновый контейнер, который растягивается всегда на 100% ширины окна, поэтому если у вас полностью резиновый сайт, вам нужен именно такой контейнер.
На странице может быть несколько контейнеров, логически разбивающие содержание страницы.
Внутри этого контейнера должен быть ещё один блок с классом row, то есть ряд сетки.
Ряды представляют собой горизонтальные группы колонок для равномерного и аккуратного распределения содержимого. Контент должен находиться в колонках. Только колонки могут быть дочерними элементами рядов.
Ряды не могут существовать вне контейнера.
Классы колонок содержат в названии число колонок. Колонка имеет класс col-x-x, где первый x – обозначение устройства, а второй – количество колонок от 1 до 12. Максимальное число - 12 колонок в ряд. Таким образом, если вы хотите разбить контент на три равные части, то используйте .col-sm-4 (4 * 3 = 12).
Ширина колонки вычисляется автоматически относительно родительского элемента.
Колонки имеют горизонтальные отступы для создания пространства между собой.
Если использовать простые варианты без дополнительных модификаторов типа col-8 и col-4, то две колонки с заданными пропорциями будут построены на любых экранах - на десктопе, планшетах и телефонах. Это не всегда удобно. Поэтому применяют дополнительные правила. Можно реализовать 3 колонки на настольном компьютере, 2 колонки на планшетах и 1 колонку на мобильном телефоне
Было выделено 5 основных типов устройств по ширине экрана. Для самых маленьких устройств (extra small), у которых ширина экрана менее 576 пикселей, префикс класса – col. Далее идет col-sm (small, ширина от 576 до 768 пикселей), col-md (medium, ширина от 768 до 992 пикселей), col-lg (large ), с шириной от 992 до 1200 пикселей и xl (extra large) с шириной более 1200 пикселей.
Перестроение начинается с определённых величин: 540px, 720px, 960px, 1140px.
Опорные точки основаны на минимальной ширине и распространяются выше. Например, col-sm-4 применим к маленьким, средним, большим и сверхбольшим экранам по нарастающей.
Как же работают классы типа col-x-x? Очень просто.
Создадим три одинаковые колонки.
<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.
Теперь создадим другой пример, когда на маленьких экранах всё будет размещаться в одной колонке. При увеличении размеров разметка будет меняться. Удобнее проверять на настольном компьютере, уменьшив ширину браузера до маленьких величин и постепенно его увеличивая.
<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). Всё, что меньше (телефоны (col) и планшеты (col-sm)), будет выводиться в одну колонку, так как мы не указали для этих размеров правила.
Если такое поведение не устраивает, то добавляйте класс col-*.
На мобильных устройствах одна колонка растянется на всю ширину, а вторая займёт половину ниже. Так как больше 12 колонок быть не может, то задав ширину у первой колонки в 12 единиц, мы заставили вторую колонку перейти на следующую строку и занять половину (col-xs-6)
<div class="row">
<div class="col-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
Следующий пример.
На мобильных каждая колонка занимает половину экрана. Третья колонка разместится с новой строки под первой колонкой. На настольных устройствах колонки разместятся в один ряд, занимая одну треть каждая.
<div class="row">
<div class="col-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
Колонки всегда занимают половину экрана на мобильных и настольных устройствах.
<div class="row">
<div class="col-6">.col-xs-6</div>
<div class="col-6">.col-xs-6</div>
</div>
Ещё больше вариативности. Добавляем поддержку планшетов, используя класс .col-sm-*.
<div class="row">
<div class="col-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-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, если для этих устройств ничего не прописано.
А вот на col, то есть на экстра-маленьких устройствах, ширина блока будет 100%, а не 50%. То есть наследование прописанной ширины происходит только для больших устройств, но ни в коем случаев не для меньших. Например, если вы напишите такой класс: col-lg-6, то такая ширина у блока будет только на экранах более 1200 пикселей. На md, sm, xs будет другая ширина.
Вы можете указывать блоку не один, а несколько классов. Например, col-6 col-md-4.
На маленьких экранах будет 50%, то есть половина ширины контейнера. На sm то же самое – 50%, так как значение наследуется для устройств с большей шириной. На md блок займет треть ширины. На самых больших экранах тоже треть. Опять же, значение наследуется из md.
Вы можете прописать так:
<div class="col-10 col-sm-8 col-md-6 col-lg-4"></div>
Мы задали своё отображение для каждого типа устройств.
Можно вкладывать сетку в какой-угодно блок. Давайте рассмотрим такой пример кода:
<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% на самых маленьких. Внутри ещё три блока.
Ряд является контейнером для других рядов и т.д. Обязательно придерживайтесь в коде структуры: контейнер – ряд — ячейки (колонки).
Старые сетки работали на обтеканиях, поэтому все колонки были разной высоты. Высота определялась контентом.
В Flexbox макетах все ячейки в строке имеют высоту колонки с наибольшим контентом.
Чтобы помочь представить две системы, посмотрите демо обеих сеток.
Когда колонок в строке становится больше 12, тринадцатая колонка перепрыгивает на следующую строку. Эффект называется переход столбца и работает одинаково в обычной сетке и flex-bootstrap.
<div class="row">
<div class="col-6">.col-xs-6</div>
<div class="col-6">.col-xs-6</div>
<div class="col-3">.col-xs-3, This column will move to the next line.</div>
</div>
Единственное, на что стоит обратить внимание, это то, что в режиме автомакетирования безразмерная колонка может растянуться на всю строку, если она не вместилась на предыдущей.
Различные примеры сеток смотрите также в FlexBox
Сначала создаём блок ряда в контейнере.
<div class="row">
<div></div>
<div></div>
</div>
Начинается проверка с маленького экрана. Выводим два блока по вертикали один над другим.
<div class="row">
<div class="col-12"></div>
<div class="col-12"></div>
</div>
На средних экранах хотим видеть два блока рядом по горизонтали.
<div class="row">
<div class="col-12 col-md-6"></div>
<div class="col-12 col-md-6"></div>
</div>
Так, варьируя классы, вы можете построить нужный макет.