Бутстрап сетка что это – Почему лучше использовать вместо BootStrap CSS Grid: особенности создания макетов — Вебджем.рф

Содержание

Шаблон. Документация 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	20px
Планшеты	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

От автора: до того, как я открыл для себя 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 Grid с сеткой Bootstrap

для большого экрана

Объединение CSS Grid с сеткой Bootstrap

маленький экран (мобильное представление)

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

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

Узнать подробнее

Сетка Bootstrap позволяет размещать в строке до 12 столбцов. На большом экране четыре столбца располагаются рядом. Каждый столбец занимает 3 единицы из 12 столбцов.

Объединение CSS Grid с сеткой Bootstrap

большой экран > 1000 пикселей

Объединение CSS Grid с сеткой Bootstrap

планшеты

На среднем экране столбцы теперь занимают 6 единиц, общие 12 столбцов поделить на два столбца.

Объединение CSS Grid с сеткой Bootstrap

мобильное представление

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

Автор: Barri Sambaris

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

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

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

Узнать подробнее Объединение CSS Grid с сеткой Bootstrap

Фреймворк 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 элемент

<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 элемент

<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 элемент

<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 элемент

<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 элемент

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Третий Flex элемент</div>
</div>

Используйте классы .flex-shrink-* для переключения возможности гибких элементов уменьшаться, если необходимо. В примере ниже второй гибкий элемент класса .flex-shrink-1 «принуждается» оборачивать свое содержимое новой строкой, «уменьшаясь» и оставляя больше места для предыдущего гибкого элемента класса .w-100.

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 элемент

<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 элемент

<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 элемент

<div>
  ...
</div>

Flex элемент

<div>
  ...
</div>

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 элемент

<div>
  ...
</div>

Flex элемент

<div>...</div>

Flex элемент

<div>...</div>

Flex элемент

<div>...</div>

Flex элемент

<div>...</div>

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!

<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

Направление

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 элемент 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

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

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

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

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 элемент

Выровненный элемент 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 элемент

<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>

С элементами выравнивания

Flex элемент

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

<div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
  <div>Flex элемент</div>
</div>

Обертка

Flex элемент

<div>
  ...
</div>

Flex элемент

<div>
  ...
</div>

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

Порядок

Первый 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

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

Внимание! Это свойство не действует на одиночных рядах или одиночных гибких элементах.

Flex элемент

<div>
  ...
</div>

Flex элемент

<div>...</div>

Flex элемент

<div>...</div>

Flex элемент

<div>...</div>

Flex элемент

<div>...</div>

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

Бутстрап сетка что это – Почему лучше использовать вместо BootStrap CSS Grid: особенности создания макетов

Шаблон. Документация Bootstrap 2.3.2

Необходим HTML5 doctype

Оформление и ссылки

Сбрасывание браузерных дефолтов через Normalize

Живой пример сетки

Основа HTML-сетки

Отключение колонок

Вложенные колонки

Живой пример резиновых колонок

HTML-Основа для плавающей сетки шаблона

Отключение колонн в плавающей сетке

Вложение колонн в плавающую сетку

Фиксированный шаблон

Плавающий (резиновый) шаблон

Как использовать?

Подробнее о динамическом дизайне

Поддерживаемые устройства

Поддерживаемые классы

Когда использовать?

Тестирование

Виден на...

Скрыт на...

преимущества и недостатки сеток, возможность объединения

Фреймворк Bootstrap 4. Быстрый старт

Flex. Утилиты · Bootstrap

Задействуйте «гибкое» поведение

Направление

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

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

Сплошное выравнивание

Наполнение

Увеличение и уменьшение

Авто-марджины

С элементами выравнивания

Обертка

Порядок

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

Flex. Утилиты · Bootstrap. Версия v4.0.0

Задействуйте «гибкое» поведение

Направление

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

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

Align self

Авто-марджины

С элементами выравнивания

Обертка

Порядок

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

Добавить комментарий Отменить ответ

Рубрики