Приклади сіток Bootstrap

Основні макети сітки, щоб ви ознайомилися з побудовою в системі сітки Bootstrap.

Три рівні стовпчики

Отримайте три стовпці однакової ширини, починаючи з робочих столів і масштабуючи їх до великих робочих столів . На мобільних пристроях, планшетах і нижче стовпці складатимуться автоматично.

.col-md-4
.col-md-4
.col-md-4

Три нерівних стовпчика

Отримайте три стовпці , починаючи від робочих столів і масштабуючи їх до великих робочих столів різної ширини. Пам’ятайте, що кількість стовпців сітки для одного горизонтального блоку має становити до дванадцяти. Більше того, стовпці починають складатися незалежно від вікна перегляду.

.col-md-3
.col-md-6
.col-md-3

Дві колонки

Отримайте два стовпці , починаючи з робочих столів і масштабуючи їх до великих робочих столів .

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

Повна ширина, одна колонка

Для елементів повної ширини класи сітки не потрібні.

Два стовпці з двома вкладеними стовпцями

Згідно з документацією, вкладення є простим — просто помістіть рядок стовпців у наявний стовпець. Це дає вам два стовпці, починаючи з настільних комп’ютерів і масштабуючи їх до великих робочих столів , а ще два (рівної ширини) знаходяться в більшому стовпці.

На мобільних пристроях, планшетах і нижче, ці стовпці та їх вкладені стовпці складатимуться.

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

Змішаний: мобільний і настільний

Сітка системи Bootstrap 3 має чотири рівні класів: xs (телефони), sm (планшети), md (настільні комп’ютери) і lg (більші настільні комп’ютери). Ви можете використовувати майже будь-яку комбінацію цих класів для створення більш динамічних і гнучких макетів.

Кожен рівень класів масштабується, тобто якщо ви плануєте встановити однакову ширину для xs і sm, вам потрібно лише вказати xs.

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

Змішаний: мобільний, планшетний і комп’ютерний

.col-xs-12 .col-sm-6 .col-lg-8
.col-xs-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Очищення колони

Очистіть плаваючі елементи в певних точках зупинки, щоб запобігти незручному обгортанню з нерівномірним вмістом.

.col-xs-6 .col-sm-3
Змініть розмір вікна перегляду або перегляньте його на телефоні для прикладу.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Зміщення, натискання та скидання

Скидання зсувів, натискань і витягувань у певних точках зупинки.

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