Система сеток Bootstrap, также известная как Grid-system, позволяет создавать адаптивные макеты веб-страниц. Представьте вашу страничку как таблицу со столбцами и строками. В Bootstrap эта таблица содержит 12 столбцов — это максимальное количество. Число строк не ограничено, так как страница может прокручиваться вниз бесконечно.
Работа со столбцами
Столбцы можно объединять для создания различных макетов. Например, три столбца могут быть выделены под левое меню, а оставшиеся девять — под основную часть сайта. Система сеток помогает создавать разметку сайта.
Классы для создания сеток
Bootstrap предлагает классы для создания сеток различной ширины: xs (extra small — для смартфонов), sm (small — для планшетов), md (medium — для ноутбуков) и lg (large — для больших компьютеров). В этом уроке мы создадим адаптивный сайт, подстраивающийся под все размеры экранов, поэтому будем использовать классы, управляющие поведением на разных размерах экранов.
Создание адаптивного макета
Создадим контейнер с классом container. Этот класс задаёт фиксированную ширину. Для растяжения блока на всю ширину экрана добавим класс container-fluid.
Пример: три блока
Создадим заголовок (H1) и три блока с разным фоном. Для создания ряда используем класс row. Каждый блок будет столбцом, для которого используем класс col. Так как у нас 12 столбцов, и мы хотим три блока, каждый блок займёт 4 столбца. Поэтому используем класс col-md-4. md указывает, что стиль применяется к средним экранам (ноутбуки). Добавим стили для фона каждого блока.
<div class="container-fluid">
<h1>Заголовок</h1>
<div class="row">
<div class="col-md-4" style="background-color:#99ccff;">Блок 1</div>
<div class="col-md-4" style="background-color:#ccff99;">Блок 2</div>
<div class="col-md-4" style="background-color:#ff99cc;">Блок 3</div>
</div>
</div>При изменении размера экрана, блоки будут автоматически подстраиваться: на больших экранах они будут располагаться в ряд, а на маленьких — переходить на следующую строку.
container vs container-fluid
Если убрать класс container-fluid и оставить только container, блоки будут иметь фиксированную ширину и отступы слева и справа. Они также будут подстраиваться под размер экрана, но не будут занимать всю его ширину.
Система сеток Bootstrap позволяет создавать адаптивные макеты с минимальным количеством кода. Несколько классов позволяют создавать сложные структуры, которые хорошо выглядят на любых устройствах.