Рекомендации о том, как перейти от Bootstrap v3.х v4.х с акцентом на серьезные изменения, что нового, и то, что было удалено.
Bootstrap 4 является основным переписать почти весь проект. Наиболее заметные изменения суммируются непосредственно ниже, затем более конкретных классов и поведенческие изменения соответствующих компонентов.
Внимание! это будет в поток, работа на v4 Альфа прогрессирует. До тех пор считать ее неполной, и мы бы с удовольствием запросы, чтобы помочь держать его в курсе.
Вот несколько больших билет пунктов вы хотите быть в курсе при переходе от v3 на v4.
px для rem в качестве основной CSS блока, хотя и пикселей используются до сих пор для медиа запросы и грид поведение как видовых экранов не влияет на размер типа.14px для 16px.480px и ниже уровня.$enable-gradients: true).$enable-flex: true и перекомпилировать) в грид примесей и предопределенных классов.make-col-span в make-col Для сингулярных mixin.sm грид уровень ниже 768px Для более детального контроля. Сейчас у нас xs, sm, md, lg, и xl. Это также означает, что каждый ярус был увеличен на один уровень вверх (так .col-md-6 в v3 сейчас .col-lg-6 в v4).12 на максимум Ширина.$grid-breakpoints и $container-max-widths), а не кучки отдельных переменных. Эти заменить @screen-* переменные и позволит вам полностью настроить грид уровня.@include media-breakpoint-up/down/only. Теперь, вместо того, чтобы писать @media (min-width: @screen-sm-min) { ... }, Вы можете написать @include media-breakpoint-up(sm) { ... }.position: sticky полифилл вместо. Смотрите на HTML5, пожалуйста, запись для подробной информации и конкретных рекомендаций полифилл.
position стили, на полифиллы может не поддерживать ваш случай использования. Одним из вариантов такого использования является сторонним ScrollPos-Стайлер библиотеки.Этот список основных изменений по компонентам между v3.х.х и v4.0.0.
Новичок в Bootstrap 4 это перезагрузки, новую таблицу стилей, которая основывается на нормализации с нашей собственной несколько самоуверенных типов сброса. Селекторы появляться в этом файле, использовать только элементы—здесь нет классов. Это изолирует наши стили сбросить с наших компонентов стили для более модульный подход. Некоторые из наиболее важных сбрасывает это включает в себя такие 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.> селектора были удалены, означая, вложенной таблицы теперь автоматически наследуют стили от родителей. Это значительно упрощает наши селекторы и возможных настроек..table-responsive на <table>..table-condensed для .table-sm Для последовательности..table-inverse опция..table-reflow опция..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-control..btn-default для .btn-secondary..btn-xs только как .btn-sm пропорционально гораздо меньше, чем v3.button.js jQuery плагин был удален. Это включает в себя $().button(string) и 3 методы. Мы рекомендуем использовать немного нестандартная JavaScript вместо, которые будут вести себя именно так, как вы хотите.
.btn-group-xs и .btn-xs.<div> или <ul> теперь.<a> и <button> на основе выпадающих пунктов..divider для .dropdown-divider..dropdown-item.<span class="caret"></span>; это теперь автоматически через CSS’ы ::after на .dropdown-toggle.~480px грид точки останова, то есть сейчас всего пять ярусов..col-{breakpoint}-{modifier}-{size} для .{modifier}-{breakpoint}-{size} Для проще грид классов. Например, вместо .col-md-3.col-md-push-9 это col-md-3.push-md-9.make-col и make-col-span В одного make-col mixin, тем самым обеспечивая миксины и предопределенных классов использовать один и тот же поплавок/гибкий поведения.a.list-group-item с явной класс, .list-group-item-action, для укладки ссылку и кнопку версии список элементов группы.remote вариант (которое может быть использовано для автоматической загрузки и ввести внешнее содержание в модальное окно) и соответствующий loaded.bs.modal мероприятия были удалены. Вместо этого мы рекомендуем использовать шаблоны на стороне клиента или привязки данных фреймворк, или вызов на jQuery.загрузить себя.> селекторы для упрощения укладки через классы невложенным..nav > li > a, то использовать отдельные классы для .nav .nav-item и .nav-link. Это делает HTML-код более гибким и вместе с повышенной растяжимости..navbar-form. В этом больше нет необходимости..page-item, .page-link) требуются потомки .pagination.pager компонент целиком, как это было чуть более настроенный контур кнопки..breadcrumb-item, требуется теперь на потомков .breadcrumb.label для .tag для разрешения неоднозначности из <label> элемент..badge - компонентом, так как он был почти идентичен метки/теги. Используйте .tag-pill модификатор вместе с компонентом Label, а не для того закругленными углами.Полностью за новый компонент карты.
.panel для .card.panel-default сняли, а замены нет.panel-group сняли, а замены нет. .card-group не замена, это другое..panel-heading для .card-header.panel-title для .card-header. В зависимости от желаемого вида, Вы также можете использовать Заголовок элементы или классы (например, <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).item для .carousel-item..pull-{xs,sm,md,lg,xl}-{left,right,none} классы для aдаптивный поплавки и удален .pull-left и .pull-right, поскольку они избыточны для .pull-xs-left и .pull-xs-right..text-{xs,sm,md,lg,xl}-{left,center,right} и удалены избыточные .text-{left,center,right} утилиты как же xs вариант..center-block нового .m-x-auto класс.Bootstrap 3 по префикс поставщика миксины, которые были упразднены в V3.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, translate3d, user-select
Наши документы получили обновление ПО, а также. Вот низким вниз:
example.rb вилка по умолчанию highlight.rb плагин, что облегчает пример кода обработки.callout.rb аналогичная вилка, но предназначен для наши специальные документы выноски.Мы добавили новые компоненты и изменены некоторые существующие. Здесь представлены новые и обновленные стили.
| Компонент | Описание |
|---|---|
| Cards | Новый, более гибкий компонент для замены панелей v3, эскизы и скважин. |
| New navbar | Заменяет предыдущую navbar с новой, проще компонента. |
| New progress bars | Заменяет старый .progress <div> Настоящий <progress> элемент. |
| New table variants | Добавляет .table-inverse, таблица вариантов головы, заменяет .table-condensed с .table-sm и .table-reflow. |
| New utility classes |
ТОДО: новые классы ревизии, которых не было в v3
Следующие компоненты были удалены в v4.0.0.
| Компонент | Удалены от 3.х.х | 4.0.0 эквивалент |
|---|---|---|
| Panels | Cards | |
| Thumbnails | Cards | |
| Wells | Cards | |
| Justified navs |
ТОДО: курсы аудита в V3, что нет в v4
Все @screen- переменные были убраны в v4.0.0. Используйте media-breakpoint-up(), media-breakpoint-down() или media-breakpoint-only() Sass примесей или $grid-breakpoints Sass карты вместо.
В aдаптивный служебные классы также были капитально отремонтированы.
.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). Новый aдаптивный служебные классы не пытайтесь вместить в менее распространенных случаях, когда видимость элемента не может быть выражено как один непрерывный диапазон размеров области просмотра; вместо этого, вы должны использовать пользовательские CSS в таких случаях.
min--moz-device-pixel-ratio опечатка Hack для сетчатки медиа запросы[disabled] для :disabled как в IE9+ поддержка :disabled. Однако fieldset[disabled] еще необходимо потому, что родной fieldsets отключенным багги в ie11.ТОДО: перечень вещей в V3, который был помечен как устаревший