Skip to main content

C чего начать

Обзор Bootstrap, в том числе, как загрузить и использовать его, некоторые основные шаблоны и примеры, и многое другое.

Flexbox

В Bootstrap наконец то появилась поддержка Flexbox. Подписаться на новые CSS разметка стили с движением переменной или поменять в таблице стилей.

Содержание

Что входит

Flexbox поддержка доступна по ряду Bootstrap компоненты:

  • Целая блочная система (миксины и предопределенные классы), которые включают от floats к display: flex;.
  • Входные группы, которые начиная от display: table; доdisplay: flex;.
  • В медиа компоненте движется от display: table; и ряд ломаные стили для простого display: flex;.

Вендорных префиксов представлены в нашем составитель CSS С Autoprefixer через Grunt. Некоторые ошибки в ie10-11-х Flexbox реализация обойти с помощью postcss-flexbugs-fixes.

Почему flexbox?

В двух словах, flexbox обеспечивает более простым и гибким разметка параметры CSS. Более конкретно, оно обеспечивает:

  • Простое вертикальное выравнивание содержания в родительском элементе.
  • Легко переупорядочивание содержимого на различных устройствах и разрешениях экрана с помощью медиа запросов.
  • Просто CSS-only равной высоте колонок для грид основе разметки.

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

Как это работает

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

  1. Откройте _variables.scss файл и найдите $enable-flex переменную.
  2. Измените его с false для true.
  3. Перекомпилируйте, и готово!

Кроме того, если вам не нужен исходный код Sass файлов, можно поменять по умолчанию значение Bootstrap составлено CSS с собранным flexbox вариации. Перейдите на страницу загрузок для получения дополнительной информации.

Поддержка браузеров

Позволяя flexbox означает уменьшена поддержка браузеров и устройств:

  • Internet Explorer 9 и ниже не поддерживают flexbox.
  • Internet Explorer 10 имеет некоторые причуды (см. раздел “известные проблемы” на вкладке в Я могу использовать...), требует использования префикса, и поддерживает только синтаксис от старой, 2012 версии спецификаций.

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