Прескокнете до главната содржина Прескокнете до навигацијата со документи
in English

Мигрирање на v5

Следете и прегледувајте ги промените во изворните датотеки, документацијата и компонентите на Bootstrap за да ви помогнат да мигрирате од v4 на v5.

На оваа страница

Зависности

  • Исфрлен jQuery.
  • Надградено од Popper v1.x на Popper v2.x.
  • Го замени Libsass со Dart Sass бидејќи нашиот компајлер Sass даден Libsas беше застарен.
  • Мигриравме од Џекил во Хуго за изградба на нашата документација

Поддршка на прелистувачот

  • Исфрлен Internet Explorer 10 и 11
  • Исфрлен Microsoft Edge < 16 (наследен раб)
  • Испадна Firefox < 60
  • Исфрлен Safari < 12
  • Исфрлен iOS Safari < 12
  • Исфрлен Chrome < 60

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

  • Редизајнирана почетна страница, распоред на документи и подножје.
  • Додаден е нов водич за парцела .
  • Додаден е нов дел Приспособување , заменувајќи ја страницата Theming на 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.

  • КршењеПараметрите за мешање на барањето за медиуми се променети за пологичен пристап.

    • 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-shadowмиксините сега дозволуваат 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и нагоре. Нема промени на сите други точки на прекин.

  • Подобрени олуци. Олуците сега се поставени во ремс и се потесни од v4 ( 1.5rem, или околу 24px, надолу од 30px). Ова ги усогласува олуците на нашиот мрежен систем со нашите услуги за растојание.

    • Додадена е нова класа на олуци ( .g-*, .gx-*, и .gy-*) за контрола на хоризонтални/вертикални олуци, хоризонтални олуци и вертикални олуци.
    • КршењеПреименувано .no-guttersво за .g-0да одговара на новите комунални услуги за олук.

  • Колоните веќе не се position: relativeприменуваат, па можеби ќе треба да додадете .position-relativeна некои елементи за да го вратите тоа однесување.

  • КршењеИспушти неколку .order-*часови кои често остануваа неискористени. Сега обезбедуваме само .order-1надвор .order-5од кутијата.

  • КршењеЈа исфрли .mediaкомпонентата бидејќи може лесно да се реплицира со комуналните услуги. Видете #28265 и страницата на flex utilities за пример .

  • Кршење bootstrap-grid.cssсега се однесува само box-sizing: border-boxна колоната наместо да се ресетира глобалната големина на кутијата. На овој начин, нашите стилови на мрежа може да се користат на повеќе места без пречки.

  • $enable-grid-classesповеќе не го оневозможува генерирањето класи на контејнери. Видете #29146.

  • Миксинот го make-colажурираше стандардно на еднакви колони без одредена големина.

Содржина, рестартирање, итн

  • RFS сега е стандардно овозможен. Насловите што користатfont-size()миксин автоматски ќе ги приспособат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, thи td).

  • КршењеМиксинот 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()миксини за поддршка на дополнителни параметри.

  • Ажурирани копчиња за да се обезбеди зголемен контраст при лебдењето и активните состојби.

  • Оневозможените копчиња сега имаат pointer-events: none;.

Картичка

  • КршењеПадна .card-deckво корист на нашата мрежа. Завиткајте ги вашите картички во класи на колони и додајте родителски .row-cols-*контејнер за да ги рекреирате палубите со картички (но со поголема контрола врз одговорното усогласување).

  • КршењеПадна .card-columnsво корист на ѕидарството. Видете #28922 .

  • КршењеЗаменет е .cardхармоника со нова компонента за хармоника .

  • Додадена е нова .carousel-darkваријанта за темен текст, контроли и индикатори (одлична за посветла позадина).

  • Заменети се иконите на шевронот за контролите на рингишпил со нови SVG од Bootstrap Icons .

Копче за затворање

  • КршењеПреименувано .closeво .btn-closeза помалку генеричко име.

  • Копчињата за затворање сега користат background-image(вграден SVG) наместо a &times;во HTML, што овозможува полесно прилагодување без потреба да се допира вашата ознака.

  • Додадена е нова .btn-close-whiteваријанта што користи filter: invert(1)за овозможување на икони за отфрлање повисок контраст против потемна позадина.

Колапс

  • Отстрането закотвување на свитокот за хармоника.

  • Додадена е нова .dropdown-menu-darkваријанта и придружни променливи за темни спуштања по барање.

  • Додадена е нова променлива за $dropdown-padding-x.

  • Го затемни паѓачкиот делител за подобрен контраст.

  • КршењеСите настани за паѓачкото мени сега се активираат на паѓачкото копче за вклучување, а потоа се додаваат до родителскиот елемент.

  • Паѓачките менија сега имаат поставено data-bs-popper="static"атрибут кога позиционирањето на паѓачкото мени е статично и data-bs-popper="none"кога паѓачкото е во лентата за навигација. Ова е додадено од нашиот JavaScript и ни помага да користиме сопствени стилови на позиција без да се мешаме во позиционирањето на Попер.

  • КршењеИспуштена flipопција за паѓачки приклучок во корист на домашната конфигурација на Popper. Сега можете да го оневозможите однесувањето на превртување со предавање на празна низа за fallbackPlacementsопција во модификаторот за превртување .

  • Паѓачките менија сега може да се кликнат со нова autoCloseопција за справување со однесувањето на автоматско затворање . Можете да ја користите оваа опција за да го прифатите кликнувањето внатре или надвор од паѓачкото мени за да го направите интерактивно.

  • Паѓањата сега поддржуваат .dropdown-items завиткани во <li>s.

Џамботрон

Листа група

  • Додадени се нови nullпроменливи за font-size, font-weight, colorи :hover colorво .nav-linkкласата.
  • КршењеНа Navbars сега е потребен контејнер внатре (за драстично да се поедностават барањата за растојание и потребно е CSS).

Offcanvas

Пагинација

  • Врските за пагинација сега имаат можност за приспособување margin-leftкои се динамично заоблени на сите агли кога се одделени еден од друг.

  • Додадени transitions на врските за страници.

Поповери

  • КршењеПреименувано .arrowво .popover-arrowво нашиот стандарден поповер шаблон.

  • Преименувана whiteListопција во allowList.

Спинери

  • Спинерите сега ги почитуваат prefers-reduced-motion: reduceсо забавување на анимациите. Видете #31882 .

  • Подобрено вертикално порамнување на центрифугата.

Тостови

  • Тостовите сега можат да се стават во а .toast-containerсо помош на алатки за позиционирање .

  • Го промени стандардното времетраење на тост на 5 секунди.

  • Отстранет overflow: hiddenод тостови и заменет со соодветни border-radiuss со calc()функции.

Совети за алатки

  • КршењеПреименувано .arrowво .tooltip-arrowво нашиот стандарден шаблон за совети за алатки.

  • КршењеСтандардната вредност за the 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да креирате каков било прилагоден сооднос .

  • Кршење Класите „Screen Reader“ сега се „визуелно скриени“ класи .

    • Ја смени датотеката 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()се меша во 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 како аргумент, за да можете да ја споите оваа стандардна конфигурација на ваш начин. Важи за паѓачки мени, поповери и совети за алатки.

  • Стандардната вредност за the fallbackPlacementsсе менува во ['top', 'right', 'bottom', 'left']за подобро поставување на Popper елементите. Важи за паѓачки мени, поповери и совети за алатки.

  • Отстрането подвлекување од јавни статични методи како _getInstance()→ getInstance().