Переход на версию 4

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

Стабильные изменения

При переходе от бета-версии 3 к нашей стабильной версии v4.x критических изменений нет, но есть некоторые заметные изменения.

Печать

• Исправлены неработающие утилиты печати. Раньше использование .d-print-*класса неожиданно перевешивало любой другой .d-*класс. Теперь они соответствуют другим нашим утилитам отображения и применимы только к этому носителю ( @media print).

• Расширены доступные утилиты отображения печати, чтобы соответствовать другим утилитам. В бета-версии 3 и старше были только block, inline-block, inlineи none. Добавлена ​​стабильная версия 4 flex, inline-flex, table, table-rowи table-cell.

• Исправлен рендеринг предварительного просмотра печати в браузерах с новыми стилями печати, которые определяют файлы @page size.

Изменения в бета-версии 3

Несмотря на то, что в бета-версии 2 основная часть критических изменений была внесена на этапе бета-тестирования, у нас все еще есть некоторые изменения, которые необходимо было устранить в выпуске бета-версии 3. Эти изменения применяются, если вы обновляетесь до бета-версии 3 с бета-версии 2 или любой более старой версии Bootstrap.

Разнообразный

• Удалена неиспользуемая $thumbnail-transitionпеременная. Мы ничего не переходили, так что это был просто дополнительный код.
• Пакет npm больше не содержит никаких файлов, кроме наших исходных файлов и файлов dist; если вы полагались на них и запускали наши скрипты через node_modulesпапку, вам следует адаптировать свой рабочий процесс.

Формы

• Переписаны как пользовательские, так и стандартные флажки и радио. Теперь у обоих есть совпадающая структура HTML (внешняя <div>с одноуровневым <input>и <label>) и одинаковые стили макета (по умолчанию с накоплением, встроенный с классом модификатора). Это позволяет нам стилизовать метку на основе состояния ввода, упрощая поддержку disabledатрибута (ранее требовавшегося родительского класса) и лучше поддерживая нашу проверку формы.

  В рамках этого мы изменили CSS для управления несколькими background-imageфлажками и переключателями пользовательских форм. Ранее удаленный .custom-control-indicatorэлемент имел цвет фона, градиент и значок SVG. Настройка фонового градиента означала замену всех их каждый раз, когда вам нужно было изменить только один. Теперь у нас есть .custom-control-label::beforeдля заливки и градиента и .custom-control-label::afterобработки значка.

  Чтобы сделать пользовательскую проверку встроенной, добавьте .custom-control-inline.

• Обновленный селектор для групп кнопок на основе ввода. Вместо [data-toggle="buttons"] { }стиля и поведения мы используем dataатрибут только для поведения JS и полагаемся на новый .btn-group-toggleкласс для стиля.

• Удален .col-form-legendв пользу немного улучшенного .col-form-label. Таким образом, .col-form-label-smможно .col-form-label-lgлегко использовать <legend>элементы.

• Пользовательские входные файлы получили изменение в своей $custom-file-textпеременной Sass. Это больше не вложенная карта Sass, и теперь она поддерживает только одну строку — Browseкнопку, поскольку она теперь является единственным псевдоэлементом, сгенерированным из нашего Sass. Теперь Choose fileтекст взят из .custom-file-label.

Входные группы

• Аддоны группы ввода теперь специфичны для их размещения относительно входа. Мы опустили .input-group-addonи .input-group-btnна два новых класса, .input-group-prependи .input-group-append. Теперь вы должны явно использовать добавление или начало, упрощая большую часть нашего CSS. В добавлении или начале разместите свои кнопки так, как они существуют где угодно, но оберните текст в .input-group-text.

• Теперь поддерживаются стили проверки, а также несколько входных данных (хотя вы можете проверить только один вход на группу).

• Классы размеров должны быть в родительском элементе, .input-groupа не в отдельных элементах формы.

Изменения бета 2

Пока мы находимся в бета-версии, мы стремимся не вносить критических изменений. Однако не всегда все идет по плану. Ниже приведены критические изменения, которые следует учитывать при переходе с бета-версии 1 на бета-версию 2.

Ломать

• Удалена $badge-colorпеременная и ее использование в .badge. Мы используем функцию цветового контраста, чтобы выбрать a colorна основе background-color, поэтому переменная не нужна.
• grayscale()Функция переименована , gray()чтобы избежать конфликта с собственным grayscaleфильтром CSS.
• Переименованы .table-inverse, .thead-inverse, и .thead-defaultв .*-darkи .*-light, что соответствует нашим цветовым схемам, используемым в других местах.
• Адаптивные таблицы теперь генерируют классы для каждой точки останова сетки. Это отличается от бета-версии 1 тем, что .table-responsiveвы использовали больше похоже на .table-responsive-md. Теперь вы можете использовать .table-responsiveили .table-responsive-{sm,md,lg,xl}по мере необходимости.
• Прекращена поддержка Bower в качестве менеджера пакетов для альтернатив (например, Yarn или npm). Подробности см. в Bower/bower#2298 .
• Bootstrap по-прежнему требует jQuery 1.9.1 или выше, но вам рекомендуется использовать версию 3.x, так как поддерживаемые браузеры v3.x — это те, которые поддерживает Bootstrap, а v3.x имеет некоторые исправления безопасности.
• Удален неиспользуемый .form-control-labelкласс. Если вы использовали этот класс, он был дубликатом .col-form-labelкласса, который вертикально центрировал a <label>с соответствующим вводом в горизонтальных макетах форм.
• Из миксина color-yiq, включающего colorсвойство, в функцию, возвращающую значение, что позволяет использовать его для любого свойства CSS. Например, вместо color-yiq(#000), вы должны написать color: color-yiq(#000);.

Особенности

• Введено новое pointer-eventsиспользование модальных окон. Внешнее .modal-dialogпроходит через события с помощью pointer-events: noneспециальной обработки кликов (что позволяет просто прослушивать .modal-backdropлюбые клики), а затем противодействует этому фактическому .modal-contentс помощью pointer-events: auto.

Резюме

Вот основные моменты, о которых вам следует знать при переходе с версии 3 на версию 4.

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

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

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

• Flexbox включен по умолчанию. В целом это означает отказ от плавающих значений и многое другое в наших компонентах.
• Перешли с Less на Sass для наших исходных файлов CSS.
• Переключен с pxна в remкачестве нашей основной единицы CSS, хотя пиксели по-прежнему используются для медиа-запросов и поведения сетки, поскольку на области просмотра устройства не влияет размер шрифта.
• Глобальный размер шрифта увеличен с 14pxдо 16px.
• Переработаны уровни сетки, добавлен пятый вариант (обращающийся к устройствам меньшего размера на уровне 576pxи ниже), а также удален -xsинфикс из этих классов. Пример: .col-6.col-sm-4.col-md-3.
• Заменена отдельная необязательная тема на настраиваемые параметры с помощью переменных SCSS (например, $enable-gradients: true).
• Система сборки переработана, чтобы использовать серию скриптов npm вместо Grunt. Ознакомьтесь package.jsonсо всеми сценариями или файлом readme нашего проекта для нужд локальной разработки.
• Использование Bootstrap без ответа больше не поддерживается.
• Отказался от онлайн-настройщика в пользу более подробной документации по настройке и настраиваемых сборок.
• Добавлены десятки новых служебных классов для распространенных пар CSS-свойство-значение и ярлыков для пробелов между отступами и отступами.

Сеточная система

• Перешел на флексбокс.
  • Добавлена ​​поддержка flexbox в миксинах сетки и предопределенных классах.
  • В состав flexbox включена поддержка классов вертикального и горизонтального выравнивания.
• Обновлены имена классов сетки и новый уровень сетки.
  • Добавлен новый smуровень сетки ниже 768pxдля более детального управления. Теперь у нас есть xs, sm, md, lgи xl. Это также означает, что каждый уровень был повышен на один уровень (так что .col-md-6в версии 3 теперь .col-lg-6в версии 4).
  • xsклассы сетки были изменены, чтобы не требовать инфикса для более точного представления того, что они начинают применять стили при, min-width: 0а не при заданном значении пикселя. Вместо .col-xs-6, это сейчас .col-6. Для всех других уровней сетки требуется инфикс (например, sm).
• Обновлены размеры сетки, примеси и переменные.
  • Промежутки сетки теперь имеют карту Sass, поэтому вы можете указать определенную ширину промежутка в каждой контрольной точке.
  • Обновлены примеси сетки для использования make-col-readyподготовительного миксина и make-colдля установки flexи max-widthдля индивидуального размера столбца.
  • Изменены контрольные точки медиа-запросов в системе сетки и ширина контейнера, чтобы учитывать новый уровень сетки и гарантировать, что столбцы равномерно делятся 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) { ... }.

Составные части

• Убраны панели, миниатюры и лунки для нового всеобъемлющего компонента — карточек .
• Удален шрифт значка Glyphicons. Если вам нужны значки, вот некоторые варианты:
  • вышестоящая версия Glyphicons
  • Октиконы
  • Шрифт потрясающий
  • См. страницу «Расширение» для списка альтернатив. Есть дополнительные предложения? Пожалуйста, откройте тему или PR.
• Удален плагин Affix jQuery.
  • position: stickyВместо этого мы рекомендуем использовать . Подробности и конкретные рекомендации по полифиллу см. в статье HTML5 Please . Одно предложение состоит в том, чтобы использовать @supportsправило для его реализации (например, @supports (position: sticky) { ... })
  • Если вы использовали Affix для применения дополнительных positionстилей, полифиллы могут не поддерживать ваш вариант использования. Одним из вариантов такого использования является сторонняя библиотека ScrollPos-Styler .
• Удален компонент пейджера, так как он был по существу немного настроенными кнопками.
• Рефакторинг почти всех компонентов для использования большего количества не вложенных селекторов классов вместо специфических дочерних селекторов.

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

В этом списке отмечены ключевые изменения по компонентам между версиями 3.xx и 4.0.0.

Перезагрузить

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

Типография

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

Картинки

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

Столы

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

Формы

• Перемещенный элемент сбрасывается в _reboot.scssфайл.
• Переименован .control-labelв .col-form-label.
• Переименовал .input-lgи .input-smв .form-control-lgи .form-control-smсоответственно.
• Отброшены .form-group-*классы для простоты. Вместо этого используйте .form-control-*классы прямо сейчас.
• Удалено .help-blockи заменено .form-textтекстом справки на уровне блоков. Для встроенного текста справки и других гибких параметров используйте служебные классы, такие как .text-muted.
• Сбросил .radio-inlineи .checkbox-inline.
• Объединены .checkboxи .radioв .form-checkи различные .form-check-*классы.
• Переработаны горизонтальные формы:
  • Отменил .form-horizontalтребования к классу.
  • .form-groupбольше не применяет стили из .rowмиксина via, поэтому .rowтеперь требуется для горизонтальных макетов сетки (например, <div class="form-group row">).
  • Добавлен новый .col-form-labelкласс для вертикально центрированных меток с .form-controls.
  • Добавлены новые .form-rowмакеты компактных форм с классами сетки (поменяйте .rowих на a .form-rowи вперед).
• Добавлена ​​поддержка пользовательских форм (для флажков, переключателей, выбора и ввода файлов).
• Заменены классы .has-error, .has-warningи .has-successна проверку формы HTML5 с помощью CSS :invalidи :validпсевдоклассов.
• Переименован .form-control-staticв .form-control-plaintext.

Кнопки

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

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

• Переписал компонент с помощью flexbox.
• Удалено .btn-group-justified. В качестве замены вы можете использовать <div class="btn-group d-flex" role="group"></div>как обертку вокруг элементов с расширением .w-100.
• Полностью исключил .btn-group-xsкласс из-за удаления .btn-xs.
• Удален явный интервал между группами кнопок на панелях кнопок; используйте маржинальные утилиты сейчас.
• Улучшена документация для использования с другими компонентами.

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

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

Сеточная система

• Добавлена ​​новая 576pxточка останова сетки как sm, что означает, что теперь всего пять уровней ( xs, sm, md, lgи xl).
• Классы модификаторов адаптивной сетки переименованы с .col-{breakpoint}-{modifier}-{size}на .{modifier}-{breakpoint}-{size}более простые классы сетки.
• Убраны классы модификаторов push и pull для новых классов на основе flexbox order. Например, вместо .col-8.push-4и .col-4.pull-8вы должны использовать .col-8.order-2и .col-4.order-1.
• Добавлены служебные классы flexbox для системы сеток и компонентов.

Список групп

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

Модальный

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

Навигация

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

Навбар

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

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

Пагинация

• Переписал компонент с помощью flexbox.
• Явные классы ( .page-item, .page-link) теперь требуются для потомков .paginations
• Компонент .pagerполностью удален, так как он представляет собой не более чем настраиваемые кнопки контура.

Панировочные сухари

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

Этикетки и значки

• Консолидация .labelи .badgeустранение неоднозначности <label>элементов и упрощение связанных компонентов.
• Добавлен .badge-pillв качестве модификатора для округлой «таблетки».
• Значки больше не размещаются автоматически в группах списков и других компонентах. Для этого теперь требуются служебные классы.
• .badge-defaultбыл удален и .badge-secondaryдобавлен, чтобы соответствовать классам модификаторов компонентов, используемым в других местах.

Панели, эскизы и лунки

Полностью исключен из-за нового компонента карты.

Панели

• .panelto .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-body
• .panel-footerк.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warningи .panel-dangerбыли исключены из-за .bg-, .text-, и .borderутилит, сгенерированных из нашей $theme-colorsкарты Sass.

Прогресс

• Заменены контекстные .progress-bar-*классы .bg-*утилитами. Например, class="progress-bar progress-bar-danger"становится class="progress-bar bg-danger".
• Заменены .activeанимированные индикаторы выполнения на .progress-bar-animated.

Карусель

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

Столы

• Удалена поддержка стилизованных вложенных таблиц. Все стили таблиц теперь унаследованы в v4 для более простых селекторов.
• Добавлен вариант обратной таблицы.

Утилиты

• Показать, скрыть и многое другое:
  • Утилиты отображения стали отзывчивыми (например, .d-noneи d-{sm,md,lg,xl}-none).
  • Выброшена основная масса .hidden-*утилит на новые утилиты отображения . Например, вместо .hidden-sm-up, используйте .d-sm-none. Утилиты переименованы, .hidden-printчтобы использовать схему именования утилит отображения. Более подробная информация находится в разделе « Отзывчивые утилиты » на этой странице.
  • Добавлены .float-{sm,md,lg,xl}-{left,right,none}классы для отзывчивых поплавков и удалены .pull-left, .pull-rightпоскольку они избыточны для .float-leftи .float-right.
• Тип:
  • В наши классы выравнивания текста добавлены адаптивные варианты .text-{sm,md,lg,xl}-{left,center,right}.
• Выравнивание и интервал:
  • Добавлены новые адаптивные утилиты полей и отступов для всех сторон, а также вертикальные и горизонтальные сокращения.
  • Добавлено множество утилит flexbox .
  • Перешел .center-blockв новый .mx-autoкласс.
• Clearfix обновлен, чтобы отказаться от поддержки старых версий браузера.

Примеси префиксов поставщиков

Примеси префиксов поставщиков Bootstrap 3 , которые устарели в версии 3.2.0, были удалены в Bootstrap 4. Поскольку мы используем Autoprefixer , они больше не нужны.

Удалены следующие миксины : 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,translate3duser-select

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

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

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

Отзывчивые утилиты

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

Наши отзывчивые служебные классы в значительной степени были удалены в пользу явных displayслужебных программ.

• Классы .hiddenи .showбыли удалены, поскольку они конфликтовали с jQuery $(...).hide()и $(...).show()методами. Вместо этого попробуйте переключить [hidden]атрибут или использовать встроенные стили, такие как style="display: none;"и style="display: block;".
• Все .hidden-классы были удалены, за исключением утилит печати, которые были переименованы.
  • Удалено из v3:.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
  • Удалено из версии 4 альфа:.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-или .visible-, а начинаются с .d-print-.
  • Старые названия: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • Новые классы: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

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

Обратите внимание, что изменения в точках останова сетки в версии 4 означают, что вам нужно увеличить точку останова на одну, чтобы добиться тех же результатов. Новые отзывчивые служебные классы не пытаются приспособить менее распространенные случаи, когда видимость элемента не может быть выражена как единый непрерывный диапазон размеров окна просмотра; вместо этого вам нужно будет использовать пользовательский CSS в таких случаях.