Переход к v4

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

Краткое содержание

Тут перечислены моменты, которые вам нужно знать при переходе с версии v3 на v4.

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

• Отброшена поддержка IE8, IE9 и iOS 6. V4 поддерижвает теперь только IE10 + и iOS 7+. Для сайтов, которые нуждаются в одном из них, используйте v3.
• Добавлена официальная поддержка браузера Lollipop v5.0 и WebView. Более ранние версии браузера Android и WebView остаются только неофициально поддерживаемыми.

Глобальные изменения

• По умолчанию Flexbox включен. В общем, это означает переход от floats и многого другого через наши компоненты.
• Переключились с Less на Sass для наших исходных файлов CSS.
• Переключились из px в rem как наш основной блок CSS, хотя пиксели по-прежнему используются для медиа-запросов и поведения сетки, поскольку размер видовых экранов не зависит от размера шрифта.
• Глобальный размер шрифта увеличен с 14px до 16px.
• Добавлен новый уровень сетки для небольших устройств на 576px и ниже (наш новый уровень xs).
• Заменена отдельная необязательная тема с настраиваемыми параметрами через переменные SCSS (например, $enable-gradients: true).

Грид-система

• Добавлена поддержка flexbox в сетке mixins и предопределенные классы.
• В составе flexbox включена поддержка вертикальных и горизонтальных классов выравнивания.
• Реконструированы grid mixinы для объединения make-col-span в make-col для сингулярного mixin.
• Добавлен новый уровень сетки sm ниже 768px для более детального контроля. Теперь у нас есть xs, sm, md, lg, и xl. Это также означает, что каждый уровень был поднят на один уровень (поэтому .col-md-6 в v3 теперь .col-lg-6 в v4).
• Изменены контрольные точки медиа-запросов сетки и ширины контейнера для учета нового уровня сетки и обеспечения того, чтобы столбцы были равномерно делимыми на 12 при максимальной ширине.
• Теперь контрольные точки сетки и ширины контейнера обрабатываются с помощью карт Sass ($grid-breakpoints и $container-max-widths) вместо нескольких отдельных переменных. Они полностью заменяют переменные @screen-* и позволяют полностью настраивать уровни сетки.
• Медиа-запросы также изменились. Вместо того, чтобы каждый раз повторять наши объявления медиа-запросов с одинаковым значением, теперь мы имеем @include media-breakpoint-up/down/only. Теперь, вместо того, чтобы писать @media (min-width: @screen-sm-min) { ... }, вы можете написать @include media-breakpoint-up(sm) { ... }.

Компоненты

• Удалены панели, thumbnails и wells для нового всеохватывающего компонента, карточки.
• Удален значок иконки Glyphicons. Если вам нужны значки, некоторые из них:
  • начальный вариант Glyphicons
  • Octicons
  • Font Awesome
• Удален плагин Affix jQuery. Мы рекомендуем использовать position: sticky вместо polyfill. Смотрите HTML5 Please entry для получения подробной информации и рекомендаций по конкретным polyfill.
  • Если вы использовали Affix для применения дополнительных стилей без-position, polyfills могут не поддерживать ваш вариант использования. Одним из таких вариантов является сторонняя библиотека ScrollPos-Styler.
• Удален компонент пейджера, поскольку он был по существу немного настроенными кнопками.
• Реорганизованы почти все компоненты, чтобы использовать более невложенные классы вместо селекторов детей.

Разное

• Не-адаптивное использование Bootstrap больше не поддерживается.
• Отброшен онлайн-настройщик в пользу более обширной документации по настройке и настраиваемых сборок.

По компоненту

В этом списке перечислены ключевые изменения компонента между v3.x.x и v4.0.0.

Перезагрузка

Новым для Bootstrap 4 является Reboot, новая таблица стилей, которая основывается на нормализации с нашими собственными несколько самоуверенными стилями сброса. Селекторы, отображаемые в этом файле, используют только элементы - здесь нет классов. Это изолирует наши стили сброса от наших стилей компонентов для более модульного подхода. Некоторые из наиболее важных сбросов, которые это включает, изменение box-sizing: border-box, перемещение из em в блоки rem на многих элементах, стилях ссылок и многих сбросах форм элементов.

Типография

• Переместили все .text- утилиты в файл _utilities.scss.
• Удален .page-header поскольку, помимо границы, все его стили можно применять с помощью утилит.
• .dl-horizontalбыл удален. Вместо этого используйте .row на <dl> и используйте классы столбцов сетки (или mixins) для дочерних элементов <dt> и <dd> children.
• Пользовательское моделирование<blockquote> переместилось в классы—.blockquote и модификатор .blockquote-reverse.
• .list-inline теперь требует, чтобы для его элементов списка детей был применен новый класс .list-inline-item.

Изображения

• Переименованы .img-responsive в .img-fluid.
• Переименованы .img-rounded в .rounded
• Переименованы .img-circle в .rounded-circle

Таблицы

• Почти все экземпляры селектора > были удалены, то есть вложенные таблицы теперь автоматически наследуют стили от своих родителей. Это значительно упрощает наши селекторы и потенциальные настройки.
• В адаптивных таблицах больше не требуется оборачивать элемент. Вместо этого просто поставьте .table-responsive прямо на <table>.
• Переименован .table-condensed в .table-sm для согласованности.
• Добавлен новый параметр .table-inverse.
• Добавлены модификаторы заголовков таблицы: .thead-default и .thead-inverse.
• Переименованы контекстные классы, с добавлением префикса .table-. Следовательно, .active, .success, .warning, .danger и .table-info переименованы в .table-active, .table-success, .table-warning, .table-danger и .table-info.

Формы

• Перемещенный элемент сбрасывается в файл _reboot.scss.
• Переименован .control-label в .form-control-label.
• Переименованы .input-lg и .input-sm в .form-control-lg и .form-control-sm, соответственно.
• Удалены классы .form-group-* для простоты. Вместо этого используйте классы .form-control-*.
• Уаделн .help-block и заменен .form-text для блочного справочного текста. Для встроенного справочного текста и других гибких параметров используйте служебные классы, например .text-muted.
• Горизонтальные формы переработаны:
  • Удалено требование класса .form-horizontal.
  • .form-group больше не применяет стили из .row через mixin, поэтому .row теперь требуется для горизонтальных макетов сетки (например, <div class="form-group row">).
  • Добавлен новый класс .form-control-label для вертикально-центральных меток с .form-controls.
• Добавлена поддержка пользовательских форм (для флажков, переключателей, выборов и входных файлов).

Кнопки

• Переименован .btn-default в .btn-secondary.
• Удален класс .btn-xs целиком, поскольку .btn-sm пропорционально намного меньше, чем в v3.
• Функция кнопки состояния плагина jQuery button.js была удалена. Сюда входят методы $().button(string) и $().button('reset') Вместо этого мы советуем использовать небольшой пользовательский JavaScript, который будет иметь преимущество в том, чтобы вести себя именно так, как вы этого хотите.
  • Обратите внимание, что другие функции плагина (флажки кнопок, кнопочные переключатели, кнопки с одним переключателем) были сохранены в v4.

Группа кнопок

• Компонент переписан с flexbox.
• Удален класс .btn-group-xs полностью с учетом удаления .btn-xs.
• Удалены явные интервалы между группами кнопок в панелях инструментов кнопок; теперь используйте утилиты margin.
• Улучшена документация для использования с другими компонентами.

Выпадающие списки

• Переключены из родительских селекторов в особые классы для всех компонентов, модификаторов и т. д.
• Упрощенные стили выпадающих списков больше не поставляются со стрелками вверх или вниз, прикрепленными к раскрывающемуся меню.
• Выпадающие списки теперь можно создавать с помощью <div> или <ul>.
• Перестроены выпадающие стили и разметка для того, чтобы обеспечить удобную встроенную поддержку раскрывающихся элементов на основе <a> и <button>.
• Переименован .divider в .dropdown-divider.
• Выпадающим элементам теперь требуется .dropdown-item.
• Выпадающим переключателям больше не требуется явный <span class="caret"></span>; теперь это предоставляется автоматически через CSS ::after на .dropdown-toggle.

Грид-система

• Добавлена новая точка останова сетки 576px в виде sm, что означает, что теперь есть пять полных уровней (xs, sm, md, lg, и xl).
• Переименоваys классы адаптивных сеток из .col-{breakpoint}-{modifier}-{size} в .{modifier}-{breakpoint}-{size} для более простых классов сетки. Например, вместо .col-md-3.col-md-push-9 это .col-md-3.push-md-9.
• Переработаны грид-mixins, чтобы объединить make-col и make-col-span в один make-col тем самым обеспечив, что mixins и предопределенные классы используют те же самые поведения float/flex.
• Добавлены классы утилиты flexbox для грид-системы и компонентов.

Группы списков

• Компонент переписан с flexbox.
• Заменили a.list-group-item явным классом, .list-group-item-action, для моделирования версий ссылок и кнопок элементов группы списков.
• Добавлен класс .list-group-flush для использования с картами.

Модальные окна

• Компонент переписан с flexbox.
• При перемещении в flexbox выравнивание значков отклоения в заголовке, скорее всего, не работает, поскольку мы больше не используем float. Сначала идет плавающее содержимое, но с flexbox это уже не так. Обновите значки отклоения, чтобы они шли после модальных заголовков, чтобы исправить это.
• Опция remote (которая может использоваться для автоматической загрузки и вставки внешнего контента в модальное окно) и соответствующее событие loaded.bs.modal были удалены. Мы рекомендуем вместо этого использовать клиентскую шаблонизацию или фреймворк привязки данных или вызов самого jQuery.load.

Навигация

• Компонент переписан с flexbox.
• Удалены почти все > селекторы для упрощения стиля через невложенные классы.
• Вместо селекторов, специфичных для HTML, таких как .nav > li > a, мы используем отдельные классы для .nav, .nav-item, и .nav-link. Это делает ваш HTML более гибким при одновременном увеличении расширяемости.

Навигационная панель

Navbar полностью переписан в flexbox с улучшенной поддержкой выравнивания, отклика и настройки.

• Адаптивные поведения navbar теперь применяются к классу .navbar через необходимый .navbar-toggleable-{breakpoint} где вы выбираете, где свернуть навигационную панель. Раньше было меньше модификации переменной и требовалось перекомпиляция.
• .navbar-default теперь .navbar-light, хотя .navbar-inverse остается прежним. Один из них требуется для каждой навигационной панели. Однако эти классы больше не устанавливают background-color; вместо этого они существенно влияют только на color.
• Navbars теперь требует какой-то фоновой декларации. Выберите из наших утилит для фона (.bg-*) или установите свои собственные с помощью классов light / inverse выше для любой кастомизации.
• С учетом стилей flexbox, навигационная панель теперь может использовать утилиты flexbox для упрощения выравнивания.
• .navbar-toggle теперь .navbar-toggler и имеет разные стили и внутреннюю разметку (не более трех <span>).
• Полностью исключен класс .navbar-form. Он больше не нужен; вместо этого просто используйте .form-inline и примените при необходимости margin утилиты.
• По умолчанию навигационная панель не включает поля margin-bottom или border-radius. При необходимости используйте утилиты.
• Все примеры с navbar были обновлены, чтобы включить новую разметку.

Постраничное разделение

• Компонент переписан с flexbox.
• Явные классы (.page-item, .page-link) теперь требуются от потомков .pagination
• Удален компонент .pager целиком, так как он был немного больше, чем настраиваемые кнопки контура.

Навигационная цепочка

• Явный класс, .breadcrumb-item, теперь требуется от потомков .breadcrumb

Ярлыки, значки и теги

• Переименован .label в .tag для устранения неоднозначности из элемента <label>.
• Удален компонент .badge поскольку он почти идентичен ярлыкам / тегам. Вместо этого используйте модификатор .tag-pill вместе с компонентом метки.
• Теги больше не размещаются автоматически в группах списков и других компонентах. Для этого теперь требуются классы утилит.

Панели, thumbnails и wells

Удалены полностью для нового компонента карты.

Панели

• .panel в .card, теперь построенный с flexbox.
• .panel-default удален и не заменен.
• .panel-group удален и не заменен. .card-group - это не замена, они разные
• .panel-heading в .card-header
• .panel-title в .card-title. В зависимости от желаемого вида вы также можете использовать элементы или классы заголовков (например, <h3>, .h3) или полужирные элементы или классы (например, <strong>, <b>, .font-weight-bold). Обратите внимание, что .card-title, хотя и имеет аналогичное имя, производит иной вид, чем .panel-title.
• .panel-body в .card-block
• .panel-footer в .card-footer
• .panel-primary в .card-primary и .card-inverse (или используйте .bg-primary на .card-header)
• .panel-success в .card-success и .card-inverse (или используйте .bg-success на .card-header)
• .panel-info в .card-info и .card-inverse (или используйте .bg-info на .card-header)
• .panel-warning в .card-warning и .card-inverse (или используйте .bg-warning на .card-header)
• .panel-danger в .card-danger и .card-inverse (или используйте .bg-danger на .card-header)

Подсказки

• Удалена поддержка параметров auto размещения.

Информеры

• Удалена поддержка параметров auto размещения.

Карусель

• Переработан весь компонент, чтобы упростить дизайн и стиль. У нас есть меньше стилей для переопределения, новые индикаторы и новые значки.
• Все CSS были невложенными и переименованы, гарантируя каждому классу префикс .carousel-.
  • Для элементов карусели, .next, .prev, .left, и .right теперь являются следующими: .carousel-item-next, .carousel-item-prev, .carousel-item-left, и .carousel-item-right.
  • .item также сейчас .carousel-item.
  • Для prev/next элементов управления .carousel-control.right и .carousel-control.left теперь являются .carousel-control-right и .carousel-control-left, то есть они больше не требуют определенного базового класса.
• Удалены все адаптивные стили, отложенные до утилит (например, показ титров на некоторых видовых экранах) и пользовательские стили по мере необходимости.
• Удалены переопределения изображений для изображений в карусельных элементах, отложенные до утилит.
• Изменен пример Carousel, в него включена новая разметка и стили.

Утилиты

• Утилиты отображения экрана стали адаптивными (например, .d-none и d-{sm,md,lg,xl}-none).
• Добавлены классыd .float-{sm,md,lg,xl}-{left,right,none} для адаптивных floats и удалены .pull-left и .pull-right поскольку они избыточны для .float-left и .float-right.
• Добавлены адаптивные вариации для наших классов выравнивания текста .text-{sm,md,lg,xl}-{left,center,right}.
• Добавлены новые margin auto утилиты для всех сторон, а также вертикальные и горизонтальные сокращения.
• Добавлена boatload утилит flexbox.
• Удален .center-block для нового класса .mx-auto.

Vendor prefix mixins

vendor prefix mixins из Bootstrap 3, которые были исключены в v3.2.0, удалены в Bootstrap 4. Поскольку мы используем Autoprefixer, они больше не нужны.

Удалены следующие mixins: animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens, opacity, perspective, perspective-origin, rotate, rotateX, rotateY, scale, scaleX, scaleY, skew, transform-origin, transition-delay, transition-duration, transition-property, transition-timing-function, transition-transform, translate, translate3d, user-select

Документация

Наша документация также получила обновление по всем направлениям:

• ы по-прежнему используем Jekyll, но у нас есть настраиваемые плагины:
  • example.rb - это fork плагина по умлочанию highlight.rb, позволяющая упростить обработку кода.
  • callout.rb является аналогичным fork, но предназначен для наших специальных выносок документов.
• Все содержимое документов было переписано в Markdown (вместо HTML) для упрощения редактирования.
• Страницы были реорганизованы для более простого контента и более доступной иерархии.
• Мы перешли с обычного CSS на SCSS, чтобы в полной мере использовать переменные Bootstrap, mixins и многое другое.

Адаптивные утилиты

Все @screen- переменные были удалены в v4.0.0. Вместо этого используйте media-breakpoint-up(), media-breakpoint-down(), или media-breakpoint-only() Sass mixins или $grid-breakpoints карту Sass.

Адаптивные классы утилит также были пересмотрены.

• Классы .hidden и .show были удалены, потому что они противоречили методам jQuery $(...).hide() и $(...).show() Вместо этого попробуйте переключить атрибут [hidden], используйте встроенные стили, такие как style="display: none;" и style="display: block;", или переключите класс .invisible.
• Старые классы (.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block) исчезли.
• Они были заменены на .hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down.
• Классы .hidden-*-up скрывают элемент, когда область просмотра находится в заданной точке останова или больше (например, .hidden-md-up скрывает элемент на средних, больших и очень больших устройствах).
• Классы .hidden-*-down скрывают элемент, когда область просмотра находится в данной точке останова или меньше (например, .hidden-md-down скрывает элемент на сверхмалых, малых и средних устройствах).

Вместо того, чтобы использовать явные классы .visible-* вы делаете элемент видимым, просто не скрывая его при этом размере экрана. Вы можете объединить один класс .hidden-*-up с одним классом .hidden-*-down, чтобы отображать элемент только на заданном интервале размеров экрана (например, .hidden-sm-down.hidden-xl-up показывает элемент только на средних и больших устройствах).

Обратите внимание, что изменения точек останова в v4 означают, что вам нужно увеличить одну точку останова для достижения одинаковых результатов (например, .hidden-md больше похожа на .hidden-lg-down, чем на .hidden-md-down). Новые адаптивные классы утилит не пытаются учитывать менее распространенные случаи, когда видимость элемента не может быть выражена как один непрерывный диапазон размеров видового экрана; в этом случае вам понадобится использовать пользовательский CSS.

Различные примечания для определения приоритетов

• Удалена min--moz-device-pixel-ratio для медиа-запросов.
• Измениен [disabled] кнопок на :disabled, так как IE9+ поддерживает :disabled. Однако fieldset[disabled] по-прежнему необходимо, потому что нативные отключенные поля в IE11 по-прежнему неактивны.

TODO: просмотреть список вещей в v3, которые были помечены как устаревшие.

Дополнительные замечания

• Удалена поддержка стилизованных вложенных таблиц (на данный момент)