in English

Мигриране към v5

Проследявайте и преглеждайте промените в изходните файлове, документацията и компонентите на Bootstrap, за да ви помогне да мигрирате от v4 към v5.

На тази страница

Зависимости

Изпуснат jQuery.
Надстроен от Popper v1.x до Popper v2.x.
Заменен Libsass с Dart Sass, тъй като нашият Sass компилатор, даден Libsass, беше отхвърлен.
Мигрирахме от Jekyll към Hugo за изграждане на нашата документация

Поддръжка на браузър

Отпаднаха Internet Explorer 10 и 11
Изпуснат Microsoft Edge < 16 (Legacy Edge)
Отпадна Firefox < 60
Изпуснато Safari < 12
Отпадна iOS Safari < 12
Изпуснат Chrome < 60

Промени в документацията

Преработена начална страница, оформление на документи и долен колонтитул.
Добавено е ново ръководство за парцели .
Добавена е нова секция Персонализиране , заменяща страницата Тема на v4 с нови подробности за Sass, глобални опции за конфигурация, цветови схеми, CSS променливи и др.
Реорганизира цялата документация на формуляра в нов раздел Формуляри , разделяйки съдържанието на по-фокусирани страници.
По подобен начин актуализирахме раздела Офор��ление , за да очертаем по-ясно съдържанието на мрежата.
Страницата на компонента „Navs“ е преименувана на „Navs & Tabs“.
Страницата „Чекове“ е преименувана на „Чекове и радиостанции“.
Преработихме лентата за навигация и добавихме нова поднавигация, за да улесним придвижването из нашите версии на сайтове и документи.
Добавена е нова клавишна комбинация за полето за търсене: Ctrl + /.

дързък

Изхвърлихме стандартните сливания на карти Sass, за да улесним премахването на излишни стойности. Имайте предвид, че сега трябва да дефинирате всички стойности в картите на Sass като $theme-colors. Вижте как да се справите с картите на Sass .
РазбиванеПреименува color-yiq()функцията и свързаните променливи, color-contrast()тъй като вече не е свързана с цветовото пространство на YIQ. Вижте #30168.
- $yiq-contrasted-thresholdсе преименува на $min-contrast-ratio.
- $yiq-text-darkи $yiq-text-lightсе преименуват съответно на $color-contrast-darkи $color-contrast-light.
РазбиванеПараметрите на mixins за медийни заявки са променени за по-логичен подход.
- media-breakpoint-down()използва самата точка на прекъсване вместо следващата точка на прекъсване (напр. media-breakpoint-down(lg)вместо да media-breakpoint-down(md)цели прозорци за изгледи, по-малки от lg).
- По същия начин, вторият параметър в media-breakpoint-between()също използва самата точка на прекъсване вместо следващата точка на прекъсване (напр. media-between(sm, lg)вместо media-breakpoint-between(sm, md)целеви прозорци за изглед между smи lg).
РазбиванеПремахнати стилове на печат и $enable-print-stylesпроменлива. Класовете за показване на печат все още съществуват. Вижте #28339 .
РазбиванеИзпуснати color(), theme-color()и gray()функции в полза на променливи. Вижте #29083 .
Разбиванеtheme-color-level()Функцията е преименувана на color-level()и сега приема всеки цвят, който искате, вместо само $theme-colorцветове. Вижте #29083 Внимавайте: color-level() по-късно беше пуснат в v5.0.0-alpha3.
РазбиванеПреименуван $enable-prefers-reduced-motion-media-queryи $enable-pointer-cursor-for-buttonsна $enable-reduced-motionи $enable-button-pointersза краткост.
РазбиванеПремахна bg-gradient-variant()миксина. Използвайте .bg-gradientкласа, за да добавите градиенти към елементи вместо генерираните .bg-gradient-*класове.
Разбиване Премахнати по-рано отхвърлени миксини:
- hover, hover-focus, plain-hover-focus, иhover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(също премахна свързания клас на полезност, .text-hide)
- visibility()
- form-control-focus()
РазбиванеПреименувана scale-color()функция, за shift-color()да се избегне сблъсък със собствената функция за мащабиране на цветовете на Sass.
box-shadowmixins вече позволяват nullстойности и премахване noneот множество аргументи. Вижте #30394 .
Миксинът border-radius()вече има стойност по подразбиране.

Цветна система

Цветовата система, която работеше color-level()и $theme-color-intervalбеше премахната в полза на нова цветова система. Всички функции lighten()и darken()в нашата кодова база се заменят с tint-color()и shade-color(). Тези функции ще смесват цвета с бяло или черно, вместо да променят яркостта му с фиксирана стойност. Той shift-color()ще оцвети или засенчи цвят в зависимост от това дали параметърът му за тегло е положителен или отрицателен. Вижте #30622 за повече подробности.
Добавени са нови нюанси и нюанси за всеки цвят, предоставяйки девет отделни цвята за всеки основен цвят, като нови променливи на Sass.
Подобрен цветови контраст. Увеличено съотношение на цветовия контраст от 3:1 до 4,5:1 и актуализирани сини, зелени, циан и розови цветове, за да се осигури WCAG 2.1 AA контраст. Също така сменихме нашия цветен контрастен цвят от $gray-900на $black.
За да поддържаме нашата цветова система, ние добавихме нови персонализирани tint-color()и shade-color()функции за подходящо смесване на нашите цветове.

Актуализации на мрежата

Нова точка на прекъсване! Добавена е нова xxlточка на прекъсване за 1400pxи нагоре. Няма промени във всички други точки на прекъсване.
Подобрени улуци. Улуците вече са зададени в rems и са по-тесни от v4 ( 1.5rem, или около 24px, надолу от 30px). Това подравнява улуците на нашата решетъчна система с нашите разстояния.
- Добавен е нов клас улуци ( .g-*, .gx-*, и .gy-*) за управление на хоризонтални/вертикални улуци, хоризонтални и вертикални улуци.
- РазбиванеПреименувано .no-guttersна, за .g-0да съответства на новите помощни програми за улуци.
Колоните вече не са position: relativeприложени, така че може да се наложи да добавите .position-relativeкъм някои елементи, за да възстановите това поведение.
РазбиванеОтпаднаха няколко .order-*класа, които често оставаха неизползвани. Вече предоставяме само .order-1на .order-5извадени от кутията.
РазбиванеКомпонентът е премахнат .media, тъй като може лесно да бъде репликиран с помощни програми. Вижте #28265 и страницата с помощни програми за flex за пример .
Разбиване bootstrap-grid.cssсега се прилага само box-sizing: border-boxкъм колоната, вместо да нулира глобалното оразмеряване на кутията. По този начин нашите стилове на мрежата могат да се използват на повече места без намеса.
$enable-grid-classesвече не забранява генерирането на контейнерни класове. Вижте #29146.
Актуализира make-colмиксина по подразбиране до равни колони без посочен размер.

Съдържание, рестартиране и др

RFS вече е активиран по подразбиране. Заглавията, използващиfont-size()mixin, автоматично ще коригиратfont-sizeмащаба си спрямо прозореца за изглед. Преди това тази функция беше включена с v4.
РазбиванеРевизирахме нашата типография на дисплея, за да заменим нашите $display-*променливи и с $display-font-sizesкарта на Sass. Също така премахнати отделните $display-*-weightпроменливи за единични $display-font-weightи коригирани font-sizes.
Добавени са два нови .display-*размера на заглавията .display-5и .display-6.
Връзките са подчертани по подразбиране (не само при задържане), освен ако не са част от конкретни компоненти.
Преработени таблици, за да обновите стиловете им и да ги възстановите с CSS променливи за повече контрол върху стила.
РазбиванеВложените таблици вече не наследяват стилове.
Разбиване .thead-lightи .thead-darkотпадат в полза на .table-*вариантните класове, които могат да се използват за всички елементи на таблицата ( , thead, tbody, tfootи tr) .thtd
РазбиванеМиксинът table-row-variant()е преименуван на table-variant()и приема само 2 параметъра: $color(име на цвета) и $value(код на цвета). Цветът на рамката и цветовете на акцентите се изчисляват автоматично въз основа на променливите на фактора на таблицата.
Разделете променливите за подпълване на клетките на таблицата в -yи -x.
РазбиванеИзпуснат .pre-scrollableклас. Вижте #29135
Разбиване .text-*помощните програми вече не добавят състояния на задържане и фокус към връзките. .link-*вместо това могат да се използват помощни класове. Вижте #29267
РазбиванеИзпуснат .text-justifyклас. Вижте #29793
Разбиване <hr>елементите сега използват heightвместо borderза по-добра поддръжка на sizeатрибута. Това също позволява използването на помощни програми за подплънки за създаване на по-дебели разделители (напр. <hr class="py-1">).
Нулирайте стандартната хоризонтална позиция padding-leftна <ul>и <ol>елементи от браузъра по подразбиране 40pxна 2rem.
Добавено $enable-smooth-scroll, което се прилага scroll-behavior: smoothглобално—с изключение на потребителите, които искат намалено движение чрез prefers-reduced-motionмедийно запитване. Вижте #31877

RTL

Специфичните за хоризонтална посока променливи, помощни програми и миксини са преименувани, за да използват логически свойства като тези, открити в оформленията на flexbox – напр. startи endвместо leftи right.

Форми

Добавени са нови плаващи форми! Повишихме примера за плаващи етикети до напълно поддържани компоненти на формуляр. Вижте новата страница с плаващи етикети.
Разбиване Консолидирани естествени и персонализирани елементи на формуляр. Квадратчета за отметка, радиостанции, избори и други входове, които са имали естествени и персонализирани класове във v4, са консолидирани. Сега почти всички наши елементи на формуляр са изцяло персонализирани, повечето без нужда от персонализиран HTML.
- .custom-checkсега е .form-check.
- .custom-check.custom-switchсега е .form-check.form-switch.
- .custom-selectсега е .form-select.
- .custom-fileи .form-fileса заменени от персонализирани стилове върху .form-control.
- .custom-rangeсега е .form-range.
- Изпуснати родни .form-control-fileи .form-control-range.
РазбиванеИзпуснат .input-group-appendи .input-group-prepend. Вече можете просто да добавяте бутони и .input-group-textкато директни деца на групите за въвеждане.
Дългогодишният липсващ радиус на границата във входната група с обратна връзка за валидиране най-накрая е коригиран чрез добавяне на допълнителен .has-validationклас към входните групи с валидиране.
Разбиване Отпаднаха специфични за формата класове за оформление за нашата мрежова система. Използвайте нашата мрежа и помощни програми вместо .form-group, .form-rowили .form-inline.
РазбиванеЕтикетите на формуляри вече изискват .form-label.
Разбиване .form-textвече не задава display, което ви позволява да създавате вграден или блокиран помощен текст, както желаете, само като промените HTML елемента.
Иконите за валидиране вече не се прилагат към <select>s с multiple.
Пренаредени изходни Sass файлове под scss/forms/, включително стилове на входни групи.

Компоненти

Унифицирани paddingстойности за предупреждения, навигационни пътеки, карти, падащи менюта, групи списъци, модали, изскачащи съобщения и подсказки, които да се основават на нашата $spacerпроменлива. Вижте #30564 .

Акордеон

Добавен нов компонент за акордеон .

Сигнали

Сигналите вече имат примери с икони .
Премахнати персонализирани стилове за <hr>s във всеки сигнал, тъй като те вече използват currentColor.

Значки

РазбиванеОтпаднаха всички .badge-*цветови класове за фонови помощни програми (напр. използвайте .bg-primaryвместо .badge-primary).
РазбиванеОтпадна — вместо това използвайте помощната програма .badge-pill..rounded-pill
РазбиванеПремахнати стилове за задържане и фокусиране за <a>и <button>елементи.
Увеличена подложка по подразбиране за значки от .25em/ .5emдо .35em/ .65em.

галета

Опростихте външния вид по подразбиране на навигационните трохи чрез премахване paddingна , background-colorи border-radius.
Добавено е ново CSS персонализирано свойство --bs-breadcrumb-dividerза лесно персонализиране, без да е необходимо повторно компилиране на CSS.

Бутони

Разбиване Бутоните за превключване с квадратчета за отметка или радиостанции вече не изискват JavaScript и имат ново маркиране. Вече не се нуждаем от обвиващ елемент, добавете.btn-checkкъм<input>, и го сдвоете с всички.btnкласове на<label>. Вижте #30650 . Документите за това са преместени от нашата страница Бутони в новия раздел Формуляри.
Разбиване Изпуснат .btn-blockза комунални услуги. Вместо да използвате .btn-blockна .btn, обвийте бутоните си с .d-gridи .gap-*помощна програма, за да ги разположите според нуждите. Преминете към отзивчиви класове за още повече контрол върху тях. Прочетете документите за някои примери.
Актуализирахме нашите button-variant()и button-outline-variant()mixins, за да поддържаме допълнителни параметри.
Актуализирани бутони, за да осигурят увеличен контраст при задържане и активни състояния.
Деактивираните бутони вече имат pointer-events: none;.

карта

РазбиванеОтпадна .card-deckв полза на нашата мрежа. Опаковайте картите си в класове колони и добавете родителски .row-cols-*контейнер, за да пресъздадете тестета карти (но с повече контрол върху отзивчивото подравняване).
РазбиванеОтпадна .card-columnsв полза на масонството. Вижте #28922 .
Разбиване.cardБазираният акордеон е заменен с нов компонент за акордеон .

Въртележка

Добавен е нов .carousel-darkвариант за тъмен текст, контроли и индикатори (чудесно за по-светъл фон).
Заменени икони на шеврон за контроли на въртележка с нови SVG от Bootstrap Icons .

Бутон за затваряне

РазбиванеПреименувано .closeна .btn-closeза по-малко родово име.
Бутоните за затваряне вече използват background-image(вграден SVG) вместо a ×в HTML, което позволява по-лесно персонализиране, без да е необходимо да докосвате вашето маркиране.
Добавен е нов .btn-close-whiteвариант, който използва filter: invert(1)за активиране на икони за отхвърляне с по-висок контраст срещу по-тъмен фон.

Свиване

Премахнато закрепване на скрол за акордеони.

падащи менюта

Добавени са нов .dropdown-menu-darkвариант и свързани променливи за тъмни падащи менюта при поискване.
Добавена е нова променлива за $dropdown-padding-x.
Затъмнява падащия разделител за подобрен контраст.
РазбиванеВсички събития за падащото меню вече се задействат от бутона за превключване на падащото меню и след това се извеждат до родителския елемент.
Падащите менюта вече имат data-bs-popper="static"зададен атрибут, когато позиционирането на падащото меню е статично и data-bs-popper="none"когато падащото меню е в навигационната лента. Това се добавя от нашия JavaScript и ни помага да използваме персонализирани стилове на позиция, без да пречи на позиционирането на Popper.
РазбиванеИзпусната flipопция за плъгин за падащо меню в полза на родната конфигурация на Popper. Вече можете да деактивирате поведението на обръщане, като подадете празен масив за fallbackPlacementsопция в модификатора на обръщане .
Падащите менюта вече могат да се кликват с нова autoCloseопция за управление на поведението при автоматично затваряне . Можете да използвате тази опция, за да приемете щракването вътре или извън падащото меню, за да го направите интерактивно.
Падащите менюта вече поддържат .dropdown-items, обвити в <li>s.

Джъмботрон

РазбиванеКомпонентът jumbotron е премахнат, тъй като може да бъде репликиран с помощни програми. Вижте нашия нов пример за Jumbotron за демонстрация.

Списъчна група

Добавен е нов .list-group-numberedмодификатор към списъчните групи.

Навигация и раздели

Добавени са нови nullпроменливи за font-size, font-weight, colorи :hover colorкъм .nav-linkкласа.

Навигационни ленти

РазбиванеНавигационните ленти вече изискват контейнер вътре (за драстично опростяване на изискванията за разстояние и необходимия CSS).

Offcanvas

Добавен е новият компонент offcanvas .

Пагинация

Връзките към страници вече имат възможност за персонализиране margin-left, които са динамично закръглени във всички ъгли, когато са отделени един от друг.
Добавени transitionса s към връзките за страници.

Попови

РазбиванеПреименувано .arrowна .popover-arrowв нашия изскачащ шаблон по подразбиране.
Преименувана whiteListопция на allowList.

Спинери

Спинърите вече почитат prefers-reduced-motion: reduce, като забавят анимациите. Вижте #31882 .
Подобрено вертикално подравняване на центрофугата.

Тостове

Тостовете вече могат да бъдат позиционирани в .toast-containerс помощта на помощните програми за позициониране .
Променена е продължителността на тоста по подразбиране на 5 секунди.
Премахнато overflow: hiddenот тостовете и заменено с подходящи border-radiuss с calc()функции.

Подсказки

РазбиванеПреименувано .arrowна .tooltip-arrowв нашия шаблон за подсказка по подразбиране.
РазбиванеСтойността по подразбиране за fallbackPlacementsе променена на ['top', 'right', 'bottom', 'left']за по-добро разположение на попър елементите.
РазбиванеПреименувана whiteListопция на allowList.

Помощни програми

РазбиванеПреименувани са няколко помощни програми, за да се използват имена на логически свойства вместо имена на насоки с добавяне на RTL поддръжка:
- Преименуван .left-*и .right-*на .start-*и .end-*.
- Преименуван .float-leftи .float-rightна .float-startи .float-end.
- Преименуван .border-leftи .border-rightна .border-startи .border-end.
- Преименуван .rounded-leftи .rounded-rightна .rounded-startи .rounded-end.
- Преименуван .ml-*и .mr-*на .ms-*и .me-*.
- Преименуван .pl-*и .pr-*на .ps-*и .pe-*.
- Преименуван .text-leftи .text-rightна .text-startи .text-end.
РазбиванеДеактивирани отрицателни маржове по подразбиране.
Добавен е нов .bg-bodyклас за бързо настройване на <body>фона на допълнителни елементи.
Добавени са нови помощни програми за позиция за top, right, bottomи left. Стойностите включват 0, 50%и 100%за всяко свойство.
Добавени нови .translate-middle-xи .translate-middle-yпомощни програми за хоризонтално или вертикално центриране на абсолютни/фиксирани позиционирани елементи.
Добавени нови border-widthпомощни програми .
РазбиванеПреименувана .text-monospaceна .font-monospace.
РазбиванеПремахнато .text-hide, тъй като това е остарял метод за скриване на текст, който не трябва да се използва повече.
Добавени .fs-*помощни програми за font-sizeпомощни програми (с активиран RFS). Те използват същия мащаб като заглавията по подразбиране на HTML (1-6, големи към малки) и могат да бъдат модифицирани чрез картата на Sass.
РазбиванеПреименувани .font-weight-*помощни програми .fw-*за краткост и последователност.
РазбиванеПреименувани .font-style-*помощни програми .fst-*за краткост и последователност.
Добавено .d-gridкъм помощни програми за показване и нови gapпомощни програми ( .gap) за CSS Grid и flexbox оформления.
РазбиванеПремахнати .rounded-smи rounded-lg, и въведена нова скала от класове, .rounded-0до .rounded-3. Вижте #31687 .
Добавени са нови помощни line-heightпрограми: .lh-1, .lh-smи .lh-base. .lh-lgВижте тук .
Преместихме .d-noneпомощната програма в нашия CSS, за да й придадем по-голяма тежест в сравнение с други помощни програми за показване.
Разширен .visually-hidden-focusableпомощникът, за да работи и върху контейнери, използвайки :focus-within.

Помощници

Разбиване Отзивчивите помощници за вграждане са преименувани на помощници за съотношения с нови имена на класове и подобрено поведение, както и полезна CSS променлива.
- Класовете са преименувани, за да променят byсъотношението xна страните. Например, .ratio-16by9сега е .ratio-16x9.
- Изхвърлихме .embed-responsive-itemселектора за група елементи и в полза на по-прост .ratio > *селектор. Не е необходим повече клас и помощникът за съотношение вече работи с всеки HTML елемент.
- Картата $embed-responsive-aspect-ratiosSass е преименувана на $aspect-ratiosи нейните стойности са опростени, за да включват името на класа и процента като key: valueдвойка.
- CSS променливите вече се генерират и включват за всяка стойност в картата на Sass. Променете --bs-aspect-ratioпроменливата на , за .ratioда създадете персонализирано съотношение .
Разбиване Класовете „Екранен четец“ вече са „визуално скрити“ класове .
- Променете файла Sass от scss/helpers/_screenreaders.scssнаscss/helpers/_visually-hidden.scss
- Преименуван .sr-onlyи .sr-only-focusableна .visually-hiddenи.visually-hidden-focusable
- Преименуван sr-only()и sr-only-focusable()mixins към visually-hidden()и visually-hidden-focusable().
bootstrap-utilities.cssсега включва и нашите помощници. Вече не е необходимо помощниците да се импортират в персонализирани компилации.

JavaScript

Премахна зависимостта от jQuery и пренаписа плъгините, за да бъдат в обикновен JavaScript.
РазбиванеАтрибутите на данни за всички плъгини на JavaScript вече са с пространство от имена, за да помогнат за разграничаване на функционалността на Bootstrap от трети страни и вашия собствен код. Например използваме data-bs-toggleвместо data-toggle.
Всички добавки вече могат да приемат CSS селектор като първи аргумент. Можете да подадете DOM елемент или всеки валиден CSS селектор, за да създадете нов екземпляр на приставката:
```
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigможе да се предаде като функция, която приема конфигурацията на Popper по подразбиране на Bootstrap като аргумент, така че да можете да обедините тази конфигурация по подразбиране по ваш начин. Прилага се за падащи менюта, изскачащи менюта и подсказки.
Стойността по подразбиране за fallbackPlacementsе променена на ['top', 'right', 'bottom', 'left']за по-добро разположение на елементите на Popper. Прилага се за падащи менюта, изскачащи менюта и подсказки.
Премахнато е подчертаване от публични статични методи като _getInstance()→ getInstance().