Как работает сеточная система в Bootstrap 3 и примеры работы с ней

Как работает сеточная система в Bootstrap 3

Bootstrap 3 сетка обычно распространяется в комплекте с 12 — колоночной сеточной системой, рассчитанной преимущественно на мобильные гаджеты с небольшим экранами. Новая версия фреймворка имеет 4 размера сетки.  К примеру, для получения трех равных колонок по размеру следует разделить 12, такие размеры сетки в Bootstrap 3) на 3 (число колонок).

Сетка Бутстрап имеет 4 размера.

Супер малая сетка «Extra small devices» — предназначена для мобильных устройств с размером экрана по ширине меньше 768 пикселей. Она будет расположена горизонтально не зависимо от размера дисплея. И префикс класса для нее — col-xs.

Малая сетка размер экрана варьируется от 768 до 992 пикселей и это в основном планшеты. Ее префиксы класса col-sm.

Средняя – ее используют девайсы размером экрана более 992 и не менее 1200. Здесь уже речь идет об дисплеях ПК и ноутбуков. В этом префикс класса col-md.

Большая сетка предназначена для мониторов с шириной выше 1200 пикселей с префиксом класса col-lg.

Бутстрап сетка может использоваться одна или две, три или все четыре системы в одном макете. Это зависит от дизайна и цели веб – страницы.

Создание строк/ячеек с использованием классов Бутстрапа

Исходный код-файл sait.html могут быть обозначены предполагаемые строки. К примеру, их будет 4: хедер (название сайта и логотип), заголовок и описание страницы, содержание и футер. В него нужно добавить разметку Бутстрапа, чтобы определить месторасположение радов. Для этого необходимо вставить содержимое в теги Div, или другие, прописав класс class=»row».

В Bootstrap сетке может быть 12-ти колоночная сетка. И это может быть 4 колонки равные по ширине. Для этого нужно обернуть будущие строки в контейнер, где пропишутся классы Bootstrap с нужными префиксами (в основном это Div). Обычно выбирают компромиссный вариант – среднюю сетку – тогда добавляется класс «col-md-3» — <div class=»col-md-3″>.  Это позволяет в результате получить веб-страницу более презентабельного вида.

Важно помнить, что не следует нарушать правило: числа после префиксов одной сетки во всех ячейках в сумме должны давать 12.

Как настроить шапку веб-страницы с помощью Bootstrap 3

Для того, чтобы настроить систему сетки для ряда с названием и описанием сайта и логотипом, можно применить большую сетку с помощью «col-lg-6», для получения двух равных колонок. Но при использовании большого типа сетки слом происходит на больших разрешениях дисплея. Затем ячейки складывают по вертикали. Во избежание этого можно добавить еще одну – малую сеточную систему (префикс класса col-sm). Не рекомендуют делать для малой сетки одинаковыми ячейки с названием сайта и логотипом, поскольку последний обычно получается узким. Лучше сделать колонку с названием и описанием при активации малой сетки Бутстрапа вдвое больше колонки с логотипом. Ведь, если окно браузера будет уменьшаться, ячейки сблизятся до слома для малой сеточной системы Бутстрапа (не меньше 768 пикселей). В результате ячейки будут находится друг под другом.

В других статьях мы рассмотрим, как работает сетка Бутстрап, как оформлять кнопки, таблицы, Html формы и многое другое.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *