Как работает сетка Bootstap

Продолжаем тему работы с фреймворком, и сегодня речь пойдет о его основном компоненте сетке. Когда я слышу где либо, об использовании в верстке фреймворка Bootstrap у меня невольно в голове возникает ассоциация с сеткой, которую он использует для создания верстки сайта. Эта сетка представляет собой систему из 12 столбцов и не ограниченного количества строк, столько сколько вам необходимо, ели вы когда либо сталкивались с табличной версткой, то безусловно у вас в голове возникнут подобные ассоциации. Но здесь применяются flex-боксы, и применяются они с 4-ой версии фреймворка, в третей версии сетка формировалась с использованием свойства float. На данный момент это крайне удобный инструмент, который, безусловно, в разы увеличивает скорость разработки и упрощает процесс верстки сайта.

Простая сетка col

Давайте непосредственно перейдем к примеру и разберем все подробнее:

<div class="row">
    <div class="col">sample1</div>
    <div class="col">sample2</div>
    <div class="col">sample3</div>
 </div>

Мы получаем следующую картину:

Для удобства восприятия я настроил так чтобы было видно все строки и столбцы, окрасив их в разные цвета соответственно. Теперь непосредственно по коду класс row задаёт строку в которой уже вы можете располагать столбцы, которые в свою очередь задаются классом col. В данном примере я сделал 3 столбца, они полностью адаптивные и занимают всю доступную ширину.

Сетка с заданным количеством столбцов

Как я уже упоминал ранее столбцов в сетке 12 это стандарт которого стараются придерживаться, в связи с этим давайте рассмотрим следующий вариант:

<div class="row">
    <div class="col-6">sample1</div>
    <div class="col">sample2</div>
    <div class="col-2">sample3</div>
 </div>  

В этом примере я задал двум блокам точное количество столбцов, а одной, то есть второй, оставил автоматическое определение, и она соответственно заняла 4 столбца, что наглядно видно. Эти блоки так же адаптивны, но разница лишь в том что они занимают конкретно заданное количество столбцов. Невольно возникает вопрос , а что будет если мы превысим цифру 12 и зададим больше столбцов в одной строке:

<div class="row">
    <div class="col-6">sample1</div>
    <div class="col-5">sample2</div>
    <div class="col-3">sample3</div>
 </div>

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

Брейкпоинты в сетке Bootstrap

Далее нам необходимо понять, что такое брейкпоинты, говоря просто и понятно это определенные точки с заданным разрешением, при попадании в которые блоки начинают вести себя по определенным правилам. Звучит конечно не совсем понятно, но лучше посмотреть на практике как это работает и тогда все станет намного проще. Приведу таблицу с данными точками на сайте bootstrap она есть:

И давайте сразу пример:

<div class="row">
    <div class="col-4">sample1</div>
    <div class="col-md-4">sample2</div>
    <div class="col-4">sample3</div>
 </div>

И тут весь смысл брейкпоинта заключается в том, что второму блоку мы задали класс md и он будет работать, то есть занимать 4 столбца только при разрешении 768px и выше, то есть наглядно разрешение окна браузера большие или равно 768px:

А если оно будет меньше:

То как видите, второй блок перестал занимать 4 столбца, а в свою очередь начал работать как класс col заняв все столбцы. В этом собственно вся и суть работы брейкпоинтов, вы можете задавать поведение блоков относительно разрешения окна браузера, что позволяет вам делать максимально адаптивные сайты. Здесь главное прочувствовать эту суть, и тогда у вас все будет легко получаться, не забывайте о том, что вы можете комбинировать классы для получения максимального эффекта:

<div class="row">
    <div class="col-sm-7 col-md-4 col-lg-5 col-xl-3">sample1</div>
    <div class="col-sm-2 col-md-2 col-lg-5 col-xl-2">sample2</div>
    <div class="col-sm-1 col-md-6 col-lg-2 col-xl-7">sample3</div>
 </div>

И так проверим на разных разрешениях для начала брейкпоинт sm 576px:

Как видите мы использовали 10 столбцов и последний самый маленький, смотрим дальше тот же код только теперь брейкпоинт md соответственно 768 пикселей:

А здесь уже у нас последний блок самый большой, идем дальше следующий брейкпоинт lg 992px:

Здесь у нас 2 блока по 5 столбцов и последний блок на 2 столбца, и максимальный брейкпоинт xl соответственно 1200 px:

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

Важные особенности сетки Bootstrap

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

Теперь давайте разберем ещё пару особенностей строк:

<div class="row mt-4">
   <div class="col">Sample1</div>
   <div class="col">Sample2</div>
   <div class="col">Sample3</div>
 </div>
 <div class="row">
   <div class="col">Sample1</div>
   <div class="col">Sample2</div>
   <div class="col">Sample3</div>
 </div>

Мы получаем 2 строки с тремя блоками:

А если мы изменим код следующим образом:

<div class="row">
   <div class="col">Sample1</div>
   <div class="col">Sample2</div>
   <div class="col">Sample3</div>
   <div class="w-100"></div>
   <div class="col">Sample1</div>
   <div class="col">Sample2</div>
   <div class="col">Sample3</div>
 </div>

Мы получаем тот же эффект, класс .w-100 он дает возможность переноса на другую строку, это одна из особенностей.

Смещение блоков в сетке

Иногда возникает потребность смещения блоков в ту или иную сторону и тут есть интересное свойство, которое поможет это сделать offset давайте посмотрим как это работает:

<div class="row mt-4">
   <div class="col-3 offset-1">Sample1</div>
   <div class="col-3 offset-4">Sample2</div>
 </div>

Первый блок мы сместили на 1 столбец относительно начала окна, затем второй блок мы смещаем на 4 столбца относительно последнего блока. Интересное свойство и достаточно часто применяется на практике.

Порядок блоков в сетке

Так же есть интересное свойство задавать порядок блокам и несколько нюансов, а свойство это называется order давайте рассмотрим на примере:

 <div class="row">
   <div class="col-3 order-3">Sample1</div>
   <div class="col-3 order-1">Sample2</div>
   <div class="col-3 order-2">Sample3</div>
 </div>

И вот что у нас получилось, первый блок стал третьим, второй блок стал первым, а третий блок стал вторым, как вы поняли тусовать мы их можем как хотим. Теперь один интересный момент если у блока не задавать значение order то он всегда по умолчанию будет первым вне зависимости от того какой порядок задан другим блокам. Так же есть ещё 2 свойства которые стоит рассмотреть:

<div class="row">
   <div class="col-3 order-last">Sample1</div>
   <div class="col-3 order-1">Sample2</div>
   <div class="col-3 order-first">Sample3</div>
 </div> 

Здесь так же своя хитрость order-last делает блок всегда последним, order-first делает блок первым.

На этом я заканчиваю свой урок, думаю было рассмотрено не мало, свойств сетки bootstrap конечно этим она не ограничивается, но понятие и основные свойства вы теперь знаете точно и с этим уже можно работать. А в других урока я так же расскажу и о других особенностях фреймворка.