Flutningur í v5

Fylgstu með og skoðaðu breytingar á Bootstrap upprunaskrám, skjölum og íhlutum til að hjálpa þér að flytja úr v4 til v5.

Á þessari síðu

Ósjálfstæði

Sleppti jQuery.
Uppfært úr Popper v1.x í Popper v2.x.
Skipti út Libsass fyrir Dart Sass þar sem Sass þýðandinn okkar gaf Libsass var úreltur.
Flutti frá Jekyll til Hugo fyrir að byggja upp skjölin okkar

Stuðningur við vafra

Sleppti Internet Explorer 10 og 11
Sleppti Microsoft Edge < 16 (Legacy Edge)
Sleppti Firefox < 60
Sleppti Safari < 12
Sleppti iOS Safari < 12
Sleppti Chrome < 60

Skjalabreytingar

Endurhönnuð heimasíða, skjalaskipulag og fótur.
Bætt við nýjum pakkahandbók .
Bætti við nýjum sérsniðna hluta , í stað þemasíðu v4 , með nýjum upplýsingum um Sass, alþjóðlegum stillingarvalkostum, litavali, CSS breytum og fleira.
Endurskipulögði öll eyðublaðaskjöl í nýjan Eyðublaðahluta og skipti efninu í sundur í einbeittari síður.
Að sama skapi uppfærði útlitshlutann til að útfæra innihald ristarinnar betur.
Endurnefnt „Navs“ hlutasíðu í „Navs & Tabs“.
Endurnefnt „Ávísanir“ síðu í „Ávísanir og útvarp“.
Endurhannaði siglingastikuna og bætti við nýrri undirsjá til að auðvelda þér að komast um síður okkar og skjalaútgáfur.
Bætt við nýjum flýtilykla fyrir leitaarreitinn: Ctrl + /.

Sass

Við höfum sleppt sjálfgefnum Sass kortasamsetningum til að gera það auðveldara að fjarlægja óþarfa gildi. Hafðu í huga að þú verður nú að skilgreina öll gildi í Sass kortunum eins og $theme-colors. Skoðaðu hvernig á að takast á við Sass kort .
BrotEndurnefna color-yiq()fall og tengdar breytur color-contrast()þar sem það er ekki lengur tengt YIQ litarými. Sjá #30168.
- $yiq-contrasted-thresholder breytt í $min-contrast-ratio.
- $yiq-text-darkog $yiq-text-lighteru í sömu röð endurnefnd í $color-contrast-darkog $color-contrast-light.
BrotFjölmiðlafyrirspurnarblöndunarfæribreytur hafa breyst fyrir rökréttari nálgun.
- media-breakpoint-down()notar brotpunktinn sjálfan í stað næsta brotpunkts (td í media-breakpoint-down(lg)stað þess að miða við media-breakpoint-down(md)skoðanaglugga sem eru minni en lg).
- Að sama skapi notar önnur færibreytan í media-breakpoint-between()einnig brotpunktinn sjálfan í stað næsta brotpunkts (td í media-between(sm, lg)stað media-breakpoint-between(sm, md)marksýnisgátta á milli smog lg).
BrotFjarlægði prentstíl og $enable-print-stylesbreytu. Prentsýningarnámskeið eru enn til staðar. Sjá #28339 .
BrotSleppt color(), theme-color(), og gray()virka í þágu breyta. Sjá #29083 .
BrotEndurnefnd theme-color-level()aðgerð í color-level()og samþykkir nú hvaða lit sem þú vilt í stað $theme-colorlita eingöngu. Sjá #29083 Passaðu þig: color-level() var seinna sleppt inn v5.0.0-alpha3.
BrotEndurnefnt $enable-prefers-reduced-motion-media-queryog $enable-pointer-cursor-for-buttonstil $enable-reduced-motionog $enable-button-pointersí stuttu máli.
BrotFjarlægði bg-gradient-variant()blönduna. Notaðu .bg-gradientbekkinn til að bæta halla við þætti í staðinn fyrir .bg-gradient-*flokkana sem myndaðu.
Brot Fjarlægðar áður úreltar blöndur:
- hover, hover-focus, plain-hover-focus, oghover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(sleppti einnig tilheyrandi gagnsemisflokki, .text-hide)
- visibility()
- form-control-focus()
BrotEndurnefnt scale-color()aðgerð til shift-color()að forðast árekstur við eigin litaskalaaðgerð Sass.
box-shadowmixins leyfa nú nullgildi og falla nonefrá mörgum rökum. Sjá #30394 .
Blandan border-radius()hefur nú sjálfgefið gildi.

Litakerfi

Litakerfið sem virkaði með color-level()og $theme-color-intervalvar fjarlægt í þágu nýs litakerfis. Öllum lighten()og darken()aðgerðum í kóðagrunninum okkar er skipt út fyrir tint-color()og shade-color(). Þessar aðgerðir munu blanda litnum við annað hvort hvítt eða svart í stað þess að breyta léttleika hans um ákveðið magn. Hann shift-color()mun annað hvort lita eða skyggja lit eftir því hvort þyngdarbreyta hans er jákvæð eða neikvæð. Sjá #30622 fyrir frekari upplýsingar.
Bætt við nýjum litum og tónum fyrir hvern lit, sem gefur níu aðskilda liti fyrir hvern grunnlit, sem nýjar Sass breytur.
Bætt litaskil. Skoðað litaskilahlutfall frá 3:1 til 4,5:1 og uppfærðir bláir, grænir, blár og bleikir litir til að tryggja WCAG 2.1 AA birtuskil. Breytt líka litaskilalitnum okkar úr $gray-900í $black.
Til að styðja við litakerfið okkar höfum við bætt við nýjum sérsniðnum tint-color()og shade-color()aðgerðum til að blanda litunum okkar á viðeigandi hátt.

Grid uppfærslur

Nýr brotastaður! Bætt við nýjum xxlbrotapunkti fyrir 1400pxog upp. Engar breytingar á öllum öðrum brotastöðum.
Endurbætt þakrennur. Rennur eru nú settar í rems og eru mjórri en v4 ( 1.5rem, eða um 24px, niður frá 30px). Þetta samræmir þakrennur kerfiskerfisins okkar við bilið okkar.
- Bætt við nýjum þakrennum ( .g-*, .gx-*, og .gy-*) til að stjórna láréttum/lóðréttum rennum, láréttum rennum og lóðréttum rennum.
- BrotEndurnefnt .no-guttersí til .g-0að passa við nýjar þakrennuveitur.
Dálkar hafa ekki lengur átt position: relativevið, svo þú gætir þurft að bæta .position-relativevið sumum þáttum til að endurheimta þá hegðun.
BrotHætti nokkrum .order-*bekkjum sem oft fóru ónotaðir. Við veitum nú aðeins .order-1til .order-5úr kassanum.
BrotSleppti .mediaíhlutnum þar sem auðvelt er að endurtaka hann með tólum. Sjá #28265 og flex utilities síðuna til að fá dæmi .
Brot bootstrap-grid.cssá nú aðeins við box-sizing: border-boxum dálkinn í stað þess að endurstilla alþjóðlega kassastærð. Þannig er hægt að nota ristastílana okkar á fleiri stöðum án truflana.
$enable-grid-classesslekkur ekki lengur á myndun gámaflokka lengur. Sjá #29146.
Uppfærði make-colmixin í sjálfgefið í jafna dálka án tiltekinnar stærðar.

Efni, endurræsa osfrv

RFS er nú sjálfgefið virkt. Fyrirsagnir sem notafont-size()mixin munu sjálfkrafa stilla þærfont-sizeað mælikvarða með útsýnisglugganum. Þessi eiginleiki var áður valinn með v4.
BrotEndurskoðaði leturgerð skjásins okkar til að skipta um $display-*breytur okkar og með $display-font-sizesSass korti. Fjarlægði einnig einstakar $display-*-weightbreytur fyrir eina $display-font-weightog leiðrétta font-sizes.
Bætt við tveimur nýjum .display-*fyrirsagnarstærðum .display-5og .display-6.
Tenglar eru sjálfgefið undirstrikaðir (ekki bara á sveimi), nema þeir séu hluti af sérstökum hlutum.
Endurhönnuðu töflur til að hressa upp á stíl þeirra og endurbyggja þá með CSS breytum til að fá meiri stjórn á stíl.
BrotHreiður töflur erfa ekki stíla lengur.
Brot .thead-lightog .thead-darkfalla niður í þágu .table-*afbrigðisflokkanna sem hægt er að nota fyrir alla töflueiningar ( thead, tbody, tfoot, tr, thog td).
BrotBlandan table-row-variant()er endurnefnd í table-variant()og tekur aðeins við 2 breytur: $color(litaheiti) og $value(litakóði). Rammaliturinn og áherslulitirnir eru sjálfkrafa reiknaðir út frá breytum töflustuðla.
Skiptu töflufrumufyllingarbreytum í -yog -x.
BrotHætti .pre-scrollablebekknum. Sjá #29135
Brot .text-*veitur bæta ekki sveima og fókus ríkjum við tengla lengur. .link-*Hægt er að nota hjálparnámskeið í staðinn. Sjá #29267
BrotHætti .text-justifybekknum. Sjá #29793
Brot <hr>þættir nota nú heightí stað þess borderað styðja betur við sizeeiginleikann. Þetta gerir einnig kleift að nota bólstrun tól til að búa til þykkari skilrúm (td <hr class="py-1">).
Endurstilla sjálfgefið lárétt padding-leftá <ul>og <ol>þætti úr sjálfgefnu vafra 40pxí 2rem.
Bætt við $enable-smooth-scroll, sem á við á scroll-behavior: smoothheimsvísu - nema fyrir notendur sem biðja um minni hreyfingu í gegnum prefers-reduced-motionfjölmiðlafyrirspurn. Sjá #31877

RTL

Sértækar breytur, tól og blöndun í láréttum áttum hafa öll verið endurnefnd til að nota rökræna eiginleika eins og þeir sem finnast í flexbox skipulagi - td startog endí staðinn fyrir leftog right.

Eyðublöð

Bætt við nýjum fljótandi eyðublöðum! Við höfum kynnt dæmið um fljótandi merki að fullu studdum eyðublaðahlutum. Sjá nýju fljótandi merkisíðuna.
Brot Samþættir innfæddir og sérsniðnir formþættir. Gátreitir, útvarp, val og önnur inntak sem höfðu innfædda og sérsniðna flokka í v4 hafa verið sameinuð. Núna eru næstum allir formþættir okkar algjörlega sérsniðnir, flestir án þess að þurfa sérsniðna HTML.
- .custom-checker núna .form-check.
- .custom-check.custom-switcher núna .form-check.form-switch.
- .custom-selecter núna .form-select.
- .custom-fileog .form-filehefur verið skipt út fyrir sérsniðna stíla ofan á .form-control.
- .custom-rangeer núna .form-range.
- Fallið innfæddur .form-control-fileog .form-control-range.
BrotSleppti .input-group-appendog .input-group-prepend. Þú getur nú bara bætt við hnöppum og .input-group-textsem beinum börnum inntakshópanna.
Langvarandi radíus vantar landamæri á inntakshópi með staðfestingarviðbrögðsvillu er loksins lagaður með því að bæta viðbótarflokki .has-validationvið inntakshópa með staðfestingu.
Brot Slepptu formsértækum skipulagsflokkum fyrir netkerfi okkar. Notaðu netið okkar og tólin í staðinn fyrir .form-group, .form-row, eða .form-inline.
BrotEyðublaðamerki þurfa nú .form-label.
Brot .form-textstillir ekki lengur display, sem gerir þér kleift að búa til innbyggðan eða loka hjálpartexta eins og þú vilt bara með því að breyta HTML-einingunni.
Staðfestingartákn eru ekki lengur notuð á <select>s með multiple.
Endurraðað uppruna Sass skrár undir scss/forms/, þar á meðal inntakshópastílar.

Íhlutir

Sameinuð paddinggildi fyrir áminningar, brauðmola, kort, fellilista, listahópa, snið, sprettiglugga og verkfæraábendingar til að byggjast á $spacerbreytunni okkar. Sjá #30564 .

Harmonikku

Nýr harmonikkuþáttur bættur við .

Viðvaranir

Viðvaranir hafa nú dæmi með táknum .
Fjarlægði sérsniðna stíla fyrir <hr>s í hverri viðvörun þar sem þeir nota nú þegar currentColor.

Merki

BrotSleppti öllum .badge-*litaflokkum fyrir bakgrunnsforrit (td notað .bg-primaryí staðinn fyrir .badge-primary).
BrotSleppt .badge-pill— notaðu .rounded-pilltólið í staðinn.
BrotFjarlægði sveima og fókusstíl fyrir <a>og <button>þætti.
Aukin sjálfgefna fylling fyrir merki frá .25em/ .5emtil .35em/ .65em.

Brauðmylsna

Einfaldaði sjálfgefið útlit brauðmola með því að fjarlægja padding, background-color, og border-radius.
Bætti við nýjum CSS sérsniðnum eiginleikum --bs-breadcrumb-dividertil að auðvelda sérsníða án þess að þurfa að endursafna CSS.

Hnappar

Brot Skiptahnappar , með gátreitum eða útvarpstækjum, þurfa ekki lengur JavaScript og hafa nýja merkingu. Við þurfum ekki lengur umbúðaþátt, bætum.btn-checkvið<input>, og pörum það við hvaða.btnflokka sem er á<label>. Sjá #30650 . Skjölin fyrir þetta hafa færst frá hnappasíðunni okkar yfir í nýja Eyðublöð hlutann.
Brot Sleppt .btn-blockfyrir veitur. Í stað þess að nota .btn-blocká .btnhnappinn skaltu vefja hnappana þína með .d-gridog .gap-*tól til að rýma þá eftir þörfum. Skiptu yfir í móttækilega flokka til að fá enn meiri stjórn á þeim. Lestu skjölin fyrir nokkur dæmi.
Uppfærði okkar button-variant()og button-outline-variant()mixins til að styðja við viðbótarfæribreytur.
Uppfærðir hnappar til að tryggja aukna birtuskil á sveimi og virku ástandi.
Óvirkir hnappar hafa nú pointer-events: none;.

Spil

BrotFallið .card-deckí þágu ristarinnar okkar. Vefðu spilunum þínum inn í dálkaflokka og bættu við foreldri .row-cols-*ílát til að endurskapa spilastokka (en með meiri stjórn á móttækilegri röðun).
BrotFallið .card-columnsí þágu múrverks. Sjá #28922 .
BrotSkipti .cardút grunnharmonikkunni fyrir nýjan harmonikkuþátt .

Hringekja

Bætt við nýju .carousel-darkafbrigði fyrir dökkan texta, stýringar og vísbendingar (frábært fyrir ljósari bakgrunn).
Skipt var út táknum fyrir hringekjustýringu fyrir nýja SVG frá Bootstrap Icons .

Loka hnappur

BrotEndurnefnt .closeí .btn-closefyrir minna almennt nafn.
Lokahnappar nota nú background-image(innfellt SVG) í stað a ×í HTML, sem gerir kleift að sérsníða auðveldari án þess að þurfa að snerta merkinguna þína.
Bætt við nýju .btn-close-whiteafbrigði sem notar filter: invert(1)til að gera kleift að hafna táknum með meiri birtuskilum gegn dekkri bakgrunni.

Hrun

Fjarlægði skrúfufestingu fyrir harmonikkur.

Dropdowns

Bætt við nýju .dropdown-menu-darkafbrigði og tengdum breytum fyrir dökkar fellivalmyndir á eftirspurn.
Ný breytu bætt við fyrir $dropdown-padding-x.
Dökknaði fellilistann til að bæta birtuskil.
BrotAllir atburðir fyrir fellilistann eru nú ræstir á fellivalhnappnum og síðan bólað upp í foreldraþáttinn.
Fellivalmyndir hafa nú data-bs-popper="static"eiginleika stillt þegar staðsetning fellilistans er kyrrstæð og data-bs-popper="none"þegar fellivalmyndin er í siglingastikunni. Þessu er bætt við með JavaScript okkar og hjálpar okkur að nota sérsniðna staðsetningarstíla án þess að trufla staðsetningu Popper.
BrotValkostur flipfyrir fellivalmyndaviðbót sleppt í þágu innfæddrar Popper stillingar. Þú getur nú slökkt á snúningshegðuninni með því að senda tómt fylki fyrir fallbackPlacementsvalmöguleika í flip modifier.
Nú er hægt að smella á fellivalmyndir með nýjum autoClosemöguleika til að takast á við sjálfvirka lokun . Þú getur notað þennan valkost til að samþykkja smellinn innan eða utan fellivalmyndarinnar til að gera hann gagnvirkan.
Fellilistar styðja nú .dropdown-items vafinn í <li>s.

Jumbotron

BrotSleppti jumbotron íhlutnum þar sem hægt er að endurtaka hann með tólum.Sjáðu nýja Jumbotron dæmið okkar fyrir kynningu.

Listahópur

Bætt við nýjum .list-group-numberedbreytingum .

Navs og flipar

Bætt við nýjum nullbreytum fyrir font-size, font-weight, color, og :hover colorvið.nav-link bekkinn.

Navbars

BrotNavbars krefjast nú gáms innan (til að einfalda bilkröfur verulega og CSS krafist).

Offcanvas

Bætti við nýja offcanvas íhlutnum .

Síðuskipting

Síðunartenglar eru nú sérhannaðar margin-leftsem eru ávöl á öllum hornum þegar þeir eru aðskildir hver frá öðrum.
Bætt við transitions við blaðsíðutengla.

Popovers

BrotEndurnefnt .arrowí .popover-arrowsjálfgefið popover sniðmát okkar.
Endurnefndur whiteListvalkostur í allowList.

Snúðar

Spinners heiðra nú prefers-reduced-motion: reducemeð því að hægja á hreyfimyndum. Sjá #31882 .
Bætt lóðrétt röðun snúnings.

Ristað brauð

Ristað brauð er nú hægt að staðsetja í a .toast-containermeð hjálp staðsetningartóla .
Breytt sjálfgefna tímalengd ristuðu brauðs í 5 sekúndur.
Fjarlægt overflow: hiddenúr ristuðu brauði og skipt út fyrir rétta border-radiuss með calc()aðgerðum.

Verkfæraráð

BrotEndurnefnt .arrowí .tooltip-arrowsjálfgefið sniðmát fyrir verkfæraleiðbeiningar.
BrotSjálfgefið gildi fyrir fallbackPlacementser breytt í til ['top', 'right', 'bottom', 'left']að fá betri staðsetningu á popparaþáttum.
BrotEndurnefndur whiteListvalkostur í allowList.

Veitur

BrotEndurnefna nokkur tól til að nota rökrétt eignarheiti í stað stefnunafna með því að bæta við RTL stuðningi:
- Endurnefnt .left-*og .right-*til .start-*og .end-*.
- Endurnefnt .float-leftog .float-righttil .float-startog .float-end.
- Endurnefnt .border-leftog .border-righttil .border-startog .border-end.
- Endurnefnt .rounded-leftog .rounded-righttil .rounded-startog .rounded-end.
- Endurnefnt .ml-*og .mr-*til .ms-*og .me-*.
- Endurnefnt .pl-*og .pr-*til .ps-*og .pe-*.
- Endurnefnt .text-leftog .text-righttil .text-startog .text-end.
BrotSjálfgefið óvirkt neikvæð framlegð.
Bætti við nýjum .bg-bodyflokki til að fljótt stilla <body>bakgrunninn á fleiri þætti.
Bætt við nýjum stöðutólum fyrir top, right, bottom, og left. Gildin innihalda 0, 50%, og 100%fyrir hverja eign.
Bætt við nýjum .translate-middle-xog .translate-middle-ytólum til að miðja lárétta eða lóðrétta þætti í algerum/föstu staðsetningu.
Bætt við nýjum border-widthtólum .
BrotEndurnefnt .text-monospaceí .font-monospace.
BrotFjarlægt .text-hideþar sem það er úrelt aðferð til að fela texta sem ætti ekki að nota lengur.
Bætt við .fs-*tólum fyrir font-sizetól (með RFS virkt). Þessar nota sama mælikvarða og sjálfgefnar fyrirsagnir HTML (1-6, stórar til litlar) og hægt er að breyta þeim í gegnum Sass kort.
BrotEndurnefnt .font-weight-*tól sem .fw-*fyrir stuttu og samkvæmni.
BrotEndurnefnt .font-style-*tól sem .fst-*fyrir stuttu og samkvæmni.
Bætt við .d-gridað sýna tól og ný gaptól ( .gap) fyrir CSS Grid og flexbox skipulag.
BrotFjarlægði .rounded-smog rounded-lg, og kynnti nýjan flokkakvarða, .rounded-0til .rounded-3. Sjá #31687 .
Bætt við nýjum line-heighttólum: .lh-1, .lh-sm, .lh-baseog .lh-lg. Sjá hér .
Færði .d-nonetólið í CSS okkar til að gefa því meira vægi umfram önnur skjától.
Framlengdi .visually-hidden-focusablehjálparann til að vinna einnig á gámum með því að nota :focus-within.

Hjálparar

Brot Móttækir innfellingarhjálparar hafa verið endurnefndir í hlutfallshjálparmenn með nýjum flokksnöfnum og bættri hegðun, auk gagnlegrar CSS breytu.
- Flokkar hafa verið endurnefndir til að breytast byí xstærðarhlutföll. Til dæmis .ratio-16by9er núna .ratio-16x9.
- Við höfum sleppt .embed-responsive-itemog þáttahópsvalinu í þágu einfaldara .ratio > *vals. Ekki er þörf á fleiri flokkum og hlutfallshjálpin virkar nú með hvaða HTML frumefni sem er.
- Sass $embed-responsive-aspect-ratioskortinu hefur verið breytt í $aspect-ratiosog gildi þess hafa verið einfölduð til að innihalda flokksnafnið og prósentuna sem key: valueparið.
- CSS breytur eru nú búnar til og teknar með fyrir hvert gildi í Sass kortinu. Breyttu --bs-aspect-ratiobreytunni á til .ratioað búa til sérsniðið stærðarhlutfall .
Brot „Skjálesara“ flokkar eru nú „sjónrænt faldir“ flokkar .
- Breytti Sass skránni úr scss/helpers/_screenreaders.scssíscss/helpers/_visually-hidden.scss
- Endurnefnt .sr-onlyog .sr-only-focusabletil .visually-hiddenog.visually-hidden-focusable
- Endurnefnt sr-only()og sr-only-focusable()blandast í visually-hidden()og visually-hidden-focusable().
bootstrap-utilities.cssfelur nú einnig í sér aðstoðarmenn okkar. Hjálparar þurfa ekki lengur að vera fluttir inn í sérsniðnum smíðum.

JavaScript

Sleppti jQuery ósjálfstæði og endurskrifuðu viðbætur til að vera í venjulegu JavaScript.
BrotGagnaeiginleikar fyrir öll JavaScript viðbætur eru nú skipt með nafni til að hjálpa til við að greina Bootstrap virkni frá þriðja aðila og þínum eigin kóða. Til dæmis notum við data-bs-toggleí staðinn fyrir data-toggle.
Allar viðbætur geta nú samþykkt CSS veljara sem fyrstu rökin. Þú getur annað hvort sent DOM frumefni eða hvaða gildu CSS val sem er til að búa til nýtt tilvik af viðbótinni:
```
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfighægt að senda sem aðgerð sem samþykkir sjálfgefna Popper stillingu Bootstrap sem rök, þannig að þú getur sameinað þessa sjálfgefna stillingu á þinn hátt. Á við um fellilista, sprettiglugga og verkfæraábendingar.
Sjálfgefið gildi fyrir fallbackPlacementser breytt í ['top', 'right', 'bottom', 'left']fyrir betri staðsetningu Popper þátta. Á við um fellilista, sprettiglugga og verkfæraábendingar.
Fjarlægði undirstrik úr opinberum kyrrstöðuaðferðum eins og _getInstance()→ getInstance().