Главная » Статьи » Система сеток Bootstrap 4 — примеры создания

Система сеток Bootstrap 4 — примеры создания

Система сеток Bootstrap 4 - примеры создания

От автора: система сеток Bootstrap 4 позволяет создавать сложные макеты с использованием строк и столбцов. Сетка Bootstrap может содержать до 12 столбцов, и вы можете указать, как эти столбцы будут масштабироваться для разных размеров области просмотра.

Вот пример сетки Bootstrap:

<!-- Styles (so that we can see the grid) -->
<style>
.bs-example div[class^="col"] { border: 1px solid white; background: #f5f5f5; text-align: center; padding-top: 8px; padding-bottom: 8px; }
</style> <div class="bs-example"> <!-- Bootstrap Grid --> <div class="row"> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> <div class="col-sm-1">.col-sm-1</div> </div> <div class="row"> <div class="col-sm-2">.col-sm-2</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-7">.col-sm-7</div> </div> <div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-4">.col-sm-4</div> </div> <div class="row"> <div class="col-sm-5">.col-sm-5</div> <div class="col-sm-7">.col-sm-7</div> </div> <div class="row"> <div class="col-sm-6">.col-sm-6</div> <div class="col-sm-6">.col-sm-6</div> </div> <div class="row"> <div class="col-sm-12">.col-sm-12</div> </div> </div>

Числа в конце каждого имени класса представляют количество столбцов, которые охватывают столбец. Таким образом, .col-sm-1охватывает один столбец и .col-sm-8 охватывает восемь. sm означает, что объединенные столбцы применяются к малым устройствам, и всем большим. Вы также можете использовать md, lg и xl для средних, больших и очень больших устройств.

Для сверхмалых устройств предусмотрен пропуск средней аббревиатуры. Например .col-8 охватывает восемь столбцов на очень маленьких устройствах и выше (другими словами, на всех устройствах).

Стекирование по горизонтали

В следующем примере используется та же самая разметка, но на этот раз мы используем md «средний». Это означает, что, если область просмотра меньше, чем «средняя» (то есть менее 768 пикселей), ячейки в сетке будут располагаться друг над другом, и каждая ячейка будет занимать всю ширину.

Если вы просматриваете это на широком экране, этот пример может не отличаться от предыдущего. Однако, если вы уменьшите размер окна браузера, ячейки в конечном итоге реорганизуются в стек (и предыдущий пример останется без изменений).

Размеры сетки

В следующей таблице показано, как разные параметры сетки работают с разными размерами области просмотра.

Обратите внимание, что с введением версии 4 Bootstrap теперь использует 5-уровневую систему сетки (в отличие от 4-уровневой системы сетки в Bootstrap 3).

Вещи, которые нужно помнить

Контейнеры

Сетки должны быть помещены в контейнер (т. е. использовать класс .container или класс .container-fluid) для правильного заполнения и выравнивания.

Строки и столбцы

Строки содержат один или несколько столбцов. Столбцы содержат контент. Только столбцы могут быть непосредственными потомками строк.

Поля

Столбцы содержат поля. Однако заполнение первого и последнего столбцов смещено отрицательным полем в строке. Вот почему вышеприведенные примеры устарели — так что контент внутри сетки совпадает с контентом вне сетки.

Более 12 столбцов на строку?

Если в строке размещено более 12 столбцов, столбцы будут перенесены на новую строку. То есть столбцы будут перенесены как группа. Так, например, если строка содержит col-md-10 и col-md-3, весь col-md-3 будет перенесен на новую строку.

Менее 12 столбцов на строку?

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

Классы сетки

Классы сетки применяются к устройствам с шириной экрана, превышающей или равной размерам контрольных точек, и переопределяют классы сетки, предназначенные для меньших устройств. Таким образом, использование любого класса .col-sm-* повлияет не только на маленькие области просмотра, но также на средние, большие и очень большие (кроме случаев, когда присутствует col-md-* и / или col-lg-* / col-xl-*).

Несколько классов

Вы можете использовать несколько классов размеров для данного элемента. Например, вы можете использовать class=»col-sm-10 col-md-6″ для указания 10 столбцов для маленьких экранов и 6 столбцов для средних и больших экранов.

Источник: https://www.quackit.com/

Редакция: Команда webformyself.