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

Миграција на в5

Пратите и прегледајте промене у изворним датотекама Боотстрап-а, документацији и компонентама које ће вам помоћи да пређете са в4 на в5.

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

Зависности

  • Избачен јКуери.
  • Надограђен са Поппер в1.к на Поппер в2.к.
  • Либсасс је замењен Дарт Сасс-ом јер је наш Сасс компајлер с обзиром да је Либсасс застарео.
  • Мигрирали смо са Џекила у Хуго ради израде наше документације

Подршка за претраживач

  • Избачени су Интернет Екплорер 10 и 11
  • Избачен Мицрософт Едге < 16 (Легаци Едге)
  • Одбачен Фирефок < 60
  • Одбачен Сафари < 12
  • Избачен иОС Сафари < 12
  • Одбачен Цхроме < 60

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

  • Редизајнирана почетна страница, изглед докумената и подножје.
  • Додат је нови водич за пакете .
  • Додан је нови одељак за прилагођавање , који замењује страницу Тхеминг в4 , са новим детаљима о Сасс-у, опцијама глобалне конфигурације, шемама боја, ЦСС варијаблама и још много тога.
  • Реорганизована је сва документација обрасца у нови одељак Обрасци , раздвајајући садржај на више фокусиране странице.
  • Слично, ажурирајте одељак Лаиоут , да бисте јасније приказали садржај мреже.
  • Страница компоненте „Навс“ је преименована у „Навс & Табс“.
  • Страница „Чекови“ је преименована у „Чекови и радио“.
  • Редизајнирали смо навигациону траку и додали нову поднав да бисмо олакшали обилажење наших веб локација и верзија докумената.
  • Додата нова пречица на тастатури за поље за претрагу: Ctrl + /.

Сасс

  • Одбацили смо подразумевано спајање Сасс мапа да бисмо олакшали уклањање сувишних вредности. Имајте на уму да сада морате да дефинишете све вредности у Сасс мапама као што је $theme-colors. Погледајте како да се носите са Сасс мапама .

  • Бреакингcolor-yiq()Функција и сродне варијабле су преименоване у color-contrast()јер више није повезана са ИИК простором боја. Погледајте #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()да би се избегла колизија са Сассовом сопственом функцијом скалирања боја.

  • box-shadowмиксини сада дозвољавају nullвредности и испадају noneиз више аргумената. Погледајте #30394 .

  • Микин border-radius()сада има подразумевану вредност.

Систем боја

  • Систем боја који је радио color-level()и $theme-color-intervalуклоњен је у корист новог система боја. Све lighten()и darken()функције у нашој бази кодова су замењене са tint-color()и shade-color(). Ове функције ће мешати боју са белом или црном уместо да мењају њену светлост за фиксну количину. Боја shift-color()ће или нијансирати или затамнити боју у зависности од тога да ли је њен параметар тежине позитиван или негативан. Погледајте #30622 за више детаља.

  • Додате нове нијансе и нијансе за сваку боју, обезбеђујући девет одвојених боја за сваку основну боју, као нове Сасс варијабле.

  • Побољшан контраст боја. Однос контраста боја је повећан са 3:1 на 4,5:1 и ажуриране плаве, зелене, цијан и розе боје да би се обезбедио ВЦАГ 2.1 АА контраст. Такође смо променили боју контраста боја са $gray-900на $black.

  • Да бисмо подржали наш систем боја, додали смо нове прилагођене tint-color()и shade-color()функције за одговарајуће мешање боја.

Ажурирања мреже

  • Нова тачка прекида! Додата нова xxlтачка прекида за 1400pxи навише. Нема промена у свим осталим тачкама прекида.

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

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

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

  • БреакингНапустио неколико .order-*часова који су често остајали неискоришћени. Сада пружамо само .order-1ван .order-5кутије.

  • БреакингИзбачен је .mediaкомпонента јер се лако може реплицирати услужним програмима. Погледајте #28265 и страницу флек утилитиес за пример .

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

  • $enable-grid-classesвише не онемогућава генерисање класа контејнера. Погледајте #29146.

  • Миксин је make-colажуриран на подразумеване на једнаке колоне без одређене величине.

Садржај, поновно покретање итд

  • РФС је сада подразумевано омогућен. Наслови који користеfont-size()мешавину ће аутоматски прилагодити својеfont-sizeразмере са оквиром за приказ. Ова функција је раније била укључена у в4.

  • БреакингРемонтовали смо типографију екрана да бисмо заменили наше $display-*варијабле и $display-font-sizesСасс мапу. Такође су уклоњене појединачне $display-*-weightваријабле за један $display-font-weightи прилагођен font-sizeс.

  • Додате су две нове .display-*величине наслова .display-5и .display-6.

  • Везе су подразумевано подвучене (не само при лебдењу), осим ако нису део одређених компоненти.

  • Редизајниране табеле да освеже своје стилове и поново их саграде помоћу ЦСС променљивих за већу контролу над стилизовањем.

  • БреакингУгнежђене табеле више не наслеђују стилове.

  • Бреакинг .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

РТЛ

  • Променљиве, услужни програми и миксинови специфични за хоризонтални правац су преименовани да користе логичка својства попут оних у флексбокс распоредима—нпр. startи endуместо leftи right.

Формс

  • Додате нове плутајуће форме! Промовисали смо пример плутајућих ознака на потпуно подржане компоненте обрасца. Погледајте нову страницу са плутајућим ознакама.

  • Бреакинг Консолидовани изворни и прилагођени елементи обрасца. Поље за потврду, радио, избори и други улази који су имали изворне и прилагођене класе у в4 су консолидовани. Сада су скоро сви наши елементи обрасца потпуно прилагођени, већина без потребе за прилагођеним ХТМЛ-ом.

    • .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, што вам омогућава да креирате уметнути или блокирани текст помоћи по жељи само променом ХТМЛ елемента.

  • Иконе за валидацију се више не примењују на <select>с са multiple.

  • Преуређене изворне Сасс датотеке под scss/forms/, укључујући стилове групе за унос.

Компоненте

  • Обједињене paddingвредности за упозорења, крушне мрвице, картице, падајуће меније, групе листа, модале, искачуће приказе и описе алата које се заснивају на нашој $spacerпроменљивој. Погледајте #30564 .

Хармоника

Алертс

  • Упозорења сада имају примере са иконама .

  • Уклоњени прилагођени стилови за <hr>с у сваком упозорењу јер већ користе currentColor.

Значке

  • БреакингИзбачене су све .badge-*класе боја за позадинске услужне програме (нпр. користите .bg-primaryуместо .badge-primary).

  • БреакингИспуштено — уместо тога .badge-pillкористите .rounded-pillуслужни програм.

  • БреакингУклоњени су стилови лебдења и фокуса за елементе <a>и <button>елементе.

  • Повећани подразумевани паддинг за значке од .25em/ .5emдо .35em/ .65em.

  • Поједностављени подразумевани изглед хлебних мрвица уклањањем padding, background-color, и border-radius.

  • Додато је ново прилагођено својство ЦСС-а --bs-breadcrumb-dividerза једноставно прилагођавање без потребе за поновним компајлирањем ЦСС-а.

Дугмад

  • Бреакинг Дугмад за пребацивање , са пољима за потврду или радијима, више не захтевају ЈаваСцрипт и имају нове ознаке. Више нам није потребан елемент омотача, додајте.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варијанта за тамни текст, контроле и индикаторе (одлично за светлије позадине).

  • Замењене иконе шеврона за контроле вртешке са новим СВГ-овима из Боотстрап Ицонс .

Дугме за затварање

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

  • Дугмад за затварање сада користе background-image(уграђени СВГ) уместо а &times;у ХТМЛ-у, што омогућава лакше прилагођавање без потребе за додиривањем ваше ознаке.

  • Додата је нова .btn-close-whiteваријанта која filter: invert(1)омогућава већи контраст икона за одбацивање на тамнијој позадини.

Колапс

  • Уклоњено сидрење за хармонике.

  • Додата је нова .dropdown-menu-darkваријанта и повезане варијабле за тамне падајуће меније на захтев.

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

  • Затамњен падајући разделник ради побољшаног контраста.

  • БреакингСви догађаји за падајући мени се сада покрећу на дугмету за пребацивање падајућег менија, а затим се приказују у облачићима до надређеног елемента.

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

  • БреакингИзбачена flipопција за падајући додатак у корист матичне Поппер конфигурације. Сада можете да онемогућите понашање окретања тако што ћете проследити празан низ за fallbackPlacementsопцију у модификатору флип .

  • Падајући менији сада могу да се кликну са новом autoCloseопцијом за управљање понашањем аутоматског затварања . Ову опцију можете користити да прихватите клик унутар или изван падајућег менија како бисте га учинили интерактивним.

  • Падајући мени сада подржавају .dropdown-itemс умотане у <li>с.

Јумботрон

Група листа

  • Додате нове nullпроменљиве за font-size, font-weight, color, и :hover colorу .nav-linkкласу.
  • БреакингТраке за навигацију сада захтевају контејнер унутар (да би се драстично поједноставили захтеви за размаке и потребан ЦСС).

Оффцанвас

Пагинација

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

  • Додано transitionс везама за пагинацију.

Поповерс

  • БреакингПреименовано .arrowу .popover-arrowу нашем подразумеваном шаблону искачућег екрана.

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

Спиннерс

  • Спиннери сада поштују prefers-reduced-motion: reduceуспоравање анимација. Погледајте #31882 .

  • Побољшано вертикално поравнање спинера.

Здравице

Описи алатки

  • БреакингПреименовано .arrowу .tooltip-arrowу нашем подразумеваном шаблону објашњења.

  • БреакингПодразумевана вредност за fallbackPlacementsје промењена у ['top', 'right', 'bottom', 'left']ради бољег постављања поппер елемената.

  • БреакингwhiteListОпција је преименована у allowList.

Комуналне услуге

  • БреакингПреименовано је неколико услужних програма да користе имена логичких својстава уместо имена усмерених уз додатак РТЛ подршке:

    • Преименовано .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услужне програме (са омогућеним РФС-ом). Они користе исту скалу као ХТМЛ-ови подразумевани наслови (1-6, велики према малим) и могу се мењати преко Сасс мапе.

  • БреакингПреименовани .font-weight-*услужни програми .fw-*због сажетости и доследности.

  • БреакингПреименовани .font-style-*услужни програми .fst-*због сажетости и доследности.

  • Додато .d-gridуслужним програмима за приказ и новим gapуслужним програмима ( .gap) за ЦСС Грид и флекбок распореде.

  • БреакингУклоњена .rounded-smи rounded-lg, и уведена нова скала часова, .rounded-0у .rounded-3. Погледајте #31687 .

  • Додати нови line-heightуслужни програми: .lh-1, .lh-sm, .lh-baseи .lh-lg. Погледајте овде .

  • Преместили смо .d-noneуслужни програм у наш ЦСС да бисмо му дали већу тежину у односу на друге услужне програме за приказ.

  • Проширен је .visually-hidden-focusableпомоћник да ради и на контејнерима, користећи :focus-within.

помагачи

  • Бреакинг Респонзивни помоћници за уграђивање су преименовани у помоћнике за однос са новим именима класа и побољшаним понашањем, као и корисном ЦСС променљивом.

    • Класе су преименоване да би се промениле byу xразмери. На пример, .ratio-16by9сада је .ratio-16x9.
    • Избацили смо .embed-responsive-itemи селектор групе елемената у корист једноставнијег .ratio > *селектора. Није потребна више класа, а помоћник за однос сада ради са било којим ХТМЛ елементом.
    • Сасс мапа је $embed-responsive-aspect-ratiosпреименована у $aspect-ratiosи њене вредности су поједностављене како би укључиле име класе и проценат као key: valueпар.
    • ЦСС променљиве су сада генерисане и укључене за сваку вредност у Сасс мапи. Измените --bs-aspect-ratioпроменљиву на да .ratioбисте креирали било коју прилагођену пропорцију .

  • Бреакинг Класе „читача екрана“ су сада „визуелно скривене“ класе .

    • Промењена Сасс датотека из 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сада укључује и наше помагаче. Помоћници више не морају да се увозе у прилагођене верзије.

ЈаваСцрипт

  • Избачена је зависност од јКуери-ја и преправљени додаци да буду у обичном ЈаваСцрипт-у.

  • БреакингАтрибути података за све ЈаваСцрипт додатке су сада распоређени у именском простору како би помогли у разликовању Боотстрап функционалности од трећих страна и вашег сопственог кода. На пример, користимо data-bs-toggleуместо data-toggle.

  • Сви додаци сада могу прихватити ЦСС селектор као први аргумент. Можете проследити ДОМ елемент или било који важећи ЦСС селектор да бисте креирали нову инстанцу додатка:

    var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

  • popperConfigможе се пренети као функција која прихвата Боотстрап-ову подразумевану Поппер конфигурацију као аргумент, тако да можете спојити ову подразумевану конфигурацију на свој начин. Примјењује се на падајуће меније, искачуће елементе и описе алата.

  • Подразумевана вредност за fallbackPlacementsје промењена у ['top', 'right', 'bottom', 'left']ради бољег постављања Поппер елемената. Примјењује се на падајуће меније, искачуће елементе и описе алата.

  • Уклоњена доња црта из јавних статичких метода као што је _getInstance()→ getInstance().