Шаблон. Документация Bootstrap 2.3.2
Необходим HTML5 doctype
Bootstrap использует HTML-элементы и CSS-свойства для которых необходимо использовать HTML5 doctype. Убедитесь в использовании HTML5 doctype на каждой за'Bootstrap'енной странице Вашего проекта.
<!DOCTYPE html> <html lang="en"> ... </html>
Оформление и ссылки
Bootstrap выставляет основные и глобальные значения для шрифтов, ссылок и бекграунда. В частности, мы:
- Избавились от
margin
внутриbody
-элемента - Установите
background-color: white;
дляbody
-элемента - Используем аттрибуты
@baseFontFamily
,@baseFontSize
и@baseLineHeight
как основу для шрифтов и типографи - Выставьте основной цвет ссылок через
@linkColor
и применили подчеркивание только для селектора:hover
Данные стили вы можете найти в файле scaffolding.less.
Сбрасывание браузерных дефолтов через Normalize
В Bootstrap 2 мы применили ставший обыденным сброс браузерных дефолтов с помощью Normalize.css, проект от Nicolas Gallagher и Jonathan Neal так же мы включили все плюсы от HTML5 Boilerplate. Сброс дефолтных стилей находится в reset.less, мы многое изменили для большей совместимости.
Живой пример сетки
По умолчанию сетка состоит из 12 columns, с установленной шириной в 940px без использования динамических (респонсив) запросов. При использовании динамических CSS-запросов, сетка и элементы адаптируются под экраны шириной в 724px и 1170px в зависимости от вьюпорта (viewport). Вьюпорты менее 767px, делают сетку резиновой, а расположение элементов вертикальным.
Основа HTML-сетки
Для создания простой двух-колонной странички,- создайте элемент с классом .row
и добавьте соответствующий номер для задания размера колонки от 1 до 12, например .span*
где * значение от 1 до 12. Так как это 12 колонная сетка, число "spanning" или span(x)'ов должно равняться 12 основным колонкам, которые определенны как часть основной сетки. И сумма span(x)'ов не должна превышать номер родительской span-колонки.
<div> <div>...</div> <div>...</div> </div>
В этом примере: .span4
и .span8
в сумме составляют 12 колон и выглядят как законченный ряд..
Отключение колонок
Отключить колонку сохраняя за ней место можно с помощью класса .offset*
. Каждый такой класс увеличивает левый margin от колонки имитируя отключение или отсутствие колонны. На пример: .offset4
сдвигает .span4
на 4 колонны.
<div> <div>...</div> <div>...</div> </div>
Вложенные колонки
Чтобы вложить ваш контент в сетку по умолчанию, добавьте новый .row
и набор столбцов .span*
в существующий столбец .span*
. Вложенные строки должны содержать набор столбцов, которые содержат число столбцов родительского элемента.
<div> <div> Level 1 column <div> <div>Level 2</div> <div>Level 2</div> </div> </div> </div>
Живой пример резиновых колонок
Плавающая колонка использует проценты в качестве ширины, в отличии от фиксированного количества пикселей. Плавающие колонки имеют ту же динамичность, что и фиксированные колонки, обеспечивая одинаковую пропорцию на различных устройствах и дисплеях.
HTML-Основа для плавающей сетки шаблона
Сделайте любую строку .fluid
, изменив ее. Классы столбцов сохраняют то же самое, что позволяет легко переключаться между фиксированными и флюидными сетками.
<div> <div>...</div> <div>...</div> </div>
Отключение колонн в плавающей сетке
Работает так же, как и фиксированная сетчатая система: добавьте .offset*
в любой столбец, чтобы компенсировать это количество столбцов.
<div> <div>...</div> <div>...</div> </div>
Вложение колонн в плавающую сетку
Вложение в плавающую сетку немного отличается: номер и сумма span(x)'ов может не совпадать с размером родительской колонки, так как вложенные колонны на каждом уровне вложения занимают 100% родительской колонки.
<div> <div> Fluid 12 <div> <div> Fluid 6 <div> <div>Fluid 6</div> <div>Fluid 6</div> </div> </div> <div>Fluid 6</div> </div> </div> </div>
Фиксированный шаблон
Основной и простой макет с шириной в 940px, отцентрованное расположение элементов для простого сайта с основным родительским <div>
.
<body> <div> ... </div> </body>
Плавающий (резиновый) шаблон
<div>
предоставляет плавающую структуру страницы, min- и max-widths, с левым сайдбаром для меню. Этот макет отлично подходит для текстов и приложений.
<div> <div> <div> <!--Sidebar content--> </div> <div> <!--Body content--> </div> </div> </div>
Как использовать?
Для активации responsive-дизайна добавьте CSS-файл и meta-тег в <head>
вашей страницы. Если вы компилировали Bootstrap со страницы Изменить и скачать, Вам необходимо включить только meta-тег.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
Внимание! В Bootstrap по умолчанию не входят responsive-файлы так как не все страницы и элементы нуждаются в этих возможностях. Вместо того чтобы обременять разработчиков удалением responsive-дизайна и его элементов, мы считаем что логичнее предоставить простую возможность включения.
Подробнее о динамическом дизайне
Медиа-запросы позволяют изменять CSS "на лету", в зависимости от размера экрана, соотношения ширины и высоты экрана, типа устройства, и т.д., но обычно используется для изменения min-width
и max-width
элементов.
- Изменяется ширина колонок в сетке шаблона
- Заменяются плавающие элементы на фиксированные при необходимости
- Изменяется размер заголовков и основного шрифта на разных устройствах
Используйте динамические возможности Медиа-запросов только для создания мобильной версии сайта. Для крупных проектов мы рекомендуем создавать отдельную версию дизайна и сайта.
Поддерживаемые устройства
Bootstrap поддерживает несколько медиа-запросов в одном файле, что позволяет работать Вашему проекту на различных устройствах и с разными разрешениями экранов. Что включено:
Категория | Ширина шаблона | Ширина колонок | Отступ колонок |
---|---|---|---|
Большие дисплеи | 1200px и больше | 70px | 30px |
По умолчанию | 980px и больше | 60px | 20px |
Портретные планшеты | 768px и больше | 42px | |
Планшеты | 767px и меньше | Плавающие колонки без фиксированной ширины | |
Смартфоны | 480px и меньше | Плавающие колонки без фиксированной ширины |
/* Большой дисплей */ @media (min-width: 1200px) { ... } /* От портретного планшета до ландшафтного экрана и настольных дисплеев */ @media (min-width: 768px) and (max-width: 979px) { ... } /* От ландшафтного экрана телефона до потретного планшета */ @media (max-width: 767px) { ... } /* Landscape - телефоны */ @media (max-width: 480px) { ... }
Поддерживаемые классы
Показанная здесь таблица классов обеспечивает динамику для различных устройств и их работу в связке с сеткой макета и медиа-запросами (разделено по устройствам). Данные классы находятся в responsive.less
.
Класс | Телефоны 767px и меньше | Планшеты от 979px до 768px | |
---|---|---|---|
.visible-phone |
Видено | Скрыто | Скрыто |
.visible-tablet |
Скрыто | Видено | Скрыто |
.visible-desktop |
Скрыто | Скрыто | Видено |
.hidden-phone |
Скрыто | Видено | Видено |
.hidden-tablet |
Видено | Скрыто | Видено |
.hidden-desktop |
Видено | Видено | Скрыто |
Когда использовать?
Использование данного функционала позволяет не создавать разные версии одного и того же сайта под разные устройства. Вместо этого можно управлять показом и скрытием контента в зависимости от устройства.
Тестирование
Измените размер окна или откройте данную страницу на мобильном устройстве для тестирование вышеуказанных классов в действии.
Виден на...
Зеленая отметка означает что блок виден в текущем окне шаблона.
- Phone✔ Телефон
- Tablet✔ Планшет
- Desktop✔ Монитор
Скрыт на...
Здесь зеленая отметка блока означает что он скрыт в текущем окне шаблона.
- Phone✔ Телефон
- Tablet✔ Планшет
- Desktop✔ Монитор
преимущества и недостатки сеток, возможность объединения
От автора: до того, как я открыл для себя CSS Grid, я часто использовал сетку Bootstrap. Сетка Bootstrap была разумным решением для многих проблем с адаптивностью, которые у меня в то время возникали. Затем я обнаружил CSS Grid. Преимущество CSS Grid над Bootstrap — это ее двумерная природа (возможность использовать строки и столбцы), а не одна строка в Bootstrap.
В Интернете много споров о том, что лучше, когда каждая из них должна использоваться и как их использовать. Это меня сильно смутило. Хотя я чаще использую CSS Grid, мне нравятся они обе. В то время, как CSS Grid значительно мощнее, я считаю, что сетка Bootstrap более гибкая. Мне действительно нужно выбирать?
Bootstrap имеет встроенную систему параметров сетки, которая работает на нескольких устройствах, и это помогло мне избежать использования медиа-запросов. Используя параметры сетки Bootstrap, я могу правильно расположить дивы так, как я хочу, чтобы они отображались на разных экранах без использования медиа-запросов. Вот что я имею ввиду:
Ссылка на codepen.

Фреймворк Bootstrap 4. Быстрый старт
Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля
В приведенном выше коде я создал вложенную в section сетку с классом .section из четырех столбцов. Я на самом деле хочу, чтобы четыре столбца занимали половину ширины экрана на устройствах менее 998 пикселей и располагались друг над другом на небольшом экране для удобства чтения. Но CSS Grid не дает мне такой возможности. Они остается такими же, как вы можете видеть на изображении ниже.
для большого экрана
маленький экран (мобильное представление)
Вложенная сетка остается неизменной. Ине не нужно этого, и я не хочу указывать контрольные точки в CSS. Поэтому я решил вложить сетку bootstrap в класс .section, чтобы посмотреть, смогу ли я достичь желаемого результата.

Фреймворк Bootstrap 4. Быстрый старт
Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля
Узнать подробнееСетка Bootstrap позволяет размещать в строке до 12 столбцов. На большом экране четыре столбца располагаются рядом. Каждый столбец занимает 3 единицы из 12 столбцов.
большой экран > 1000 пикселей
планшеты
На среднем экране столбцы теперь занимают 6 единиц, общие 12 столбцов поделить на два столбца.
мобильное представление
В то время как на небольших экранах, таких как мобильные устройства, столбцы занимают всю ширину и накладываются друг на друга. CSS Grid и сетка Bootstrap могут отлично работать вместе. Вместо того, чтобы противопоставлять их друг другу, вам нужно найти способ объединить эти две мощные сетки.
Автор: Barri Sambaris
Источник: https://hackernoon.com
Редакция: Команда webformyself.

Фреймворк Bootstrap 4. Быстрый старт
Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля
Узнать подробнее
Фреймворк Bootstrap 4. Быстрый старт
Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля!
СмотретьFlex. Утилиты · Bootstrap
Быстрое управление компоновкой, выравниванием и калибровкой столбцов сетки, навигации, компонентов и т.д., с полным набором гибких утилит flexbox. Для более сложных реализаций может потребоваться пользовательский CSS.
Задействуйте «гибкое» поведение
Применяйте утилиты display
для создания гибкого контейнера и трансформируйте прямые дочерние элементы в «гибкие». Гибкие контейнеры и элементы можно изменять дополнительными свойствами гибкости.
Я - контейнер flexbox!
<div>I'm a flexbox container!</div>
Я - контейнер flexbox!
<div>I'm an inline flexbox container!</div>
Также существуют отзывчивые варианты .d-flex
и .d-inline-flex
.
.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
Направление
Задайте направление гибких элементов в гибком контейнере утилитами направления. В большинстве случаев вы можете пропустить «горизонтальный класс» в данном случае, т.к. умолчание браузера – row. Однако вы можете попасть в ситуацию, где вам понадобится явно задать это значение (например, при разработке отзывчивой верстки).
Используйте элемент класса .flex-row
для задания горизонтального направления (умолчание браузера), или .flex-row-reverse
для того, чтобы горизонтальное направление начиналось с противоположной стороны.
Flex элемент 1
Flex элемент 2
Flex элемент 3
Flex элемент 1
Flex элемент 2
Flex элемент 3
<div>
<div>Flex элемент 1</div>
<div>Flex элемент 2</div>
<div>Flex элемент 3</div>
</div>
<div>
<div>Flex элемент 1</div>
<div>Flex элемент 2</div>
<div>Flex элемент 3</div>
</div>
Используйте класс .flex-column
для создания вертикального направления, или .flex-column-reverse
, чтобы вертикальное направление начиналось с противоположной стороны.
Flex элемент 1
Flex элемент 2
Flex элемент 3
Flex элемент 1
Flex элемент 2
Flex элемент 3
<div>
<div>Flex элемент 1</div>
<div>Flex элемент 2</div>
<div>Flex элемент 3</div>
</div>
<div>
<div>Flex элемент 1</div>
<div>Flex элемент 2</div>
<div>Flex элемент 3</div>
</div>
Для flex-direction
также есть отзывчивые вариации.
.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse
Выравнивайте содержимое
Пользуйтесь утилитами justify-content
или контейнерами флексбокса для изменения выравнивания гибких элементов по главной оси (ось х по умолчанию, ось у – если flex-direction: column
). Выбирайте из start
(умолчание браузера), end
, center
, between
или around
.
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
Отзывчивые вариации для justify-content
.
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
Выравнивание элементов
Используйте утилиты align-items
в контейнерах флексбокса для изменения выравнивания гибких элементов по перекрестной оси (ось у по умолч., ось х – если flex-direction: column
). Выбирайте из start
, end
, center
, baseline
или stretch
(умолчание браузера).
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
Отзывчивые вариации для align-items
.
.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch
Сплошное выравнивание
Используйте утилиты align-self
в гибких элементах для индивидуального изменения их выравнивания по перекрестной оси (ось у по умолч., ось х – если flex-direction: column
). Выбирайте из таких же параметров, как у align-items
: start
, end
, center
, baseline
или stretch
(умолчание браузера).
Flex элемент
Выровненный элемент flex
Flex элемент
Flex элемент
Выровненный элемент flex
Flex элемент
Flex элемент
Выровненный элемент flex
Flex элемент
Flex элемент
Выровненный элемент flex
Flex элемент
Flex элемент
Выровненный элемент flex
Flex элемент
<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>
Отзывчивые вариации для align-self
.
.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch
Наполнение
Используйте класс .flex-fill
в серии вложенных элементов для придания им равной ширины, притом, что они займут все доступное горизонтальное место. Особенно полезно для создания выровненной панели навигации с равной шириной всех элементов.
Flex элемент
Flex элемент
Flex элемент
<div>
<div>Flex элемент</div>
<div>Flex элемент</div>
<div>Flex элемент</div>
</div>
Для этого класса также есть адаптивные вариации flex-fill
.
.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
Увеличение и уменьшение
Используйте классы .flex-grow-*
для переключения возможности элемента «расти» и заполнять свободное место. В примере ниже, элементы класса .flex-grow-1
используют все доступное место, которое может, но притом остающимся двум гибким элементам остается необходимое им место.
Flex элемент
Flex элемент
Третий Flex элемент
<div>
<div>Flex элемент</div>
<div>Flex элемент</div>
<div>Третий Flex элемент</div>
</div>
Используйте классы .flex-shrink-*
для переключения возможности гибких элементов уменьшаться, если необходимо. В примере ниже второй гибкий элемент класса .flex-shrink-1
«принуждается» оборачивать свое содержимое новой строкой, «уменьшаясь» и оставляя больше места для предыдущего гибкого элемента класса .w-100
.
Flex элемент
Flex элемент
<div>
<div>Flex элемент</div>
<div>Flex элемент</div>
</div>
Для flex-grow
и flex-shrink
также есть адаптивные вариации.
.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1
.flex-md-{grow|shrink}-0
.flex-md-{grow|shrink}-1
.flex-lg-{grow|shrink}-0
.flex-lg-{grow|shrink}-1
.flex-xl-{grow|shrink}-0
.flex-xl-{grow|shrink}-1
Авто-марджины
Флексбокс может невероятные вещи – если вы сочетаете выравнивание гибких элементов с авто-марджинами. Три примера ниже показывают контроль над гибкими элементами через авто-марджины: 1. по умолчанию (нет авто-марджина), 2. «прижимаем» два элемента к правому краю (.mr-auto
), 3. «прижимаем» два элемента к левому краю (.ml-auto
).
К несчастью, IE10 и IE11 не очень-то поддерживают авто-марджины в гибких элементах, чьи «родительские элементы» имеют атрибут justify-content
. Смотри детали здесь.
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>
<div>Flex элемент</div>
<div>Flex элемент</div>
<div>Flex элемент</div>
</div>
<div>
<div>Flex элемент</div>
<div>Flex элемент</div>
<div>Flex элемент</div>
</div>
<div>
<div>Flex элемент</div>
<div>Flex элемент</div>
<div>Flex элемент</div>
</div>
С элементами выравнивания
Передвигайте по вертикали один из гибких элементов к верху или низу контейнера, сочетая align-items
, flex-direction: column
и margin-top: auto
или margin-bottom: auto
.
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>
<div>Flex элемент</div>
<div>Flex элемент</div>
<div>Flex элемент</div>
</div>
<div>
<div>Flex элемент</div>
<div>Flex элемент</div>
<div>Flex элемент</div>
</div>
Обертка
Изменяйте способ оборачивания гибких элементов в гибком контейнере. Можете совсем не оборачивать их (умолчание браузера) с классом .flex-nowrap
, можете обернуть их классом .flex-wrap
или реверсируйте оборачивание с классом .flex-wrap-reverse
.
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>
...
</div>
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>
...
</div>
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>
...
</div>
Отзывчивые вариации есть также для flex-wrap
.
.flex-nowrap
.flex-wrap
.flex-wrap-reverse
.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse
Порядок
Мы создали параметры лишь для придания элементу первого или последнего порядкового положения, как и для сброса данной настройки для использования порядка DOM. Так как order
принимает цифровое значение (например, 5
), добавьте обычный CSS для создания необходимых дополнительных значений.
First flex item
Second flex item
Third flex item
<div>
<div>First flex item</div>
<div>Second flex item</div>
<div>Third flex item</div>
</div>
Отзывчивые вариации есть также для order
.
.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-6
.order-7
.order-8
.order-9
.order-10
.order-11
.order-12
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-sm-6
.order-sm-7
.order-sm-8
.order-sm-9
.order-sm-10
.order-sm-11
.order-sm-12
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-md-6
.order-md-7
.order-md-8
.order-md-9
.order-md-10
.order-md-11
.order-md-12
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-lg-6
.order-lg-7
.order-lg-8
.order-lg-9
.order-lg-10
.order-lg-11
.order-lg-12
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xl-6
.order-xl-7
.order-xl-8
.order-xl-9
.order-xl-10
.order-xl-11
.order-xl-12
Выравнивание содержимого
Используйте утилиты align-content
в контейнерах флексбокса, чтобы гибкие элементы выравнивались «вместе» по одной перекрестной оси. Выбирайте из start
(умолчание браузера), end
, center
, between
, around
или stretch
. Чтобы продемонстрировать эти утилиты, мы применили flex-wrap: wrap
и увеличили количество элементов flex.
Внимание! Это свойство не действует на одиночных рядах или одиночных гибких элементах.
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>
...
</div>
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>...</div>
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>...</div>
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>...</div>
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>...</div>
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>...</div>
Отзывчивые вариации есть также для align-content
.
.align-content-start
.align-content-end
.align-content-center
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-around
.align-content-xl-stretch
Flex. Утилиты · Bootstrap. Версия v4.0.0
Быстрое управление компоновкой, выравниванием и калибровкой столбцов сетки, навигации, компонентов и т.д., с полным набором гибких утилит flexbox. Для более сложных реализаций может потребоваться пользовательский CSS.
Задействуйте «гибкое» поведение
Применяйте утилиты display
для создания гибкого контейнера и трансформируйте прямые дочерние элементы в «гибкие». Гибкие контейнеры и элементы можно изменять дополнительными свойствами гибкости.
Я - контейнер flexbox!
<div>Я - контейнер flexbox!</div>
Я встроенный контейнер flexbox!
<div>Я встроенный контейнер flexbox!</div>
Также существуют отзывчивые варианты .d-flex
и .d-inline-flex
.
.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
Направление
Задайте направление гибких элементов в гибком контейнере утилитами направления. В большинстве случаев вы можете пропустить «горизонтальный класс» в данном случае, т.к. умолчание браузера – row. Однако вы можете попасть в ситуацию, где вам понадобится явно задать это значение (например, при разработке отзывчивой верстки).
Используйте элемент класса .flex-row
для задания горизонтального направления (умолчание браузера), или .flex-row-reverse
для того, чтобы горизонтальное направление начиналось с противоположной стороны.
Flex элемент 1
Flex элемент 2
Flex элемент 3
Flex элемент 1
Flex элемент 2
Flex элемент 3
<div>
<div>Flex элемент 1</div>
<div>Flex элемент 2</div>
<div>Flex элемент 3</div>
</div>
<div>
<div>Flex элемент 1</div>
<div>Flex элемент 2</div>
<div>Flex элемент 3</div>
</div>
Используйте класс .flex-column
для создания вертикального направления, или .flex-column-reverse
, чтобы вертикальное направление начиналось с противоположной стороны.
Flex элемент 1
Flex элемент 2
Flex элемент 3
Flex элемент 1
Flex элемент 2
Flex элемент 3
<div>
<div>Flex элемент 1</div>
<div>Flex элемент 2</div>
<div>Flex элемент 3</div>
</div>
<div>
<div>Flex элемент 1</div>
<div>Flex элемент 2</div>
<div>Flex элемент 3</div>
</div>
Для flex-direction
также есть отзывчивые вариации.
.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse
Выравнивайте содержимое
Пользуйтесь утилитами justify-content
или контейнерами флексбокса для изменения выравнивания гибких элементов по главной оси (ось х по умолчанию, ось у – если flex-direction: column
). Выбирайте из start
(умолчание браузера), end
, center
, between
или around
.
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
Отзывчивые вариации для justify-content
.
.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
Выравнивание элементов
Используйте утилиты align-items
в контейнерах флексбокса для изменения выравнивания гибких элементов по перекрестной оси (ось у по умолч., ось х – если flex-direction: column
). Выбирайте из start
, end
, center
, baseline
или stretch
(умолчание браузера).
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
<div>...</div>
Отзывчивые вариации для align-items
.
.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch
Align self
Используйте утилиты align-self
в гибких элементах для индивидуального изменения их выравнивания по перекрестной оси (ось у по умолч., ось х – если flex-direction: column
). Выбирайте из таких же параметров, как у align-items
: start
, end
, center
, baseline
или stretch
(умолчание браузера).
Flex элемент
Выровненный элемент flex
Flex элемент
Flex элемент
Выровненный элемент flex
Flex элемент
Flex элемент
Выровненный элемент flex
Flex элемент
Flex элемент
Выровненный элемент flex
Flex элемент
Flex элемент
Выровненный элемент flex
Flex элемент
<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>
<div>Выровненный элемент flex</div>
Отзывчивые вариации для align-self
.
.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch
Авто-марджины
Флексбокс может невероятные вещи – если вы сочетаете выравнивание гибких элементов с авто-марджинами. Три примера ниже показывают контроль над гибкими элементами через авто-марджины: 1. по умолчанию (нет авто-марджина), 2. «прижимаем» два элемента к правому краю (.mr-auto
), 3. «прижимаем» два элемента к левому краю (.ml-auto
).
К несчастью, IE10 и IE11 не очень-то поддерживают авто-марджины в гибких элементах, чьи «родительские элементы» имеют атрибут justify-content
. Смотри детали здесь.
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>
<div>Flex элемент</div>
<div>Flex элемент</div>
<div>Flex элемент</div>
</div>
<div>
<div>Flex элемент</div>
<div>Flex элемент</div>
<div>Flex элемент</div>
</div>
<div>
<div>Flex элемент</div>
<div>Flex элемент</div>
<div>Flex элемент</div>
</div>
С элементами выравнивания
Передвигайте по вертикали один из гибких элементов к верху или низу контейнера, сочетая align-items
, flex-direction: column
и margin-top: auto
или margin-bottom: auto
.
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>
<div>Flex элемент</div>
<div>Flex элемент</div>
<div>Flex элемент</div>
</div>
<div>
<div>Flex элемент</div>
<div>Flex элемент</div>
<div>Flex элемент</div>
</div>
Обертка
Изменяйте способ оборачивания гибких элементов в гибком контейнере. Можете совсем не оборачивать их (умолчание браузера) с классом .flex-nowrap
, можете обернуть их классом .flex-wrap
или реверсируйте оборачивание с классом .flex-wrap-reverse
.
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>
...
</div>
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>
...
</div>
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>
...
</div>
Отзывчивые вариации есть также для flex-wrap
.
.flex-nowrap
.flex-wrap
.flex-wrap-reverse
.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse
Порядок
Мы создали параметры лишь для придания элементу первого или последнего порядкового положения, как и для сброса данной настройки для использования порядка DOM. Так как order
принимает цифровое значение (например, 5
), добавьте обычный CSS для создания необходимых дополнительных значений.
Первый flex элемент
Второй flex элемент
Третий flex элемент
<div>
<div>Первый flex элемент</div>
<div>Второй flex элемент</div>
<div>Третий flex элемент</div>
</div>
Отзывчивые вариации есть также для order
.
.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-6
.order-7
.order-8
.order-9
.order-10
.order-11
.order-12
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-sm-6
.order-sm-7
.order-sm-8
.order-sm-9
.order-sm-10
.order-sm-11
.order-sm-12
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-md-6
.order-md-7
.order-md-8
.order-md-9
.order-md-10
.order-md-11
.order-md-12
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-lg-6
.order-lg-7
.order-lg-8
.order-lg-9
.order-lg-10
.order-lg-11
.order-lg-12
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xl-6
.order-xl-7
.order-xl-8
.order-xl-9
.order-xl-10
.order-xl-11
.order-xl-12
Выравнивание содержимого
Используйте утилиты align-content
в контейнерах флексбокса, чтобы гибкие элементы выравнивались «вместе» по одной перекрестной оси. Выбирайте из start
(умолчание браузера), end
, center
, between
, around
или stretch
. Чтобы продемонстрировать эти утилиты, мы применили flex-wrap: wrap
и увеличили количество элементов flex.
Внимание! Это свойство не действует на одиночных рядах или одиночных гибких элементах.
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>
...
</div>
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>...</div>
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>...</div>
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>...</div>
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>...</div>
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
Flex элемент
<div>...</div>
Отзывчивые вариации есть также для align-content
.
.align-content-start
.align-content-end
.align-content-center
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-around
.align-content-xl-stretch