8.4 KiB
| title | localeTitle |
|---|---|
| Grid System | Сетевая система |
Сетевая система
В кратце: система сеток Bootstrap помогает создавать гибкие макеты. Она состоит из системы строк и столбцов, которая помогает вам структурировать ваш контент.
Строки представляют собой горизонтальные группы столбцов с максимум 12 столбцами на строку. Внутри каждой строки содержимое помещается внутри столбцов и может занимать от 1 до 12 столбцов.
Bootstrap имеет пять различных типов ячеек сетки, а именно Extra small, Small, Medium, Large и Extra large, для каждой из этих уровней сетки существует точка останова.
Bootstrap использует пиксели для определения контрольных точек уровня сетки, различные ширины видового экрана, которые действуют как точки останова для ячеек сетки:
Как это устроено
Контейнер
Контейнер - это самый внешний элемент, который будет содержать вашу сетку, использовать container для container с фиксированной шириной в середине экрана (дополнительный край на больших экранах) или container-fluid для полной ширины.
<div class="container"></div>
Ряд
Используйте row для группировки столбцов, это будет держать все в строгом порядке и помогать вам структурировать вашу сетку.
<div class="row"></div>
Колонки
Классы столбцов указывают количество столбцов, которые вы хотели бы использовать из возможных 12 в строке. Например, col-sm-6 будет означать, что ваш столбец будет использовать половину ширины row на маленьком экране, а col-lg-4 будет использовать треть на большом экране.
Вот как вы бы определили префикс класса, чтобы использовать ширину одного столбца для различных размеров экрана:
- Extra Small
col-1 - Маленький
col-sm-1 - Средний
col-md-1 - Большой
col-lg-1 - Extra Large
col-xl-1
<div class="col-sm-1"></div>
пример
Полноразмерная сетка с четырьмя столбцами, каждая из которых занимает полную строку на xs-экранах, половину строки на экранах sm и md и четверть ширины строки на больших и очень больших экранах.
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-6 col-lg-4">First Column</div>
<div class="col-12 col-sm-6 col-lg-4">Second Column</div>
<div class="col-12 col-sm-6 col-lg-4">Third Column</div>
<div class="col-12 col-sm-6 col-lg-4">Forth Column</div>
</div>
</div>
Обратите внимание, что col-md и col-xl не определены, когда размер не определен, он будет по умолчанию до следующего меньшего размера, который был указан.
Bootstrap предоставляет готовую 12-ти колонную сетку для использования в макетах. Рассмотрим следующий код.
<div class="container">
<div class="row">
<div class="col-md-6">Content</div>
<div class="col-md-6">Content</div>
<div>
</div>
где:
- col = column
- md = screen size
- 6 = column width
Как сетка с 12 столбцами, все ширины столбцов сетки, заданные пользователем, должны содержать до 12 столбцов.
Значения размера экрана могут быть назначены следующим образом:
-
xs - <768px Телефоны
-
см - <992px Таблетки
-
md - <1200px Ноутбуки
-
lg -> 1200px Настольные компьютеры
Bootstrap использует понятие "mobile first" и является отзывчивым(адаптивным).
Понятие "mobile first" означает, что макет сетки будет автоматически реагировать на меньшие экраны. Затем HTML определяет макет сетки для больших экранов.
Следующий код и изображение показывают, что возможно, при использовании разных ширин столбцов.
<div class="container">
<div class="row">
<div class="example col-md-6">Content</div>
<div class="example col-md-6">Content</div>
<div>
</div>
<div class="container">
<div class="row">
<div class="example col-md-4">Content</div>
<div class="example col-md-4">Content</div>
<div class="example col-md-4">Content</div>
<div>
</div>
<div class="container">
<div class="row">
<div class="example col-md-3">Content</div>
<div class="example col-md-3">Content</div>
<div class="example col-md-3">Content</div>
<div class="example col-md-3">Content</div>
<div>
</div>
<div class="container">
<div class="row">
<div class="example col-md-2">Content</div>
<div class="example col-md-2">Content</div>
<div class="example col-md-2">Content</div>
<div class="example col-md-2">Content</div>
<div class="example col-md-2">Content</div>
<div class="example col-md-2">Content</div>
<div>
</div>
<div class="container">
<div class="row">
<div class="example col-md-1">Content</div>
<div class="example col-md-1">Content</div>
<div class="example col-md-1">Content</div>
<div class="example col-md-1">Content</div>
<div class="example col-md-1">Content</div>
<div class="example col-md-1">Content</div>
<div class="example col-md-1">Content</div>
<div class="example col-md-1">Content</div>
<div class="example col-md-1">Content</div>
<div class="example col-md-1">Content</div>
<div class="example col-md-1">Content</div>
<div class="example col-md-1">Content</div>
</div>
</div>
Дополнительная информация:
Bootstrap Docs - Сетевая система
Это руководство основано на Bootstrap v4 (он будет работать с v3, за исключением того, что дополнительные маленькие экраны определяются как xs и нет размера xl )
- Экстра большой: ширина видового экрана> = 1200 пикселей
- Large: ширина видового экрана> = 992px
- Средний: ширина видового экрана> = 768 пикселей
- Малый: ширина видового экрана> = 576 пикселей
- Экстра маленький: ширина видового экрана ниже 576 пикселей