Bootstrap подвесная система
Bootstrap's подвесная система позволяет использовать до 12 столбцов по всей странице.
Если вы не хотите использовать все 12 колонки по отдельности, можно сгруппировать столбцы вместе, чтобы создать более широкие столбцы:
| пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 | пролет 1 |
| пролет 4 | пролет 4 | пролет 4 | |||||||||
| пролет 4 | пролет 8 | ||||||||||
| пролет 6 | пролет 6 | ||||||||||
| пролет 12 | |||||||||||
Bootstrap's подвесная система реагирует, а столбцы будут перестраивать в зависимости от размера экрана: На большом экране это может выглядеть лучше с содержанием организованной в трех колонках, но на маленьком экране , было бы лучше , если бы были сложены элементы контента на верхней части друг друга.
Совет: Помните , что столбцы сетки должны добавить до двенадцати для ряда. Более того, столбцы будут складываться независимо от viewport .
Сетка Классы
Bootstrap подвесная система имеет четыре класса:
- xs (для телефонов)
- sm (для таблеток)
- md (для настольных компьютеров)
- lg (для больших рабочих столов)
Классы выше, могут быть объединены для создания более динамичных и гибких макетов.
Совет: Каждый класс масштабируется, так что если вы хотите установить те же ширины для xs и sm , вам нужно всего лишь указать xs .
Подвесная система Правила
Некоторые Bootstrap системные правила сетки:
- Ряды должны быть размещены в пределах
.container(фиксированной ширины) или.container-fluid(полной ширины) для правильного выравнивания и заполнения - Использование строк, чтобы создать горизонтальные группы столбцов
- Контент должен быть размещен внутри колонны, и только столбцы могут быть непосредственными потомками строк
- Предварительно определенные классы , как
.rowи.col-sm-4доступны для быстрого создания макетов сетки - Столбцы создают желобов (пробелы между содержанием столбца) через дополнения. Это заполнение смещение в строках для первого и последнего столбца с помощью отрицательной маржи на
.rows - Столбцы сетки создаются с указанием количества 12 доступных столбцов вы хотите охватить. Например, три равные колонки будет использовать три
.col-sm-4
Основная структура Bootstrap сетки
Ниже приводится базовая структура Bootstrap сетки:
<div class="container">
<div
class="row">
<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 для каждой строки.
параметры сетки
В следующей таблице приведены как Bootstrap подвесная система работает на нескольких устройствах:
| Extra small devices Phones (<768px) |
Small devices Tablets (>=768px) |
Medium devices Desktops (>=992px) |
Large devices Desktops (>=1200px) |
|
|---|---|---|---|---|
| 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 |
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Number 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 |
Примеры
В следующих главах приведены примеры грид-систем для различных устройств: