Работа с сеткой бутстрап поможет ускорить верстку сайта. Виды сеток и работа с ними

Доброго времени суток всем желающим изучить создание разметки веб-страниц при помощи Bootstrap Grid System. В сегодняшней публикации я поведаю вам, что подразумевает под собой сетка Бутстрап и для чего она была придумана, расскажу про виды модульных сеток и определенные опции, которые возникают в зависимости от размера экрана девайсов.

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

Bootstrap Grid System – вот это название!

На самом деле это обычная сетка, максимальное количество колонок которой может быть 12. На этом числе и строится дальнейшая разметка. Сейчас объясню подробно.

При построении данной сетки используются блоки – div-ы. И вот когда вы выделяете некий блок для конкретной ячейки, то прописываете в атрибуте class имя spanX или col-*-X, где X – это число, которое отвечает за ширину колонки. Например,

class="span6”

X может быть назначен в диапазоне [1; 12]. Однако существует одно обязательное условие: сумма ширины всех колонок не должна превышать 12.

Такие разметки страниц используются во многих случаях: для фотошопа, новостных сайтов, блогов и форумов, лендингов, сайтов-визиток и т.д.

Что нужно знать о классах

Для создания более динамической и гибкой разметки веб-страниц, разработчикам необходимо знать про четыре базовых класса grid-систем. Они были разработаны специально для указания устройства, для которого разрабатывается внешний вид сайта.

Для удобства я структурировал информацию в таблицу.

Все эти классы можно использовать как по отдельности, так и комбинировать. К тому же есть возможность изменять параметры. Так, через $container-max-width можно переопределить размер ограничения любого класса. Это выглядит следующим образом:

45c85d2bcce686ea2ee5029f414889b6000

Теперь вы знаете, что изменять размер сеток при помощи встроенных префиксных классов легко. Вы можете установить даже, к примеру, 1170px для PSD — сеток.

Что же предоставляют такие классы? Они выполняют роль медиазапросов (@media) при адаптивной верстке. А точнее они и есть медиазапросы. Как вы помните из прошлых публикаций, Bootstrap 3 – это фреймворк, который реализует концепцию mobile-first и отзывчивую верстку.

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

Внимание! Правила!

Для того чтобы grid-ы работали корректно, нужно придерживаться нескольких основных правил:

• Все создаваемые строки обязательно должны быть прописаны в блоке с классом .container или .container- fluid (чуть позже я объясню, в чем разница);
• Обязательно используйте класс .row для создания ячеек;
• Весь контент должен быть помещен в колонки и при этом только колонки могут наследоваться непосредственно от строк;
• Вне зависимости от количества создаваемых колонок, общая их сумма должна равняться 12. Поэтому при создании трех одинаковых ячеек будет указываться span4 или .col- sm-4 (12/3=4);
• Если количество и ширина созданных колонок не соответствует необходимой установленной сумме, то можно ее заполнить параметром, отвечающим за отступы – col-*offset- X, где X – это число.

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

Поговорим о главном

Ну а теперь вернемся к нашим баранам. Чуть выше я обещал рассказать, в чем разница между классами .container и .container- fluid. Так вот это наименования главных контейнеров, в которые стоит помещать сетку с контентом.

«Почему же существует два класса?» — спросите вы. А все потому что первый отвечает за фиксированную ширину сетки (которая при этом не перестает быть отзывчивой), а второй растягивает контейнер на всю ширину экрана.

Хочу отметить важную деталь! Названые классы можно использовать только по отдельности и один раз в одном grid-е, поэтому вложенных контейнеров быть не может.

Практическая часть

Теперь вы знаете базовые инструменты для создания своего собственного шаблона при помощи Bootstrap Grid. Я создам простую разметку веб-страницы, в которой будет выделено поле для основного контента, навигационной панели и «подвала».

1
2
3
4
5
6

$container-max-widths: (
 xs: 563px, 
 sm: 630px,
  md: 774px,
  lg: 960px,
);

Чтобы растянуть содержимое страницы на весь экран, добавьте –fluid к наименованию класс container и row.

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

Пока-пока!

С уважением, Роман Чуешов