Варианты построения сетки bootstrap 4

Адаптивная разметка без полей

Внутренние поля () адаптивных блоков и внешние отрицательные отступы () рядов можно убрать, если к последним (т.е. к ) добавить класс .

<div class="row no-gutters">
    <div class="col-6">
      <!-- На этот блок row и на его адаптивные блоки это свойство уже не распространится -->
      <div class="row">
        <div class=col-8>...</div>
        <div class=col-4>...</div>
      </div>
    </div>
    <div class="col-6">...</div>
</div>

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

на адаптивные блоки, которые не имеют в качестве родителя данный ряд, CSS свойства по убиранию не распространятся.

Расположение адаптивных блоков в ряду

Адаптивные блоки в ряду по умолчанию располагаются горизонтальными линиями. В пределах горизонтальной линии адаптивные блоки выстраиваются последовательно слева направо. В одну горизонтальную линию могут поместиться адаптивные блоки с суммарным числом колонок не более 12. Адаптивные блоки, которые не помещаются в текущую линию переходят на следующую.

<div class="container">
  <div class="row">
    <div class="col-6"> (1) </div>
    <div class="col-6"> (2) </div>
    <div class="col-12"> (3) </div>
    <div class="col-8"> (4) </div>
  </div>
</div>

Рассмотрим ещё один пример, в котором адаптивные блоки имеют различную ширину на различных контрольных точках:

<div class="row">
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <!-- Этот адаптивный блок перенесётся на новую линию на xs-->
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <!-- Этот адаптивный блок перенесётся на новую линию на sm-->
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <!-- Этот адаптивный блок перенесётся на новую линию на xs и md-->
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
    <!-- Этот адаптивный блок перенесётся на новую линию на xs, sm и lg-->
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1"></div>
</div>

Автоматическое расположение с помощью колонок

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

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

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

1 из 2

2 из 2

1 из 3

2 из 3

3 из 3

Мультиряд одинаковой ширины

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

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

Столбец
Столбец

Столбец
Столбец

Установка ширины одной колонки

Авто-расположение колонок в сетке флексбокса также дает возможность установить ширину одной колонки, при этом остальные родственные колонки автоматически изменят свой размер вокруг нее. Вы можете использовать предустановленные классы сеток (как показано внизу), миксины или инлайн-ширину. Заметим, что другие колонки будут изменять размер независимо от ширины центральной колонки.

1 из 3

2 из 3 (широкая)

3 из 3

1 из 3

2 из 3 (широкая)

3 из 3

Содержимое адаптивной ширины

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

1 из 3

Содержимое адаптивной ширины

3 из 3

1 из 3

Содержимое адаптивной ширины

3 из 3

Пример

Система сеток Bootstrap использует серию контейнеров, строк и колонок для компоновки и выравнивания содержимого. Он построен с помощью flexbox и полностью адаптивен. Ниже приведен пример и подробное объяснение того, как объединяется сетка.

Новичок или незнаком с flexbox? для получения справочной информации, терминологии, рекомендаций и фрагментов кода.

Колонка

Колонка

Колонка

В приведенном выше примере создаются три колонки одинаковой ширины на всех устройствах и в окнах просмотра с использованием наших предопределенных классов сетки. Эти колонки центрируются на странице с родительским .

Выравнивание

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

Вертикальное выравнивание

Одна из трех колонок

Одна из трех колонок

Одна из трех колонок

Одна из трех колонок

Одна из трех колонок

Одна из трех колонок

Одна из трех колонок

Одна из трех колонок

Одна из трех колонок

Одна из трех колонок

Одна из трех колонок

Одна из трех колонок

Горизонтальное выравнивание

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Обертывание колонок

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

.col-9
.col-4Поскольку 9 + 4 = 13 > 12, этот div шириной в 4 колонки переносится на новую строку как один непрерывный блок.
.col-6Последующие колонки продолжаются вдоль новой строки.

Разрывы колонок

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

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

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

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

.col-6 .col-sm-4
.col-6 .col-sm-4

.col-6 .col-sm-4
.col-6 .col-sm-4

Что такое Bootstrap

Бутстрап — это фреймворк для создания сайтов. У него много полезных возможностей: показывать всплывающие окна, выводить кнопки и ошибки, рисовать выпадающие меню и многое другое. В обычной жизни на программирование всей этой красоты могли бы уйти часы, в Бутстрапе это уже реализовано.  

Самое полезное для нас сейчас — адаптивная многоколоночная вёрстка Бутстрапа. Что она нам даёт: 

• Можно красиво сверстать сайт, чтобы слева было меню, по центру основная колонка, справа ещё поле для рекламы. Или сделать сайт из трёх, четырёх, шести колонок — как Pinterest. 
• Можно научить колонки сайта скрываться или менять размер в зависимости от размера экрана. Например, на большом экране выводить боковые колонки, а на маленьком — нет. 
• Можно не особо думать о шрифтах, размерах и отступах: даже стандартная настройка Бутстрапа уже работает довольно неплохо. 
• Не нужно думать, как всё это будет вести себя на мобильных устройствах, — всё адаптируется само.

Порядок элементов

5.1 Классы порядка элементов

Можно использовать специальные классы с префиксом «.order-» для определения порядка элементов. Если вы знакомы с Flex-версткой, данные правила будут вам знакомы. Bootstrap 4 дает возможность задавать порядок элементов с помощью классов. Можно задавать порядок напрямую (.order-1.order-md-2):

<div class="row">
	<div class="col">Первый неупорядоченный элемент</div>
	<div class="col order-12">Второй, упорядоченный как последний</div>
	<div class="col order-1">Третий, упорядоченный как первый</div>
</div>

Или можно использовать специальные классы, которые определяют порядок первого и последнего элементов (.order-first, .order-last):

<div class="row">
	<div class="col">Первый неупорядоченный</div>
	<div class="col order-last">Второй, упорядоченный как последний</div>
	<div class="col order-first">Третий, упорядоченный как первый</div>
</div>

5.2 Смещение колонок

По аналогии с Bootstrap 3, в 4-й версии также есть возможность горизонтального смещения колонок, однако реализовано это несколько иначе и для этого есть специальные классы с префиксом «.offset-».

5.2.1 Классы смещения

Сдвигать колонку вправо можно, используя классы «.offset-md-*», которые увеличивают левый отступ на * количество элементов. Из примера ниже, класс «.offset-md-2» сдвинет колонку «.col-md-4» на 2 колонки вправо, остальные примеры работают по аналогии:

<div class="row">
	<div class="col-md-4">.col-md-4</div>
	<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
	<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
	<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
	<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

Колонки с автоматической компоновкой

Используйте классы колонок, специфичные для контрольной точки, для удобного определения размера колонки без явного нумерованного класса, например .

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

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

1 из 2

2 из 2

1 из 3

2 из 3

3 из 3

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

Автоматическая компоновка колонок сетки Flexbox также означает, что Вы можете установить ширину одного колонки и автоматически изменять размер колонок-братьев вокруг него. Вы можете использовать предопределенные классы сетки (как показано ниже), миксины сетки или встроенную ширину

Обратите внимание, что размер других колонок будет изменяться независимо от ширины центрального колонки

1 из 3

2 из 3 (шире)

3 из 3

1 из 3

2 из 3 (шире)

3 из 3

Переменная ширина контента

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

1 из 3

Переменная ширина контента

3 из 3

1 из 3

Переменная ширина контента

3 из 3

Вертикальное выравнивание

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

Заголовок 1	Заголовок 2	Заголовок 3	Заголовок 4
Эта ячейка наследует из таблицы	Эта ячейка наследует из таблицы	Эта ячейка наследует из таблицы	Это текст-заполнитель, предназначенный для того, чтобы занять довольно много места по вертикали, чтобы продемонстрировать, как работает вертикальное выравнивание в предыдущих ячейках.
Эта ячейка наследует из таблицы	Эта ячейка наследует из таблицы	Эта ячейка выровнена по верхнему краю.	Это текст-заполнитель, предназначенный для того, чтобы занять довольно много места по вертикали, чтобы продемонстрировать, как работает вертикальное выравнивание в предыдущих ячейках.

Смещение адаптивных блоков

В Bootstrap 4 смещение адаптивных блоков можно выполнить с помощью:

• классов offset (на определённое количество колонок);
• служебных (утилитных) margin классов.

Классы offset

Классы offset предназначены для смещения адаптивных блоков вправо на определённое количество колонок.

Данные классы имеют следующий синтаксис:

оffset-{1} или offset-{breakpoint}-{1}

– контрольная точка, начиная с которой к данному блоку будет применено смещение (если она не указана, то смещение будет применено, начиная с самых крохотных устройств).

– величина смещения, указываемая с помощью количества колонок Bootstrap.

В качестве примера установим смещение адаптивным блокам так, как это показано на рисунке.

<div class="row">
  <div class="col-4"> (1) </div>
  <div class="col-4 offset-4"> (2) </div>
</div>
<div class="row">
  <div class="col-3 offset-3"> (1) </div>
  <div class="col-3 offset-3"> (2) </div>
</div>
<div class="row">
  <div class="col-6 offset-3"> (1) </div>
</div>

Смещение с помощью margin классов

В четвертой версии Bootstrap устанавливать смещение адаптивным блокам также можно с помощью margin отступов (margin-left: auto и (или) margin-right: auto). Эта вариант смещения появился благодаря тому, что сетка в новой версии Bootstrap (4) основывается на CSS Flexbox.

Данный вариант смещения (с помощью margin классов) используют, когда блоки необходимо сместить относительно друг от друга не которую переменную величину.

В Bootstrap 4 для более удобного и адаптивного задания блокам margin отступов ( и (или) ) можно использовать классы , , и .

<div class="row">
  <div class="col-4"> (1) </div>
  <div class="col-4 ml-auto"> (2) </div>
</div>
<div class="row">
  <div class="col-3"> (1) </div>
  <div class="col-3 ml-auto mr-auto"> (2) </div>
  <div class="col-3"> (3)</div>
</div>
<div class="row">
  <div class="col-4 ml-auto mr-auto"> (1) </div>
  <div class="col-4 ml-auto mr-auto"> (2) </div>
</div>

Highlighting Rows and Columns

The grid can highlight both Rows and Columns as the mouse hovers over them.

Highlighting Rows is on by default. To turn it off, set the grid property .

Highlighting Columns is off by default. To turn it on, set the grid property .

In this example Rows and Columns are highlighted.

Note if you hover over a header group, all columns in the group will be highlighted.

In this example both Rows and Columns are not highlighted by setting.

Rows highlight by default as this is a common requirement. Column highlighting is less common and as such needs to be opted it.

Row Highlighting works by the grid adding the CSS class to the row’s getting hovered. The grid cannot depend on using CSS selector as this will not highlight the entire row if Columns are pinned.

Column Highlighting works by the grid adding the CSS class
to all Cells to be highlighted.

Выравнивание

Используйте утилиты выравнивания flexbox для выравнивания столбцов по вертикали и горизонтали. Internet Explorer 10-11 не поддерживает вертикальное выравнивание элементов Flex, когда контейнер Flex имеет , как показано ниже.

Вертикальное выравнивание

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Одна из трёх колонок

Горизонтальное выравнивание

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Одна из двух колонок

Без пробелов между колонками

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

Здесь исходный код для создания этих стилей. Заметим, что переопределения колонок действуют только в первых наследуемых колонках и определяются через селектор атрибута. Этот метод создает более подробный селектор, и паддинг колонки может быть изменен через Отступы.

Нужно создать дизайн «edge-to-edge» (контент плотно прилегает к краям девайса)? Уберите родительский класс или .

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

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

Обертка колонки

Если больше 12-ти колонок разместить в одном ряду, каждая дополнительная колонка обернется в новую строку.

.col-9
.col-4Поскольку 9 + 4 = 13 > 12, этот div шириной 4 колонки обернется в новую строку как смежный юнит.
.col-6Последующие столбцы продолжаются вдоль новой строки.

Разрывы колонок

Чтобы сместить колонки на новую строку в гибком контейнере, нужно сделать следующее: добавьте элемент с туда, где вы хотите обернуть ваши колонки новой строкой. В норме это достигается с помощью множественных , но не каждый исполнительный метод может это поддержать.

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

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

Вы можете также применять это в брейкпойнтах с нашими утилитами отзывчивого дисплея.

.col-6 .col-sm-4
.col-6 .col-sm-4

.col-6 .col-sm-4
.col-6 .col-sm-4

Контекстуальные фоны (цвета для установления фона)

Кроме классов, предназначенных для выделения текста цветом, в Twitter Bootstrap 3 есть ещё несколько классов, которые предназначены для установления цветного фона блочным элементам HTML.

Например:

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
<a class="bg-primary" href="#">Пример ссылки</a>
<a class="bg-success" href="#">Пример ссылки</a>
<a class="bg-info" href="#">Пример ссылки</a>
<a class="bg-warning" href="#">Пример ссылки</a>
<a class="bg-danger" href="#">Пример ссылки</a>

Абзацы с различным фоном:

Lorem ipsum dolor sit amet. Officiis debitis aut reiciendis voluptatibus maiores alias consequatur aut fugit.

Sint et dolorum fuga sit voluptatem accusantium. Cum soluta nobis est et dolorum fuga obcaecati cupiditate.

Delectus, ut aut perferendis doloribus asperiores repellat.. Excepturi sint, obcaecati cupiditate non provident, similique sunt.

Optio, cumque nihil impedit, quo minus. Similique sunt in culpa. Nam libero tempore, cum soluta.

Magni dolores et voluptates repudiandae. Voluptatem sequi nesciunt, neque porro quisquam est, omnis dolor repellendus quibusdam.

Ссылки:

Примечание: Иногда контекстуальные классы, предназначенные для задания фона некоторому элементу, могут не изменить его цвет в связи с тем, что на данный элемент могут оказывать стили других классов или селекторов. В большинстве случаев для решения подобной проблемы достаточно обернуть некоторый контент в элемент и добавить к нему класс для задания цветного фона.

Выравнивание

Используйте утилиты выравнивания flexbox для вертикального и горизонтального выравнивания столбцов. Internet Explorer 10-11 не поддерживает вертикальное выравнивание гибких элементов, когда гибкий контейнер имеет , как показано ниже.

Вертикальное выравнивание

Один из трех столбцов

Один из трех столбцов

Один из трех столбцов

Один из трех столбцов

Один из трех столбцов

Один из трех столбцов

Один из трех столбцов

Один из трех столбцов

Один из трех столбцов

Один из трех столбцов

Один из трех столбцов

Один из трех столбцов

Горизонтальное выравнивание

Один из двух столбцов

Один из двух столбцов

Один из двух столбцов

Один из двух столбцов

Один из двух столбцов

Один из двух столбцов

Один из двух столбцов

Один из двух столбцов

Один из двух столбцов

Один из двух столбцов

Без отступов

Промежутки между столбцами в наших предопределенных классах сетки могут быть удалены с помощью . Это удаляет отрицательные поля для и горизонтальные отступы из всех непосредственных дочерних столбцов.

Вот исходный код для создания этих стилей

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

Нужен дизайн от края до края? Отбросьте родительский или .

На практике это выглядит так

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

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

Обертывание столбцов

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

.col-9
.col-4Поскольку 9 + 4 = 13 > 12, этот div шириной в 4 столбца переносится на новую строку как один непрерывный блок.
.col-6Последующие столбцы продолжаются вдоль новой строки.

Разрывы столбцов

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

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

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

Вы также можете применить этот перерыв в определенных контрольных точках с помощью наших утилит для адаптивного отображения.

.col-6 .col-sm-4
.col-6 .col-sm-4

.col-6 .col-sm-4
.col-6 .col-sm-4

Настраиваем размеры картинок

Чтобы на разных экранах картинки выглядели хорошо, давайте сделаем так, чтобы на средних экранах все коты были одного размера, а на маленьких — выстраивались одни под другими. Для этого изменим наш прошлый блок таким образом:

Мы для каждой картинки добавили описание размеров блока для каждого размера экрана и разберём его на примере первой картинки. Теперь, если экран очень маленький () или просто маленький (), то первый блок с котиком займёт  все 12 ячеек, то есть всю ширину. Если экран среднего размера () — то 4 ячейки, а если большой () или очень большой () — то пусть кот занимает по 2 ячейки.

Для второй картинки действуют те же самые правила, но размер кота на больших и очень больших экранах другой — 8 ячеек. Третья картинка настраивается точно так же, как и первая

Обратите внимание: чтобы на средних экранах получить одинаковый размер картинок, мы в описание каждой из них добавили одну и ту же команду col-md-4, которая каждому коту даёт 4 колонки, чтобы все были одного размера.    

Вот что получилось в итоге — мы никак не программировали все вычисления размера экрана, подгонку под них изображений, не запрашивали постоянно, поменялся ли размер — за нас всё делал Бутстрап. Мы просто сказали ему, какого размера хотим видеть каждый блок, и всё — дальше работала магия фреймворка!

Настройка сетки

Используя наши встроенные сеточные переменные и карты Sass, можно полностью настроить предопределенные классы сеток. Измените количество уровней, размеры медиа-запроса и ширину контейнера, а затем перекомпилируйте.

Колонки и промежутки

Количество столбцов сетки можно изменить с помощью переменных Sass. используется для генерации ширины (в процентах) каждого отдельного столбца, в то время как устанавливает ширину промежутков между столбцами.

Уровни сетки

Выходя за рамки самих столбцов, Вы также можете настроить количество уровней сетки. Если Вам нужно всего четыре уровня сетки, Вы бы обновили и примерно так:

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

Кастомизация

Настройте количество столбцов, количество строк и ширину промежутков с помощью локальных переменных CSS.

Переменная	Резервное значение	Описание
		Количество строк в шаблоне сетки
		Количество столбцов в шаблоне сетки
		Размер промежутка между столбцами (по вертикали и горизонтали)

Эти переменные CSS не имеют значения по умолчанию; вместо этого они применяют резервные значения, которые используются до тех пор, пока не будет предоставлен локальный экземпляр. Например, мы используем для наших строк CSS Grid, который игнорирует , потому что он еще нигде не установлен. Как только это произойдет, экземпляр будет использовать это значение вместо резервного значения .

Нет классов сетки

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

Автоколонка
Автоколонка
Автоколонка

Отрегулируйте количество столбцов и промежутков.

.g-col-2
.g-col-2

.g-col-6
.g-col-4

Добавление дополнительных строк и изменение размещения столбцов:

Автоколонка
Автоколонка
Автоколонка

Промежутки

Изменяйте вертикальные промежутки, только изменяя

Обратите внимание, что мы используем в , но и можно изменить по мере необходимости

.g-col-6
.g-col-6

.g-col-6
.g-col-6

Из-за этого у вас могут быть разные вертикальные и горизонтальные , которые могут принимать одно значение (все стороны) или пару значений (вертикальное и горизонтальное). Это может быть применено со встроенным стилем для или с нашей CSS-переменной .

.g-col-6
.g-col-6

.g-col-6
.g-col-6

Grid Options

The following table summarizes how the Bootstrap 4 grid system works across
different screen sizes:

	Extra small (<576px)	Small (>=576px)	Medium (>=768px)	Large (>=992px)	Extra Large (>=1200px)
Class prefix
Grid behaviour	Horizontal at all times	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints
Container width	None (auto)	540px	720px	960px	1140px
Suitable for	Portrait phones	Landscape phones	Tablets	Laptops	Laptops and Desktops
# of columns	12	12	12	12	12
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)	30px (15px on each side of a column)
Nestable	Yes	Yes	Yes	Yes	Yes
Offsets	Yes	Yes	Yes	Yes	Yes
Column ordering	Yes	Yes	Yes	Yes	Yes

How they work

• Columns build on the grid’s flexbox architecture. Flexbox means we have options for changing individual columns and . You choose how columns grow, shrink, or otherwise change.

• When building grid layouts, all content goes in columns. The hierarchy of Bootstrap’s grid goes from container to row to column to your content. On rare occasions, you may combine content and column, but be aware there can be unintended consequences.

• Bootstrap includes predefined classes for creating fast, responsive layouts. With six breakpoints and a dozen columns at each grid tier, we have dozens of classes already built for you to create your desired layouts. This can be disabled via Sass if you wish.

Медиа-запросы

Поскольку Bootstrap в первую очередь разработан для мобильных устройств, мы используем несколько медиа-запросов для создания разумных контрольных точек для наших макетов и интерфейсов. Эти контрольные точки в основном основаны на минимальной ширине области просмотра и позволяют масштабировать элементы по мере изменения области просмотра.

Минимальная ширина

Bootstrap в основном использует следующие диапазоны медиа-запросов — или контрольные точки — в наших исходных файлах Sass для нашей разметки, системы сеток и компонентов.

Эти миксины Sass переводятся в наш скомпилированный CSS с использованием значений, объявленных в наших переменных Sass. Например:

Максимальная ширина

Иногда мы используем медиа-запросы, идущие в другом направлении (заданный размер экрана или меньше):

Эти миксины берут объявленные контрольной точки, вычитают из них и используют их как наши значения . Например:

Зачем вычитать .02px? В настоящее время браузеры не поддерживают , поэтому мы обходим ограничения и области просмотра с дробной шириной (что может происходить при определенных условиях на высоких -dpi устройства, например), используя значения с более высокой точностью.

Одиночная контрольная точка

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

Например, приведет к:

Mix and Match

col-6 col-sm-9
col-6 col-sm-3

col-7 col-lg-8
col-5 col-lg-4

col-sm-3 col-md-6 col-lg-4
col-sm-9 col-md-6 col-lg-8

Example

<!— 50%/50% split on extra small devices and 75%/25% split on larger devices
—><div class=»row»>  <div class=»col-6
col-sm-9″>col-6 col-sm-9</div>  <div class=»col-6
col-sm-3″>col-6 col-sm-3</div></div><!— 58%/42% split
on extra small, small and medium devices and 66.3%/33.3% split on large and
xlarge devices —><div class=»row»>  <div class=»col-7 col-lg-8″>col-7
col-lg-8</div>  <div class=»col-5 col-lg-4″>col-5
col-lg-4</div></div><!— 25%/75% split on small devices, a 50%/50% split
on medium devices, and a 33%/66% split on large and xlarge devices. On extra
small devices, it will automatically stack (100%) —><div
class=»row»>  <div class=»col-sm-3 col-md-6 col-lg-4″>col-sm-3
col-md-6 col-lg-4</div>  <div class=»col-sm-9 col-md-6
col-lg-8″>col-sm-9 col-md-6 col-lg-8</div></div>

Доступные команды Grunt

(Просто собрать CSS и JavaScript)

Регенерирует каталог с скомпилированными и уменьшенными CSS и файлами JavaScript. Обычно для пользователя Bootstrap , это команда необходима.

(сборка и проверка документов активов)

Сборка и тестирование CSS, JavaScript, и прочих активов, которые используются при локальном использовании документации через .

(Построить абсолютно все и запустить тесты)

Компиляции and минифайлы CSS and JavaScript, строит сайт документаций, запускает HTML5 валидатор против документов, восстанавливает активы настройщика, и многое другое. Требует Jekyll. Обычно это необходимо, только если вы взломали сам загрузчик Bootstrap.

Заводские Android браузеры

Из коробки, Android 4.1 (и даже некоторые новые версии) ставят приложение Браузера в качестве веб-браузера по умолчанию(в отличие от Chrome). К сожалению, стандартные браузеры имеют множество ошибок и несоответствий с CSS в целом.

Меню выбора

На элементе, в Android браузере не будет отображаться элементы управления если есть и/или . (Смотри этот вопросы на StackOverflow более детально.) Используйте фрагмент кода ниже, чтобы удалить этот CSS и сделать элемент без стиля на Android браузере. Избегать недовольство юзера помогает использование браузеров: Chrome, Safari и Mozilla.

Хотите увидеть пример? Проверьте это JS Bin demo.

Горизонтальные промежутки

Классы могут использоваться для управления шириной горизонтального промежутка. Родительский элемент или может нуждаться в корректировке, если также используются более крупные промежутка, чтобы избежать нежелательного переполнения, с помощью соответствующей утилиты заполнения. Например, в следующем примере мы увеличили отступ с помощью :

Пользовательские внутренние отступы колонок

Пользовательские внутренние отступы колонок

Альтернативное решение — добавить оболочку вокруг с классом :

Пользовательские внутренние отступы колонок

Пользовательские внутренние отступы колонок