Spring til hovedindhold Spring til dokumentnavigation
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 .

  • Bryder Omdø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.

  • Breaking Media-forespø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).

  • Breaking Fjernede udskriftsstile og $enable-print-stylesvariabel. Trykvisningsklasser findes stadig. Se #28339 .

  • Breaking Dropped color(), theme-color(), og gray()fungerer til fordel for variabler. Se #29083 .

  • Bryder Omdø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.

  • Breaking Omdøbt $enable-prefers-reduced-motion-media-queryog $enable-pointer-cursor-for-buttonstil $enable-reduced-motionog $enable-button-pointersfor korthed.

  • Breaking Fjernede bg-gradient-variant()mixin. Brug .bg-gradientklassen til at tilføje gradienter til elementer i stedet for de genererede .bg-gradient-*klasser.

  • Breaking 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()

  • Bryder Omdø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 breakpoint! 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.
    • Breaking Omdø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.

  • Breaking Droppede flere .order-*klasser, der ofte gik ubrugte. Vi leverer nu kun .order-1til .order-5out of the box.

  • Breaking Droppede .mediakomponenten, da den let kan replikeres med hjælpeprogrammer. Se #28265 og siden med flex-værktøjer for et eksempel .

  • Brydning bootstrap-grid.css gæ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.

  • Breaking Reviderede 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.

  • Breaking Nested-tabeller arver ikke stilarter længere.

  • Breaking .thead-light and .thead-darkdroppes til fordel for .table-*variantklasserne, som kan bruges til alle tabelelementer ( thead, tbody, tfoot, tr, thog td).

  • Breaking Mixin 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.

  • Breaking Dropped .pre-scrollableklasse. Se #29135

  • Brydende .text-* hjælpeprogrammer tilføjer ikke svæve- og fokustilstande til links længere. .link-*hjælperklasser kan bruges i stedet. Se #29267

  • Breaking Dropped .text-justifyklasse. Se #29793

  • Brydende <hr> elementer bruges nu heighti stedet for borderat understøtte sizeattributten bedre. Dette gør det også muligt at bruge polstringsværktøjer til at skabe tykkere skillevægge (f.eks. <hr class="py-1">).

  • 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.

  • Bryder konsoliderede indbyggede 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.

  • Breaking Dropped .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.

  • Breaking Dropped form-specifikke layout klasser for vores grid system. Brug vores gitter og hjælpeprogrammer i stedet for .form-group, .form-row, eller .form-inline.

  • Breaking Form-etiketter kræver nu .form-label.

  • Brydning .form-text sætter 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

Advarsler

  • Advarsler har nu eksempler med ikoner .

  • Fjernede brugerdefinerede stilarter for <hr>s i hver advarsel, da de allerede bruger currentColor.

Badges

  • Breaking Droppede alle .badge-*farveklasser til baggrundsværktøjer (f.eks. brug .bg-primaryi stedet for .badge-primary).

  • Breaking Dropped .badge-pill- brug .rounded-pillværktøjet i stedet.

  • Breaking Fjernet svæve- og fokusstile for <a>og <button>elementer.

  • Øget standardpolstring for badges fra .25em/ .5emtil .35em/ .65em.

  • 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

  • Breaking Toggle-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.

  • Breaking Dropped .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

  • Breaking Droppet .card-decktil fordel for vores grid. 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).

  • Breaking Dropped .card-columnstil fordel for Masonry. Se #28922 .

  • Breaking Udskiftede den .cardbaserede harmonika med en ny harmonika-komponent .

  • 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

  • Breaking Omdøbt .closetil .btn-closefor et mindre generisk navn.

  • Luk-knapper bruger nu en background-image(indlejret SVG) i stedet for en &times;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.

  • 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.

  • Brydning Alle 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.

  • Breaking Dropped 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

Listegruppe

  • Tilføjet nye nullvariabler for font-size, font-weight, color, og :hover colortil .nav-linkklassen.
  • Breaking Navbars kræver nu en container indeni (for drastisk at forenkle krav til mellemrum og påkrævet CSS).

Offcanvas

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

  • Breaking Omdø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

  • Breaking Omdøbt .arrowtil .tooltip-arrowi vores standard værktøjstip-skabelon.

  • Breaking Standardværdien for fallbackPlacementser ændret til ['top', 'right', 'bottom', 'left']for bedre placering af popper-elementer.

  • Bryder Omdøbt whiteListmulighed til allowList.

Hjælpeprogrammer

  • Breaking Omdøbte 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.

  • Breaking Disabled 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 .

  • Breaking Omdøbt .text-monospacetil .font-monospace.

  • Breaking Fjernet .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.

  • Breaking Omdøbte .font-weight-*hjælpeprogrammer .fw-*for korthed og konsistens.

  • Breaking Omdøbte .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.

  • Breaking Fjernede .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

  • Breaking 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 .

  • Breaking "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.

  • Breaking Data-attributter for alle JavaScript-plugins er nu navneinddelt 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().