Сеточная система Bootstrap

Сеточная система Bootstrap

Система сетки Bootstrap позволяет использовать до 12 столбцов на странице.

Если вы не хотите использовать все 12 столбцов по отдельности, вы можете сгруппировать столбцы вместе, чтобы создать более широкие столбцы:

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

Классы сетки

Сеточная система Bootstrap имеет четыре класса:

• xs (для телефонов - экраны шириной менее 768px)
• sm (для планшетов — экраны шириной не менее 768 пикселей)
• md (для небольших ноутбуков — экраны, равные или превышающие ширину 992 пикселей)
• lg (для ноутбуков и настольных компьютеров — экраны шириной не менее 1200 пикселей)

Приведенные выше классы можно комбинировать для создания более динамичных и гибких макетов.

Совет: Каждый класс масштабируется, поэтому, если вы хотите установить одинаковую ширину для xs и sm, вам нужно указать только xs. 

Правила системы сетки

Некоторые правила сетки Bootstrap:

• Строки должны быть размещены в пределах .container(фиксированной ширины) или .container-fluid(полной ширины) для правильного выравнивания и заполнения.
• Используйте строки для создания горизонтальных групп столбцов
• Содержимое должно быть размещено внутри столбцов, и только столбцы могут быть непосредственными дочерними элементами строк.
• Предопределенные классы, такие как .row и .col-sm-4доступны для быстрого создания макетов сетки
• Столбцы создают желоба (промежутки между содержимым столбцов) с помощью отступов. Это заполнение смещено в строках для первого и последнего столбца через отрицательное поле на.rows
• Столбцы сетки создаются путем указания 12 доступных столбцов, которые вы хотите охватить. Например, три одинаковых столбца будут использовать три.col-sm-4
• Ширина столбцов указана в процентах, поэтому они всегда изменчивы и имеют размер относительно своего родительского элемента.

Базовая структура Bootstrap Grid

Ниже приведена базовая структура сетки Bootstrap:

Итак, чтобы создать нужный макет, создайте контейнер ( <div class="container">). Затем создайте строку ( <div class="row">). Затем добавьте нужное количество столбцов (тегов с соответствующими .col-*-*классами). Обратите внимание, что числа .col-*-*всегда должны составлять до 12 для каждой строки.

Параметры сетки

В следующей таблице показано, как система сетки Bootstrap работает на нескольких устройствах:

Примеры

В следующих главах показаны примеры грид-систем для различных устройств:

• Сложенные по горизонтали
• Маленькие устройства
• Средние устройства
• Большие устройства
• Еще примеры сетки