Как работает сеточная система Bootstrap 3? — Урок 4

Сеточная система Bootstrap построена на 12-ти колоночной основе. Bootstrap 3 предлагает четыре класса сеточной разбивки.

Легче всего понять сеточную систему на примерах. Из примеров также станет ясно, что Bootstrap 3 ставит в приоритет мобильные устройства.

Колонки одинаковой ширины

Пример 1

div class=»row»>
div class=»col-sm-6″>левая колонка</div>
div class=»col-sm-6″>правая колонка</div>
</div> <!— end row —>

Результат – на экранах выше 768px вы получите две одинаковые колонки, на экранах ниже 768px ваши колонки будут расположены вертикально, т.е. они будут даже на колонками, а как бы рядами.

Пример 2

div class=»row»>
div class=»col-md-6″>левая колонка</div>
div class=»col-md-6″>правая колонка</div>
</div> <!— end row —>

Результат – на экранах выше 992px вы получите две одинаковые колонки, на экранах ниже 992px ваши колонки будут расположены вертикально, т.е. они будут даже на колонками, а как бы рядами.

Пример 3

div class=»row»>
div class=»col-xs-6″>левая колонка</div>
div class=»col-xs-6″>правая колонка</div>
</div> <!— end row —>

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

Колонки разной ширины

Что если вы хотите создать сайт с колонками разной ширины на разных экранах?

Пример 1

div class=»row»>
div class=»col-md-6 col-lg-4″>левая колонка</div>
div class=»col-md-6 col-lg-8″>правая колонка</div>
</div> <!— end row —>

Результат – на средних экранах будут отображаться две одинаковые колонки, на больших экранах левая колонка будет занимать 33% экрана, а правая колонка 66%.

Надеюсь, данные примеры помогли вам понять принцип работы сеточной системы Bootstrap 3.

Смотреть продолжение —  Урок 5