in English

Migrerer til v5

Spor og gennemse ændringer af Bootstrap-kildefilerne, dokumentationen og komponenterne for at hjælpe dig med at migrere fra v4 til v5.

På denne side

Afhængigheder

Droppede jQuery.
Opgraderet fra Popper v1.x til Popper v2.x.
Udskiftede Libsass med Dart Sass, da vores Sass-kompiler givet Libsass blev forældet.
Migrerede fra Jekyll til Hugo for at bygge vores dokumentation

Browser support

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

Dokumentationsændringer

Redesignet hjemmeside, dokumentlayout og sidefod.
Tilføjet ny pakkeguide .
Tilføjet ny Tilpas sektion , der erstatter v4's temaside , med nye detaljer om Sass, globale konfigurationsmuligheder, farveskemaer, CSS-variabler og mere.
Omorganiserede al formulardokumentation til den nye formularsektion , hvorved indholdet blev opdelt i mere fokuserede sider.
Tilsvarende opdaterede Layout-sektionen for at udfylde gitterindholdet mere tydeligt.
Omdøbt "Navs"-komponentsiden til "Navs & Tabs".
Omdøbt "Checks"-siden til "Checks & radios".
Omdesignet navbaren og tilføjet en ny undernavigering for at gøre det nemmere at komme rundt på vores websteder og docs-versioner.
Tilføjet ny tastaturgenvej til søgefeltet: Ctrl + /.

Sass

Vi har droppet standard Sass-kortsammenlægninger for at gøre det nemmere at fjerne overflødige værdier. Husk, at du nu skal definere alle værdier i Sass-kortene som $theme-colors. Se, hvordan du håndterer Sass-kort .
Går i stykkerOmdøbt color-yiq()funktion og relaterede variabler til color-contrast(), da den ikke længere er relateret til YIQ-farverum. Se #30168.
- $yiq-contrasted-thresholder omdøbt til $min-contrast-ratio.
- $yiq-text-darkog $yiq-text-lighter henholdsvis omdøbt til $color-contrast-darkog $color-contrast-light.
Går i stykkerMedieforespørgselsmix-parametre er ændret for en mere logisk tilgang.
- media-breakpoint-down()bruger selve brudpunktet i stedet for det næste brudpunkt (f.eks. i media-breakpoint-down(lg)stedet for media-breakpoint-down(md)målvisninger, der er mindre end lg).
- På samme måde bruger den anden parameter i media-breakpoint-between()også selve brudpunktet i stedet for det næste brudpunkt (f.eks. i media-between(sm, lg)stedet for media-breakpoint-between(sm, md)målvisningsporte mellem smog lg).
Går i stykkerFjernede udskriftsstile og $enable-print-stylesvariabel. Trykvisningsklasser findes stadig. Se #28339 .
Går i stykkerDroppet color(), theme-color(), og gray()fungerer til fordel for variabler. Se #29083 .
Går i stykkerOmdøbt theme-color-level()funktion til color-level()og accepterer nu enhver farve, du ønsker i stedet for kun $theme-colorfarver. Se #29083 Pas på: color-level() blev senere droppet ind v5.0.0-alpha3.
Går i stykkerOmdøbt $enable-prefers-reduced-motion-media-queryog $enable-pointer-cursor-for-buttonstil $enable-reduced-motionog $enable-button-pointersfor kortheds skyld.
Går i stykkerFjernede bg-gradient-variant()blandingen. Brug .bg-gradientklassen til at tilføje gradienter til elementer i stedet for de genererede .bg-gradient-*klasser.
Går i stykker Fjernede tidligere forældede blandinger:
- hover, hover-focus, plain-hover-focus, oghover-focus-active
- float()
- form-control-mixin()
- nav-divider()
- retina-img()
- text-hide()(også droppet den tilknyttede hjælpeklasse, .text-hide)
- visibility()
- form-control-focus()
Går i stykkerOmdøbt scale-color()funktion til shift-color()for at undgå kollision med Sass egen farveskaleringsfunktion.
box-shadowmixins tillader nu nullværdier og fald nonefra flere argumenter. Se #30394 .
Blandingen border-radius()har nu en standardværdi.

Farvesystem

Farvesystemet som fungerede med color-level()og $theme-color-intervalblev fjernet til fordel for et nyt farvesystem. Alle lighten()og darken()funktioner i vores kodebase erstattes af tint-color()og shade-color(). Disse funktioner vil blande farven med enten hvid eller sort i stedet for at ændre dens lyshed med en fast mængde. Den shift-color()vil enten tone eller skygge en farve afhængigt af om dens vægtparameter er positiv eller negativ. Se #30622 for flere detaljer.
Tilføjet nye nuancer og nuancer for hver farve, hvilket giver ni separate farver for hver basisfarve, som nye Sass-variabler.
Forbedret farvekontrast. Bumpet farvekontrastforhold fra 3:1 til 4,5:1 og opdaterede blå, grøn, cyan og pink farver for at sikre WCAG 2.1 AA kontrast. Ændrede også vores farvekontrastfarve fra $gray-900til $black.
For at understøtte vores farvesystem har vi tilføjet nye brugerdefinerede tint-color()og shade-color()funktioner til at blande vores farver passende.

Gitteropdateringer

Nyt brudpunkt! Tilføjet nyt xxlbreakpoint for 1400pxog op. Ingen ændringer til alle andre brudpunkter.
Forbedrede tagrender. Tagrender er nu sat i rems, og er smallere end v4 ( 1.5rem, eller ca 24px, ned fra 30px). Dette justerer vores netsystems tagrender med vores afstandsværktøjer.
- Tilføjet ny tagrendeklasse ( .g-*, .gx-*, og .gy-*) for at kontrollere vandrette/lodrette tagrender, vandrette tagrender og vertikale tagrender.
- Går i stykkerOmdøbt .no-gutterstil .g-0for at matche nye tagrender.
Kolonner er ikke længere position: relativeanvendt, så du skal muligvis tilføje .position-relativenogle elementer for at gendanne denne adfærd.
Går i stykkerDroppede flere .order-*klasser, der ofte gik ubrugte. Vi leverer nu kun .order-1til .order-5out of the box.
Går i stykkerDroppede .mediakomponenten, da den nemt kan replikeres med hjælpeprogrammer. Se #28265 og siden med flex-værktøjer for et eksempel .
Går i stykker bootstrap-grid.cssgælder nu kun box-sizing: border-boxfor kolonnen i stedet for at nulstille den globale boksstørrelse. På denne måde kan vores gitterstile bruges flere steder uden forstyrrelser.
$enable-grid-classesdeaktiverer ikke længere genereringen af containerklasser længere. Se #29146.
Opdaterede make-colmixin til standard til lige kolonner uden en specificeret størrelse.

Indhold, genstart osv

RFS er nu aktiveret som standard. Overskrifter ved hjælp affont-size()mixin vil automatisk justere deresfont-sizetil skalering med visningsporten. Denne funktion var tidligere tilvalgt med v4.
Går i stykkerRevideret vores displaytypografi for at erstatte vores $display-*variabler og med et $display-font-sizesSass-kort. Fjernede også de individuelle $display-*-weightvariabler for en enkelt $display-font-weightog justeret font-sizes.
Tilføjet to nye .display-*overskriftsstørrelser, .display-5og .display-6.
Links er som standard understreget (ikke kun ved svæv), medmindre de er en del af specifikke komponenter.
Omdesignede tabeller for at genopfriske deres stilarter og genopbygge dem med CSS-variabler for mere kontrol over stil.
Går i stykkerIndlejrede tabeller arver ikke stilarter længere.
Går i stykker .thead-lightog .thead-darkudgår til fordel for .table-*variantklasserne, som kan bruges til alle tabelelementer ( thead, tbody, tfoot, tr, thog td).
Går i stykkerMixin table-row-variant()omdøbes til table-variant()og accepterer kun 2 parametre: $color(farvenavn) og $value(farvekode). Kantfarven og accentfarverne beregnes automatisk baseret på tabelfaktorvariablerne.
Opdel tabelcelleudfyldningsvariabler i -yog -x.
Går i stykkerFaldt .pre-scrollableklasse. Se #29135
Går i stykker .text-*hjælpeprogrammer tilføjer ikke svæve- og fokustilstande til links længere. .link-*hjælperklasser kan bruges i stedet. Se #29267
Går i stykkerFaldt .text-justifyklasse. Se #29793
Nulstil standard vandret padding-lefttil <ul>og <ol>elementer fra browserstandard 40pxtil 2rem.
Tilføjet $enable-smooth-scroll, som gælder scroll-behavior: smoothglobalt – undtagen for brugere, der beder om reduceret bevægelse gennem prefers-reduced-motionmedieforespørgsel. Se #31877

RTL

Horisontale retningsspecifikke variabler, hjælpeprogrammer og mixins er alle blevet omdøbt til at bruge logiske egenskaber som dem, der findes i flexbox-layouts - f.eks. startog endi stedet for leftog right.

Formularer

Tilføjet nye flydende formularer! Vi har promoveret eksemplet med flydende etiketter til fuldt understøttede formularkomponenter. Se den nye side med flydende etiketter.
Går i stykker Konsoliderede native og brugerdefinerede formularelementer. Afkrydsningsfelter, radioer, udvalgte og andre input, der havde native og brugerdefinerede klasser i v4, er blevet konsolideret. Nu er næsten alle vores formularelementer helt tilpassede, de fleste uden behov for tilpasset HTML.
- .custom-checker nu .form-check.
- .custom-check.custom-switcher nu .form-check.form-switch.
- .custom-selecter nu .form-select.
- .custom-fileog .form-fileer blevet erstattet af brugerdefinerede stilarter oven på .form-control.
- .custom-rangeer nu .form-range.
- Droppet indfødte .form-control-fileog .form-control-range.
Går i stykkerDroppet .input-group-appendog .input-group-prepend. Du kan nu blot tilføje knapper og .input-group-textsom direkte børn af inputgrupperne.
Den langvarige Missing border-radius på inputgruppe med valideringsfeedback-fejl er endelig rettet ved at tilføje en ekstra .has-validationklasse til inputgrupper med validering.
Går i stykker Droppede formularspecifikke layoutklasser for vores gittersystem. Brug vores gitter og hjælpeprogrammer i stedet for .form-group, .form-row, eller .form-inline.
Går i stykkerFormetiketter kræver nu .form-label.
Går i stykker .form-textindstiller ikke længere display, hvilket giver dig mulighed for at oprette inline eller blokere hjælpetekst, som du ønsker, blot ved at ændre HTML-elementet.
Valideringsikoner anvendes ikke længere på <select>s med multiple.
Omarrangerede Sass-kildefiler under scss/forms/, inklusive inputgruppetypografier.

Komponenter

Samlede paddingværdier for advarsler, brødkrummer, kort, rullemenuer, listegrupper, modaler, popovers og værktøjstip skal være baseret på vores $spacervariabel. Se #30564 .

Harmonika

Tilføjet ny harmonika-komponent .

Advarsler

Advarsler har nu eksempler med ikoner .
Fjernede brugerdefinerede stilarter for <hr>s i hver advarsel, da de allerede bruger currentColor.

Badges

Går i stykkerDroppede alle .badge-*farveklasser for baggrundsværktøjer (f.eks. brug .bg-primaryi stedet for .badge-primary).
Går i stykkerDroppet .badge-pill— brug .rounded-pillværktøjet i stedet.
Går i stykkerFjernede svæve- og fokusstile for <a>og <button>elementer.
Øget standardpolstring for badges fra .25em/ .5emtil .35em/ .65em.

Brødkrummer

Forenklet standardudseendet for brødkrummer ved at fjerne padding, background-color, og border-radius.
Tilføjet ny tilpasset CSS-egenskab --bs-breadcrumb-dividerfor nem tilpasning uden at skulle kompilere CSS igen.

Knapper

Går i stykker Skift-knapper , med afkrydsningsfelter eller radioer, kræver ikke længere JavaScript og har ny markering. Vi kræver ikke længere et indpakningselement, føj.btn-checktil<input>, og parre det med eventuelle.btnklasser på<label>. Se #30650 . Dokumenterne til dette er flyttet fra vores knapside til den nye formularsektion.
Går i stykker Droppet .btn-blockfor forsyningsselskaber. I stedet for at bruge .btn-blockpå .btn, skal du pakke dine knapper med .d-gridog et .gap-*værktøj til at placere dem efter behov. Skift til responsive klasser for at få endnu mere kontrol over dem. Læs dokumenterne for nogle eksempler.
Opdateret vores button-variant()og button-outline-variant()mixins for at understøtte yderligere parametre.
Opdaterede knapper for at sikre øget kontrast ved svævning og aktive tilstande.
Deaktiverede knapper har nu pointer-events: none;.

Kort

Går i stykkerFaldt .card-decktil fordel for vores net. Pak dine kort ind i kolonneklasser, og tilføj en forældrebeholder .row-cols-*for at genskabe kortbunker (men med mere kontrol over responsiv justering).
Går i stykkerFaldt .card-columnstil fordel for murværk. Se #28922 .
Går i stykkerUdskiftede den .cardbaserede harmonika med en ny harmonika-komponent .

Karrusel

Tilføjet ny .carousel-darkvariant til mørk tekst, kontroller og indikatorer (fantastisk til lysere baggrunde).
Udskiftet chevron-ikoner til karruselkontroller med nye SVG'er fra Bootstrap Icons .

Luk knap

Går i stykkerOmdøbt .closetil .btn-closefor et mindre generisk navn.
Luk-knapper bruger nu en background-image(indlejret SVG) i stedet for en ×i HTML, hvilket muliggør lettere tilpasning uden at skulle røre ved din markering.
Tilføjet ny .btn-close-whitevariant, der bruges filter: invert(1)til at aktivere højere kontrast afvisningsikoner mod mørkere baggrunde.

Bryder sammen

Fjernet rulleforankring til harmonikaer.

Dropdowns

Tilføjet ny .dropdown-menu-darkvariant og tilhørende variabler til on-demand mørke dropdowns.
Tilføjet ny variabel for $dropdown-padding-x.
Mørkede dropdown-deleren for forbedret kontrast.
Går i stykkerAlle hændelser for rullemenuen udløses nu på rullemenuknappen og bobles derefter op til det overordnede element.
Rullemenuer har nu en data-bs-popper="static"egenskab indstillet, når placeringen af rullemenuen er statisk, og data-bs-popper="none"når rullemenuen er i navigeringslinjen. Dette er tilføjet af vores JavaScript og hjælper os med at bruge tilpassede positionsstile uden at forstyrre Poppers positionering.
Går i stykkerDroppede flipmulighed for dropdown-plugin til fordel for native Popper-konfiguration. Du kan nu deaktivere vendeadfærden ved at sende et tomt array til fallbackPlacementsoption i flip - modifikator.
Rullemenuer kan nu klikkes med en ny autoClosemulighed for at håndtere autoluk-adfærden . Du kan bruge denne mulighed til at acceptere klikket i eller uden for rullemenuen for at gøre den interaktiv.
Dropdowns understøtter nu .dropdown-items pakket ind i <li>s.

Jumbotron

Går i stykkerDroppede jumbotron-komponenten, da den kan replikeres med hjælpeprogrammer. Se vores nye Jumbotron-eksempel for en demo.

Listegruppe

Tilføjet ny .list-group-numberedmodifikator til listegrupper.

Navs og faner

Tilføjet nye nullvariabler for font-size, font-weight, color, og :hover colortil .nav-linkklassen.

Navbars

Går i stykkerNavbars kræver nu en beholder indeni (for drastisk at forenkle krav til mellemrum og påkrævet CSS).

Offcanvas

Tilføjet den nye offcanvas-komponent .

Sideinddeling

Sideinddelingslinks kan nu tilpasses margin-left, som er dynamisk afrundet i alle hjørner, når de er adskilt fra hinanden.
Tilføjet transitions til pagineringslinks.

Popovers

Går i stykkerOmdøbt .arrowtil .popover-arrowi vores standard popover-skabelon.
Omdøbt whiteListmulighed til allowList.

Spinnere

Spinnere ærer nu prefers-reduced-motion: reduceved at bremse animationerne. Se #31882 .
Forbedret spinner vertikal justering.

Toasts

Toasts kan nu placeres i a .toast-containerved hjælp af positioneringsværktøjer .
Ændret standard toastvarighed til 5 sekunder.
Fjernet overflow: hiddenfra toasts og erstattet med ordentlige border-radiuss med calc()funktioner.

Værktøjstip

Går i stykkerOmdøbt .arrowtil .tooltip-arrowi vores standard værktøjstip-skabelon.
Går i stykkerStandardværdien for fallbackPlacementsændres til ['top', 'right', 'bottom', 'left']for bedre placering af popperelementer.
Går i stykkerOmdøbt whiteListmulighed til allowList.

Hjælpeprogrammer

Går i stykkerOmdøbt flere værktøjer til at bruge logiske egenskabsnavne i stedet for retningsbestemte navne med tilføjelse af RTL-understøttelse:
- Omdøbt .left-*og .right-*til .start-*og .end-*.
- Omdøbt .float-leftog .float-righttil .float-startog .float-end.
- Omdøbt .border-leftog .border-righttil .border-startog .border-end.
- Omdøbt .rounded-leftog .rounded-righttil .rounded-startog .rounded-end.
- Omdøbt .ml-*og .mr-*til .ms-*og .me-*.
- Omdøbt .pl-*og .pr-*til .ps-*og .pe-*.
- Omdøbt .text-leftog .text-righttil .text-startog .text-end.
Går i stykkerDeaktiveret negative marginer som standard.
Tilføjet ny .bg-bodyklasse for hurtigt at indstille <body>'s-baggrunden til yderligere elementer.
Tilføjet nye positionsværktøjer til top, right, bottom, og left. Værdier inkluderer 0, 50%, og 100%for hver ejendom.
Tilføjet nye .translate-middle-x& .translate-middle-yhjælpeprogrammer til vandret eller lodret centrering af absolut/fast placerede elementer.
Tilføjet nye border-widthhjælpeprogrammer .
Går i stykkerOmdøbt .text-monospacetil .font-monospace.
Går i stykkerFjernet .text-hide, da det er en forældet metode til at skjule tekst, som ikke bør bruges længere.
Tilføjede .fs-*hjælpeprogrammer til font-sizehjælpeprogrammer (med RFS aktiveret). Disse bruger samme skala som HTMLs standardoverskrifter (1-6, store til små), og kan ændres via Sass-kort.
Går i stykkerOmdøbt .font-weight-*hjælpeprogrammer .fw-*for korthed og konsistens.
Går i stykkerOmdøbt .font-style-*hjælpeprogrammer .fst-*for korthed og konsistens.
Tilføjet .d-gridtil visningsværktøjer og nye gaphjælpeprogrammer ( .gap) til CSS Grid- og flexbox-layouts.
Går i stykkerFjernede .rounded-smog rounded-lg, og introducerede en ny skala af klasser, .rounded-0til .rounded-3. Se #31687 .
Tilføjet nye line-heighthjælpeprogrammer: .lh-1, .lh-sm, .lh-baseog .lh-lg. Se her .
Flyttede .d-noneværktøjet i vores CSS for at give det mere vægt i forhold til andre skærmværktøjer.
Udvidet .visually-hidden-focusablehjælperen til også at arbejde på containere ved hjælp af :focus-within.

Hjælpere

Går i stykker Responsive embed-hjælpere er blevet omdøbt til ratio-hjælpere med nye klassenavne og forbedret adfærd samt en nyttig CSS-variabel.
- Klasser er blevet omdøbt til at skifte bytil xi billedformatet. For eksempel .ratio-16by9er nu .ratio-16x9.
- Vi har droppet .embed-responsive-itemog elementgruppevælgeren til fordel for en enklere .ratio > *vælger. Der kræves ikke mere klasse, og ratio-hjælperen fungerer nu med ethvert HTML-element.
- Sass - $embed-responsive-aspect-ratioskortet er blevet omdøbt til, $aspect-ratiosog dets værdier er blevet forenklet til at inkludere klassenavnet og procentdelen som key: valueparret.
- CSS-variabler genereres nu og inkluderes for hver værdi i Sass-kortet. Rediger --bs-aspect-ratiovariablen på for .ratioat skabe ethvert tilpasset billedformat .
Går i stykker "Skærmlæser"-klasser er nu "visuelt skjulte" klasser .
- Ændrede Sass-filen fra scss/helpers/_screenreaders.scsstilscss/helpers/_visually-hidden.scss
- Omdøbt .sr-onlyog .sr-only-focusabletil .visually-hiddenog.visually-hidden-focusable
- Omdøbt sr-only()og sr-only-focusable()mixins til visually-hidden()og visually-hidden-focusable().
bootstrap-utilities.cssomfatter nu også vores hjælpere. Hjælpere behøver ikke længere at blive importeret i brugerdefinerede builds.

JavaScript

Droppede jQuery-afhængighed og omskrev plugins til at være i almindelig JavaScript.
Går i stykkerDataattributter for alle JavaScript-plugins er nu navngivet for at hjælpe med at skelne Bootstrap-funktionalitet fra tredjeparter og din egen kode. For eksempel bruger vi data-bs-togglei stedet for data-toggle.
Alle plugins kan nu acceptere en CSS-vælger som det første argument. Du kan enten sende et DOM-element eller en hvilken som helst gyldig CSS-vælger for at oprette en ny forekomst af pluginnet:
```
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigkan videregives som en funktion, der accepterer Bootstraps standard Popper-konfiguration som et argument, så du kan flette denne standardkonfiguration på din måde. Gælder for dropdowns, popovers og værktøjstip.
Standardværdien for fallbackPlacementsændres til ['top', 'right', 'bottom', 'left']for bedre placering af Popper-elementer. Gælder for dropdowns, popovers og værktøjstip.
Fjernet understregning fra offentlige statiske metoder som _getInstance()→ getInstance().