# Bootstrap 5 # Разметка # Минимальный шаблон ```html Minimal HTML5 page ``` # Контейнеры **Общая информация** - необходимы при использовании сеточной системы - используются для содержания, заполнения и (иногда) центрирования содержимого - могут быть вложенными, но для большинства макетов это не требуется. **Контрольные точки**
Extra small <576px
Small-sm≥576px
Medium-md≥768px
Large-lg≥992px
Extra large-xl≥1200px
Extra Extra large-xxl≥1400px
**Типы контейнеров** - .container - адаптивный контейнер фиксированной ширины. При изменении размеров браузера его ширина изменяется до новой ширины контрольной точки. При extra small выставляется 100% ширины. - .container-{breakpoint}, который равен width: 100% до указанной контрольной точки - .container-fluid, который равен width: 100% во всех контрольных точках
<576px≥576px≥768px≥992px≥1200px≥1400px
.container100%540px720px960px1140px1320px
.container-sm100%540px720px960px1140px1320px
.container-md100%100%720px960px1140px1320px
.container-lg100%100%100%960px1140px1320px
.container-xl100%100%100%100%1140px1320px
.container-xxl100%100%100%100%100%1320px
.container-fluid100%100%100%100%100%100%
# Сетки - Сетка внутри контейнера, относительно ширины которого рассчитываются размеры колонок. - Для строки - класс row, для столбца - класс col. - По документации в строке может быть до 12 ячеек, но если их больше, и текст внутри короткий - визуально в строку помещается больше столбцов. - Визуально внутри row может быть несколько строк при превышении 12. - Одна строка всегда находится под другой. **Минимальный пример сетки:** ```html
Колонка
Колонка
Колонка
``` - Модификаторы относительно размера окна, контрольные точки аналогичные контрольным точкам для сетки. - Для контрольной точки может быть дополнительный параметр - кол-во занимаемых ячеек. Например col-md-6. - Поведение: до размера окна, указанного в контрольной точке ширина 12, после - в соответствии с цифрой. Но за счет комбинации классов можно сделать, чтобы например на большом было 4 столбца один за одним, меньше - 2 и 2, еще меньше - 1,1,1,1 ```html
one
two
three
four
``` - Вместо цифры может быть -auto в этом случае ширина зависит от контента - Может быть без контрольной точки ```html
col-8
col-4
``` - Может быть без доп. параметра, но тогда должен быть предшествующий с полным набором параметров ```html
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
``` - В этом случае берется предыдущее распределение и применяется к неуказанному За счет применения класса row-cols-\* у div row фиксируется визуальное количество столбцов в одной строке (по-моему это повтор функционала). Хотя поведение данного класса несколько неясно: для такой настройки ```html
Колонка
Колонка
Колонка
Колонка
``` последняя колонка будет визуально на следующей строке, что странно. Установленное количество строк фиксируется для всех размеров. Однако реальное назначение данного функционал несколько непонятно. Строки могут быть вложенными. # Колонки **Вертикальное выравнивание** **Единый класс для строки** Единый класс для строки с фиксированной высотой строки настраивается общее выравнивание
align-items-startвверху
align-items-centerпосередине
align-items-endснизу
Например, устанавливается высота в 100px и выравнивание посередине для всех колонок ```html
col-sm-8
col-sm-4
``` **Индивидуальное выравнивание каждого столбца** Класс align-self-\* который применяется для класса столбца ```html
col-sm-8
col-sm-4
``` **Горизонтальное выравнивание** justify-content-\* для выравнивания всех столбцов в классе row
justify-content-startКолонки смещены в начало, между колонками нет промежутка
justify-content-centerКолонки в центре, между колонками нет промежутка
justify-content-endКолонки смещены в конец, между колонками нет промежутка
justify-content-aroundПоследующие три класса с промежутками (считая промежуток как колонку) и выравниванием относительно этого. +/- для использования.
justify-content-between
justify-content-evenly
**Порядок отображения** Классы order- , поддерживают контрольные точки. Элементы без порядка имеют приоритет выше. ```html
Первый в DOM, первый в отображении
Второй в DOM, последний в отображении
Третий в DOM, третий в отображении
Последний в DOM, второй в отображении
``` Однако классы order-first и order-last имеют наивысший приоритет. **Смещение колонок** Классы offset-контр\_точка-\* смещают колонку влево на указанную ширину. ```html
.col-md-4
.col-md-4 .offset-md-4
``` Класс offset-контр\_точка-0 сбрасывает смещение в контрольной точке. **Автономное использование колонок** Классы `.col-*` также могут использоваться вне `.row`, чтобы дать элементу определенную ширину. Когда классы колонок используются как непрямые дочерние элементы строки, отступы опускаются. Могут использоваться контрольные точки. ```html
.col-3: ширина 25%
.col-sm-9: ширина 75% выше контрольной точки sm
``` Плавающее изображение ```html
...

Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса clearfix. Мы добавляем здесь довольно много бессмысленных фраз, чтобы продемонстрировать, как столбцы здесь взаимодействуют с плавающим изображением.

Как видите, абзацы изящно обтекают плавающее изображение. А теперь представьте, как это будет выглядеть с фактическим содержанием здесь, а не просто с этим скучным текстом-заполнителем, который продолжается и продолжается, но на самом деле не передает никакой осязаемой информации. Он просто занимает место, и его не стоит читать.

И тем не менее, здесь вы, по-прежнему настойчив в чтении этот текст-заполнитель, в надежде еще несколько прозрений, или некоторые скрытые пасхальные яйца содержания. Возможно, шутка. К сожалению, здесь ничего этого нет.

``` # Утилиты (доп. классы) # Интервалы **Поля и отступы** Устанавливает margin (внешние границы) или padding (внутренние границы) элементу по умолчанию в диапазоне от .25rem до 3rem. **Форматы классов:** - xs: {property}{sides}-{size} - sm, md, lg, xl и xxl {property}{sides}-{breakpoint}-{size} **Значения составляющих:** property - m - для классов, которые устанавливают margin - p - для классов, которые устанавливают padding sides - t - margin-top или padding-top - b - margin-bottom или padding-bottom - s - margin-left или padding-left в LTR, margin-right или padding-right в RTL - e - margin-right или padding-right в LTR, margin-left или padding-left в RTL - x - \*-left и \*-right - y - \*-top и \*-bottom - blank - margin или padding со всех 4 сторон элемента size - 0 - устраняет margin или padding, установив его на 0 - 1 - margin или padding = $spacer \* .25 - 2 - margin или padding = $spacer \* .5 - 3 - margin или padding = $spacer - 4 - margin или padding = $spacer \* 1.5 - 5 - margin или padding = $spacer \* 3 - auto - margin = авто **Пример:** ```html .mt-0 { margin-top: 0 !important; } .ms-1 { margin-left: ($spacer * .25) !important; } .px-2 { padding-left: ($spacer * .5) !important; padding-right: ($spacer * .5) !important; } .p-3 { padding: $spacer !important; } ``` **Отрицательные отступы** Margin могут использовать отрицательные значения (padding не может). Эти отрицательные поля отключены по умолчанию, но могут быть включены в Sass, установив $enable-negative-margins: true. Синтаксис почти такой же, как у утилит с положительным значением поля по умолчанию, но с добавлением n перед запрошенным размером. **Пример** Класс, противоположный .mt-1: ```html .mt-n1 { margin-top: -0.25rem !important; } ```