система сетки Bootstrap
Система сетки Bootstrap
Система сетки Bootstrap позволяет до 12 столбцов по всей странице.
Если вы не хотите использовать все 12 столбцов по отдельности, можно сгруппировать столбцы вместе, чтобы создать более широкие столбцы:
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
Система сетки Bootstrap реагирует, и столбцы будут переупорядочены в зависимости от размера экрана: на большом экране он может выглядеть лучше с содержанием организованы в трех колонках, но на маленьком экране было бы лучше, если содержание элементов были сложены на вершине e другие.
Совет: Помните, что столбцы сетки должны добавлять до двенадцати строк. Более того, столбцы будут складываться независимо от видового экрана.
Классы сетки
Система Grid Bootstrap имеет четыре класса:
xs(для телефонов-экранов менее 768px широкий)sm(для планшетов-экранов, равных или больше, чем 768px широкий)md(для небольших ноутбуков-экранов, равных или больше, чем 992пкс широкий)lg(для ноутбуков и настольных компьютеров-экраны, равные или превышающие 1200px ширину)
Приведенные выше классы можно комбинировать для создания более динамичных и гибких макетов.
Совет: Каждый класс масштабируется вверх, так что если вы хотите установить одинаковую ширину для XS и SM, вам нужно только указать XS.
Системные правила сетки
Некоторые правила системной сетки Bootstrap:
- Строки должны быть размещены в пределах
.container(фиксированной ширины) или.container-fluid(полная ширина) для правильного выравнивания и заполнения - Использование строк для создания горизонтальных групп столбцов
- Содержимое должно быть помещено в столбцы, и только столбцы могут быть непосредственными потомками строк
- Предопределенные классы
.row, как и.col-sm-4доступны для быстрого создания макетов сетки - Столбцы создают водосточные желоба (промежутки между содержимым столбцов) с помощью заполнения. Это заполнение смещение в строках для первого и последнего столбца с помощью отрицательного поля на
.rows - Столбцы сетки создаются путем указания числа 12 доступных столбцов, которые необходимо охватить. Например, три равных столбца будут использовать три
.col-sm-4 - Ширина столбцов в процентах, поэтому они всегда являются жидкими и имеют размер относительно родительского элемента
Базовая структура загрузочной сетки
Ниже приведена базовая структура сетки Bootstrap:
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
</div>
Таким образом, чтобы создать макет, необходимо создать контейнер ( <div
class="container"> ). Затем создайте строку ( <div
class="row"> ). Затем добавьте нужное количество столбцов (тегов с соответствующими .col-*-* классами). Обратите внимание, что числа в .col-*-* должны всегда добавлять до 12 для каждой строки.
Параметры сетки
В следующей таблице приведены сводные сведения о том, как система Grid Bootstrap работает на нескольких устройствах.
| Extra small <768px |
Small >=768px |
Medium >=992px |
Large >=1200px |
|
|---|---|---|---|---|
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| # of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
Примеры
В следующих главах показаны примеры систем Grid для различных устройств:
