ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

Bootstrap 4 Tutorial

BS4 HOME BS4 Get Started BS4 Grid Basic BS4 Typography BS4 Colors BS4 Tables BS4 Images BS4 Jumbotron BS4 Alerts BS4 Buttons BS4 Button Groups BS4 Badges BS4 Progress Bars BS4 Pagination BS4 List Groups BS4 Cards BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbar BS4 Forms BS4 Inputs BS4 Carousel BS4 Modal BS4 Tooltip BS4 Popover BS4 Scrollspy BS4 Utilities BS4 Flex BS4 Media Objects BS4 Filters

Bootstrap 4 Grid

BS4 Grid System BS4 Stacked/Horizontal BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge BS4 Grid Examples

Bootstrap 4 Theme

BS4 Basic Template

Bootstrap 4 Ref

All Classes JS Alert JS Button JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Scrollspy JS Tab JS Tooltip


Bootstrap 4 Flex


Bootstrap 4 Flex

Используйте классы Flex для управления компоновкой компонентов Bootstrap 4.


Flexbox

Самая большая разница между Bootstrap 3 и Bootstrap 4 заключается в том, что BootStrap 4 теперь использует Flexbox, а не float, для обработки макета.

Модуль компоновки гибких коробок упрощает разработку гибкой адаптивной структуры макета без использования float или позиционирования. Если вы новичок в Flex, вы можете прочитать об этом в нашем CSS Flexbox учебник.

Примечание: Flexbox не поддерживается в IE9 и более ранних версиях.

Если вам нужна поддержка IE8-9, используйте Bootstrap 3. Это наиболее стабильная версия Bootstrap, и она по-прежнему поддерживается командой для критических исправлений и изменений в документации. Тем не менее, новые функции не будут добавлены к нему.

Для создания контейнера Flexbox и преобразования прямых дочерних элементов в элементы Flex используйте d-flex класс:

Пример

Flex item 1
Flex item 2
Flex item 3

Пример

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

Чтобы создать встроенный контейнер Flexbox, используйте d-inline-flex класс:

Пример

Flex item 1
Flex item 2
Flex item 3

Пример

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

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

Используется .flex-row для отображения элементов Flex горизонтально (бок о бок). Это значение по умолчанию.

Совет: используйте .flex-row-reverse Выравнивание по горизонтали по правому краю:

Пример

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

Пример

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

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

Используется .flex-column для отображения элементов Flex вертикально (поверх друг друга) или для изменения .flex-column-reverse вертикального направления:

Пример

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

Пример

<div class="d-flex flex-column">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>


Выравнивание содержимого

Используйте .justify-content-* классы для изменения выравнивания элементов Flex. Допустимые классы start (по умолчанию),,, end center between или around:

Пример

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

Пример

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Заливка/равная ширина

Используйте .flex-fill для элементов Flex, чтобы заставить их в равной ширины:

Пример

Flex item 1
Flex item 2
Flex item 3

Пример

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">Flex item 1</div>
  <div class="p-2 bg-warning flex-fill">Flex item 2</div>
  <div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>

Grow

Используйте для .flex-grow-1 элемента Flex, чтобы занять оставшуюся часть пространства. В приведенном ниже примере первые два элемента Flex занимают необходимое пространство, в то время как последний элемент занимает оставшуюся часть доступного пространства:

Пример

Flex item 1
Flex item 2
Flex item 3

Пример

<div class="d-flex">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
</div>

Совет: Используйте .flex-shrink-1 на Flex элемент, чтобы сделать его сжатие, если это необходимо.


Order

Изменение визуального порядка конкретных элементов Flex с помощью .order классов. Допустимые классы от 0 до 12, где наименьшее число имеет наивысший приоритет (Order-1 отображается перед порядком-2 и т.д.):

Пример

Flex item 1
Flex item 2
Flex item 3

Пример

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">Flex item 1</div>
  <div class="p-2 bg-warning order-2">Flex item 2</div>
  <div class="p-2 bg-primary order-1">Flex item 3</div>
</div>

Автоматические поля

С легкостью добавляйте автоматические поля в элементы Flex .mr-auto (нажимайте элементы вправо) или с помощью .ml-auto (передвиньте элементы влево):

Пример

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

Пример

<div class="d-flex bg-secondary">
  <div class="p-2 mr-auto bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 ml-auto bg-primary">Flex item 3</div>
</div>


Обернуть

Управление переносом элементов Flex в контейнер Flex с помощью .flex-nowrap (по умолчанию) .flex-wrap или .flex-wrap-reverse.

Нажмите на кнопки ниже, чтобы увидеть разницу между тремя классами, по Чанг в упаковке Flex элементов в примере поле:

Пример

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 25

Пример

<div class="d-flex flex-wrap">..</div>

<div class="d-flex flex-wrap-reverse">..</div>

<div class="d-flex flex-nowrap">..</div>

Выравнивание содержимого

Управление вертикальным выравниванием собранных элементов Flex с помощью .align-content-* классов. Допустимые классы .align-content-start (по умолчанию),,,, .align-content-end .align-content-center .align-content-between .align-content-around и .align-content-stretch .

Примечание: Эти классы не влияют на отдельные строки элементов Flex.

Нажмите на кнопки ниже, чтобы увидеть разницу между пятью классами, изменив вертикальное выравнивание элементов Flex в поле пример:

Example

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 10
Flex item 11
Flex item 12
Flex item 13
Flex item 14
Flex item 15
Flex item 16
Flex item 17
Flex item 18
Flex item 19
Flex item 20
Flex item 21
Flex item 22
Flex item 23
Flex item 24
Flex item 25

Пример

<div class="d-flex flex-wrap align-content-start">..</div>

<div class="d-flex flex-wrap align-content-end">..</div>

<div class="d-flex flex-wrap align-content-center">..</div>

<div class="d-flex flex-wrap align-content-around">..</div>

<div class="d-flex flex-wrap align-content-stretch">..</div>

Выравнивание элементов

Управление вертикальным выравниванием отдельных строк элементов Flex с помощью .align-items-* классов. Допустимые классы .align-items-start:, .align-items-end, .align-items-center .align-items-baseline и .align-items-stretch (по умолчанию).

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

Пример

Flex item 1
Flex item 2
Flex item 3

Пример

<div class="d-flex align-items-start">..</div>

<div class="d-flex align-items-end">..</div>

<div class="d-flex align-items-center">..</div>

<div class="d-flex align-items-around">..</div>

<div class="d-flex align-items-stretch">..</div>

Выравнивание себя

Управление вертикальным выравниванием заданного элемента Flex с классами .align-self-*. Допустимые классы .align-self-start:, .align-self-end, .align-self-center .align-self-baseline и .align-self-stretch (по умолчанию).

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

Example

Flex item 1
Flex item 2
Flex item 3

Пример

<div class="d-flex bg-light" style="height:150px">
  <div class="p-2 border">Flex item 1</div>
  <div class="p-2 border align-self-start">Flex item 2</div>
  <div class="p-2 border">Flex item 3</div>
</div>

Адаптивные классы Flex

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

*символ может быть заменен SM, MD, LG или XL, который представляет малые, средние, большие или XLarge экраны.

Класс Описание
Flex Container    
.d-*-flex Создает контейнер Flexbox для различных экранов
.d-*-inline-flex Создает встроенный Flexbox контейнер для различных экранов
Direction    
.flex-*-row Отображать гибкие элементы по горизонтали на разных экранах
.flex-*-row-reverse Отображение гибких элементов по горизонтали и по правому краю на разных экранах
.flex-*-column Отображать гибкие элементы по вертикали на разных экранах
.flex-*-column-reverse Отображать гибкие элементы по вертикали, с обратным порядком, на разных экранах
Justified Content    
.justify-content-*-start Отображать элементы Flex с начала (по левому краю) на разных экранах
.justify-content-*-end Отображение элементов Flex в конце (по правому краю) на разных экранах
.justify-content-*-center Отображение элементов Flex в центре контейнера Flex на разных экранах
.justify-content-*-between Отображать гибкие элементы в "между" на разных экранах
.justify-content-*-around Отображать гибкие элементы "вокруг" на разных экранах
Fill / Equal Width    
.flex-*-fill Принудить элементы Flex к одинаковой ширине на разных экранах
Grow    
.flex-*-grow-0 Не делайте элементы растут на разных экранах  
.flex-*-grow-1 Сделать элементы растут на разных экранах  
Shrink    
.flex-*-shrink-0 Не делайте элементы термоусадочные на разные экраны  
.flex-*-shrink-1 Сжатие элементов на разных экранах  
Order    
.order-*-0-12 Изменение порядка от 0 до 12 на маленьких экранах
Wrap    
.flex-*-nowrap Не оборачивать элементы на разных экранах
.flex-*-wrap Перенос элементов на различные экраны
.flex-*-wrap-reverse Реверсировать обтекание элементов на разных экранах
Align Content    
.align-content-*-start Выравнивание собранных элементов с начала на разных экранах
.align-content-*-end Выравнивание собранных элементов в конце на разных экранах
.align-content-*-center Выравнивание собранных элементов в центре на разных экранах
.align-content-*-around Выравнивание собранных элементов "вокруг" на разных экранах
.align-content-*-stretch Растянуть собранные элементы на разных экранах
Align Items    
.align-items-*-start Выравнивание отдельных рядов элементов с начала на разных экранах
.align-items-*-end Выравнивание отдельных рядов элементов в конце на разных экранах
.align-items-*-center Выравнивание одиночных рядов элементов в центре на разных экранах
.align-items-*-baseline Выравнивание отдельных строк элементов на базовой линии на разных экранах
.align-items-*-stretch Растянуть отдельные ряды элементов на разных экранах
Align Self    
.align-self-*-start Выравнивание элемента Flex с начала на разных экранах
.align-self-*-end Выравнивание элемента Flex в конце на разных экранах
.align-self-*-center Выравнивание элемента Flex в центре на разных экранах
.align-self-*-baseline Выравнивание элемента Flex по базовой линии на разных экранах
.align-self-*-stretch Растянуть гибкий элемент на разных экранах