Информер / Увлечения / Вебмастеру

Система разметки (grid system) Bootstrap 4, - Дмитрий Лео

09:48 -- 22.05.2017

Bootstrap включает в себя адаптивную, первую мобильную резиновую систему разметки, которая масштабируется до 12 столбцов как на устройствах или при изменении окна просмотра. Опубликовано на веб-портале imbf.org

Функционал разметки

Посмотрите, как аспекты системы рзметки Bootstrap работают между несколькими устройствами с управляемой таблицей.

  Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Grid behavior (Поведение сетки) Горизонтально в любое время Свернулось, чтобы начать, горизонтально над точками останова
Максимальная ширина контейнера Нет (auto) 540px 720px 960px 1140px
Class prefix (Префикс класса) .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns (колонок) 12
Gutter width (Ширина переплета) 30px (15px на каждой стороне колонны)
Nestable (Вкладываемые) Да
Offsets (Смещения) Да
Порядок столбцов Да

Контейнеры

Сетка должна располагаться внутри контейнера .container (ширина 1170px) или .container-fluid (растягивается на всю ширину экрана).

Строки

Колонки .col- должны располагаться внутри строк .row. Только колонки могут быть непосредственными потомками строк.

Отступы

У колонок .col- есть отступы. Отступы крайних колонок компенсируются отрицательным margin строки .row.

Больше 12 колонок в ряд?

Если расположить больше 12 колонок в ряд, то колонки будут перемещаться на следующий ряд. Это значит, что если вы расположите, например, .col-md-10 и .col-md-3 в один ряд .row, то .col-md-3 переместится в следующий ряд.

Адаптивная верстка

Для создания адаптивной верстки используйте несколько классов, например, class=«col-sm-10 col-md-6».

Равная ширина

Например, два макета сетки применимы к каждому устройству и окну просмотра, начиная с xs до xl.

.col (1 of 2)
.col (1 of 2)
.col (1 of 3)
.col (1 of 3)
.col (1 of 3)

Установка ширины одного столбца

Автомакет для flexbox столбцов также означает, что вы можете установить ширину одного столбца, а остальные автоматически изменят его размер. Вы можете использовать предопределенные классы сетки (как показано ниже), grid mixins или inline widths. Обратите внимание, что остальные столбцы будут изменять размер независимо от ширины центрального столбца.

.col (1 of 3)
.col-6 (2 of 3) - шире
.col (3 of 3)
.col (1 of 3)
.col-5 (2 of 3) - шире
.col (3 of 3)

Переменная ширина содержимого

Используя классы col-{breakpoint}-auto, столбцы могут сами определять размер, основываясь на естественной ширине его содержимого. Это очень удобно с однострочным содержимым, например входами, числами и т. д. Это, в сочетании с горизонтальными классами выравнивания, очень полезно для центрирования макетов с неравномерными размерами столбцов при изменении ширины видового экрана..

.col .col-lg-2 (1 of 3)
.col-12 .col-md-auto (Переменная ширина содержимого)
.col .col-lg-2 (3 of 3)
.col (1 of 3)
.col-12 .col-md-auto (Переменная ширина содержимого)
.col .col-lg-2 (3 of 3)

Равная ширина многорядные

Создайте столбцы равной ширины, которые охватывают несколько строк, вставив .w-100, где вы хотите, чтобы столбцы разбивались на новую строку. Сделайте перерывы реагирующими, смешивая .w-100 с некоторыми отзывчивыми утилитами дисплея.

.col
.col
 
.col
.col

Все контрольные точки

Для сеток, которые являются одинаковыми от самых маленьких устройств до самых больших, используйте .col и .col-* классы. Укажите нумерованный класс, если вам нужен столбец определенного размера; В противном случае, не стесняйтесь придерживаться .col.

.col
.col
.col
.col
.col-8
.col-4

Складывается по горизонтали

Используя один набор .col-sm-* классов, вы можете создать базовую систему сетки, которая начнет группироваться на дополнительные небольшие устройства, прежде чем станет горизонтальной на настольных (средних) устройствах.

.col-sm-8
.col-sm-4
.col-sm
.col-sm
.col-sm

Смешивание и совмещение

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

.col .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

Без отступов

Отступы между столбцами в наших предопределенных классах сетки можно удалить с помощью .no-gutters. Это удаляет отрицательные поля margin из .row и горизонтального padding из всех непосредственных дочерних столбцов..

.col-12 .col-sm-6 .col-md-8
.col-6 .col-md-4

Оболочка столбца

Если в одной строке помещено более 12 столбцов, каждая группа дополнительных столбцов, как одна единица, будет обернута в новую строку.

.col-9
.col-4
.col-6

Сброс столбцов

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

.col-6 .col-sm-3
.col-6 .col-sm-3
 
.col-6 .col-sm-3
.col-6 .col-sm-3

В дополнение к очистке столбцов в ответных точках останова вам может потребоваться сброс смещений, нажатий или вытягиваний. Посмотрите это в действии в примере с сеткой.

.col-sm-5 .col-md-6
.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
.col.col-sm-6.col-md-5.col-lg-6
.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

Flex порядок

Используйте утилиты flexbox для управления визуальным порядком вашего контента.

.col .flex-unordered (первый, но неупорядоченный)
.col .flex-last (второй, но последний)
.col .flex-first (третий, но первый)

Смещение столбцов

Перемещение столбцов вправо с помощью .offset-md-* классов. Эти классы увеличивают левое поле столбца на * столбцов. Например, .offset-md-4 сдвигает .col-md-4 над четырьмя колоннами.

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3

Нажатие и толкание

Простое изменение порядка встроенных столбцов сетки с помощью .push-md-* и .pull-md-* модификаторов классов.

.col-md-9 .push-md-3
.col-md-3 .pull-md-9

Вложенность

Чтобы вставить свой контент в сетку по умолчанию, добавьте новую .row и набор колонок .col-sm-* в существующем .col-sm-* столбце. Вложенные строки должны включать в себя набор столбцов, которые добавляют до 12 или менее (не обязательно использовать все 12 доступных столбцов).

Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6

Больше

Перевод с английского Дмитрий Лео

Популярное на сайте

Как прожить 120 лет здоровым и красивым

Как прожить 120 лет здоровым и красивым

Книга Дмитрия Лео благодаря которой тысячи людей обрели здоровье. Издание II (2019)

Академия здоровья

Мы не болеем и обучаем этому других.

Популярное сейчас

Наверх