Ga naar hoofdinhoud Ga naar navigatie in documenten
in English

Migreren naar v5

Volg en bekijk wijzigingen in de Bootstrap-bronbestanden, documentatie en componenten om u te helpen migreren van v4 naar v5.

Op deze pagina

afhankelijkheden

  • jQuery laten vallen.
  • Opgewaardeerd van Popper v1.x naar Popper v2.x.
  • Libsass vervangen door Dart Sass omdat onze Sass-compiler gezien Libsass verouderd was.
  • Gemigreerd van Jekyll naar Hugo voor het bouwen van onze documentatie

Browserondersteuning

  • Internet Explorer 10 en 11 laten vallen
  • Dropped Microsoft Edge < 16 (Legacy Edge)
  • Gedropt Firefox < 60
  • Gedropt Safari < 12
  • Gedropt iOS Safari < 12
  • Chrome laten vallen < 60

Documentatie wijzigingen

  • Opnieuw ontworpen startpagina, lay-out van documenten en voettekst.
  • Nieuwe pakketgids toegevoegd .
  • Nieuwe sectie Aanpassen toegevoegd , ter vervanging van de themapagina van v4 , met nieuwe details over Sass, algemene configuratie-opties, kleurenschema's, CSS-variabelen en meer.
  • Alle formulierdocumentatie gereorganiseerd in een nieuwe sectie Formulieren , waarbij de inhoud is opgedeeld in meer gerichte pagina's.
  • Op dezelfde manier is het gedeelte Lay -out bijgewerkt om de rasterinhoud duidelijker uit te werken.
  • De componentpagina "Navs" hernoemd naar "Navs & Tabs".
  • Hernoemd "Checks" pagina naar "Checks & radio's".
  • De navigatiebalk opnieuw ontworpen en een nieuwe subnav toegevoegd om het gemakkelijker te maken om onze sites en documentenversies te omzeilen.
  • Nieuwe sneltoets toegevoegd voor het zoekveld: Ctrl + /.

Sass

  • We hebben de standaard Sass-kaartsamenvoegingen gedumpt om het gemakkelijker te maken om overbodige waarden te verwijderen. Houd er rekening mee dat je nu alle waarden in de Sass-kaarten moet definiëren, zoals $theme-colors. Bekijk hoe om te gaan met Sass-kaarten .

  • Brekencolor-yiq()Functie en gerelateerde variabelen hernoemd naar color-contrast()omdat het niet langer gerelateerd is aan YIQ-kleurruimte. Zie #30168.

    • $yiq-contrasted-thresholdwordt hernoemd naar $min-contrast-ratio.
    • $yiq-text-darken $yiq-text-lightworden respectievelijk hernoemd naar $color-contrast-darken $color-contrast-light.

  • BrekenDe parameters voor mediaquery's zijn gewijzigd voor een meer logische benadering.

    • media-breakpoint-down()gebruikt het breekpunt zelf in plaats van het volgende breekpunt (bijv. media-breakpoint-down(lg)in plaats van media-breakpoint-down(md)viewports kleiner dan lg).
    • Op dezelfde manier gebruikt de tweede parameter in media-breakpoint-between()ook het breekpunt zelf in plaats van het volgende breekpunt (bijvoorbeeld in media-between(sm, lg)plaats van media-breakpoint-between(sm, md)viewports tussen smen lg).

  • BrekenAfdrukstijlen en $enable-print-stylesvariabele verwijderd. Print display klassen zijn er nog steeds. Zie #28339 .

  • BrekenDropped color(), theme-color(), en gray()functies ten gunste van variabelen. Zie #29083 .

  • BrekenHernoemde theme-color-level()functie naar color-level()en accepteert nu elke gewenste kleur in plaats van alleen $theme-colorkleuren. Zie #29083 Let op: color-level() werd later binnengelaten v5.0.0-alpha3.

  • BrekenOmgedoopt tot $enable-prefers-reduced-motion-media-queryen voor de beknoptheid.$enable-pointer-cursor-for-buttons$enable-reduced-motion$enable-button-pointers

  • BrekenDe mix verwijderd bg-gradient-variant(). Gebruik de .bg-gradientklasse om verlopen toe te voegen aan elementen in plaats van de gegenereerde .bg-gradient-*klassen.

  • Breken Eerder verouderde mixins verwijderd:

    • hover, hover-focus, plain-hover-focus, enhover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(ook de bijbehorende utility-klasse laten vallen, .text-hide)
    • visibility()
    • form-control-focus()

  • BrekenHernoemde scale-color()functie shift-color()om botsing met Sass' eigen kleurschalingsfunctie te voorkomen.

  • box-shadowmixins staan ​​nu nullwaarden toe en laten vallen nonevan meerdere argumenten. Zie #30394 .

  • De border-radius()mixin heeft nu een standaardwaarde.

Kleur systeem

  • Het kleursysteem dat werkte met color-level()en $theme-color-intervalwerd verwijderd ten gunste van een nieuw kleursysteem. Alle lighten()en darken()functies in onze codebase worden vervangen door tint-color()en shade-color(). Deze functies mengen de kleur met wit of zwart in plaats van de lichtheid met een vaste hoeveelheid te veranderen. Afhankelijk van of de shift-color()gewichtsparameter positief of negatief is, wordt een kleur getint of geschaduwd. Zie #30622 voor meer details.

  • Nieuwe tinten en tinten toegevoegd voor elke kleur, met negen afzonderlijke kleuren voor elke basiskleur, als nieuwe Sass-variabelen.

  • Verbeterd kleurcontrast. Verhoogde kleurcontrastverhouding van 3:1 tot 4,5:1 en bijgewerkte blauwe, groene, cyaan en roze kleuren om WCAG 2.1 AA-contrast te garanderen. Ook onze kleurcontrastkleur gewijzigd van $gray-900naar $black.

  • Om ons kleursysteem te ondersteunen, hebben we nieuwe gewoontes tint-color()en shade-color()functies toegevoegd om onze kleuren op de juiste manier te mengen.

Rasterupdates

  • Nieuw breekpunt! Nieuw xxlbreekpunt toegevoegd voor 1400pxen hoger. Geen wijzigingen in alle andere breekpunten.

  • Verbeterde goten. Dakgoten zijn nu ingesteld in rems en zijn smaller dan v4 ( 1.5rem, of ongeveer 24px, lager vanaf 30px). Dit brengt de goten van ons rastersysteem op één lijn met onze afstandshulpprogramma's.

    • Nieuwe gootklasse ( .g-*, .gx-*, en .gy-*) toegevoegd om horizontale/verticale goten, horizontale goten en verticale goten te bedienen.
    • BrekenHernoemd .no-guttersnaar .g-0om overeen te komen met nieuwe goothulpprogramma's.

  • Kolommen zijn niet langer van position: relativetoepassing, dus u moet mogelijk .position-relativeenkele elementen toevoegen om dat gedrag te herstellen.

  • BrekenVerschillende .order-*klassen laten vallen die vaak ongebruikt bleven. We leveren nu alleen .order-1out .order-5-of-the-box.

  • BrekenHet .mediaonderdeel verwijderd omdat het gemakkelijk kan worden gerepliceerd met hulpprogramma's. Zie #28265 en de flex utilities-pagina voor een voorbeeld .

  • Breken bootstrap-grid.cssis nu alleen van toepassing box-sizing: border-boxop de kolom in plaats van de globale box-sizing opnieuw in te stellen. Op deze manier kunnen onze rasterstijlen op meer plaatsen worden gebruikt zonder interferentie.

  • $enable-grid-classesschakelt het genereren van containerklassen niet meer uit. Zie #29146.

  • make-colDe mixin bijgewerkt naar standaard naar gelijke kolommen zonder een opgegeven grootte.

Inhoud, opnieuw opstarten, enz.

  • RFS is nu standaard ingeschakeld. Koppen die defont-size()mixin gebruiken, passen hun schaal automatischfont-sizeaan met de viewport. Deze functie was eerder aangemeld bij v4.

  • BrekenOnze weergavetypografie gereviseerd om onze $display-*variabelen te vervangen en met een $display-font-sizesSass-kaart. Ook de individuele $display-*-weightvariabelen voor een enkele $display-font-weighten aangepaste font-sizes verwijderd.

  • Twee nieuwe .display-*kopgroottes toegevoegd, .display-5en .display-6.

  • Links zijn standaard onderstreept (niet alleen bij de muisaanwijzer), tenzij ze deel uitmaken van specifieke componenten.

  • Herontworpen tabellen om hun stijlen te vernieuwen en ze opnieuw op te bouwen met CSS-variabelen voor meer controle over styling.

  • BrekenGeneste tabellen nemen geen stijlen meer over.

  • Breken .thead-lighten .thead-darkworden weggelaten ten gunste van de .table-*variantklassen die voor alle tabelelementen kunnen worden gebruikt ( thead, tbody, tfoot, tr, then td).

  • BrekenDe table-row-variant()mixin wordt hernoemd naar table-variant()en accepteert slechts 2 parameters: $color(kleurnaam) en $value(kleurcode). De randkleur en accentkleuren worden automatisch berekend op basis van de tabelfactorvariabelen.

  • Splits tabelcelopvullingsvariabelen in -yen -x.

  • BrekenGevallen .pre-scrollableklasse. Zie #29135

  • Breken .text-*hulpprogramma's voegen geen hover- en focusstatussen meer toe aan links. .link-*In plaats daarvan kunnen helperklassen worden gebruikt. Zie #29267

  • BrekenGevallen .text-justifyklasse. Zie #29793

  • Breken <hr>elementen gebruiken nu in heightplaats van borderom het sizeattribuut beter te ondersteunen. Dit maakt ook het gebruik van opvulhulpmiddelen mogelijk om dikkere verdelers te maken (bijv. <hr class="py-1">).

  • Reset standaard horizontaal padding-leftop <ul>en <ol>elementen van browser standaard 40pxnaar 2rem.

  • Toegevoegd $enable-smooth-scroll, dat scroll-behavior: smoothwereldwijd van toepassing is, behalve voor gebruikers die om minder beweging vragen via prefers-reduced-motionmediaquery's. Zie #31877

RTL

  • Horizontale richting-specifieke variabelen, hulpprogramma's en mixins zijn allemaal hernoemd om logische eigenschappen te gebruiken zoals die in flexbox-lay-outs worden gevonden, bijvoorbeeld starten endin plaats van leften right.

Formulieren

  • Nieuwe zwevende formulieren toegevoegd! We hebben het voorbeeld van zwevende labels gepromoot naar volledig ondersteunde formuliercomponenten. Zie de nieuwe pagina Zwevende labels.

  • Breken Geconsolideerde native en aangepaste formulierelementen. Selectievakjes, radio's, selecties en andere invoer met native en aangepaste klassen in v4 zijn geconsolideerd. Nu zijn bijna al onze formulierelementen volledig aangepast, de meeste zonder de noodzaak van aangepaste HTML.

    • .custom-checkis nu .form-check.
    • .custom-check.custom-switchis nu .form-check.form-switch.
    • .custom-selectis nu .form-select.
    • .custom-fileen .form-filezijn vervangen door aangepaste stijlen bovenop .form-control.
    • .custom-rangeis nu .form-range.
    • Inheems .form-control-fileen .form-control-range.

  • BrekenGedropt .input-group-appenden .input-group-prepend. U kunt nu gewoon knoppen toevoegen en .input-group-textals directe kinderen van de invoergroepen.

  • De al lang bestaande ontbrekende grensradius op invoergroep met validatiefeedback-bug is eindelijk opgelost door een extra .has-validationklasse toe te voegen aan invoergroepen met validatie.

  • Breken Vormspecifieke lay-outklassen voor ons rastersysteem laten vallen. Gebruik ons ​​netwerk en hulpprogramma's in plaats van .form-group, .form-row, of .form-inline.

  • BrekenFormulierlabels vereisen nu .form-label.

  • Breken .form-textniet langer sets display, zodat u naar wens inline- of blokkeerhulptekst kunt maken door het HTML-element te wijzigen.

  • Validatiepictogrammen worden niet langer toegepast op <select>s met multiple.

  • Herschikte bron Sass-bestanden onder scss/forms/, inclusief invoergroepstijlen.

Componenten

  • Uniforme paddingwaarden voor waarschuwingen, broodkruimels, kaarten, vervolgkeuzelijsten, lijstgroepen, modals, popovers en tooltips die op onze $spacervariabele moeten worden gebaseerd. Zie #30564 .

Accordeon

Waarschuwingen

  • Waarschuwingen hebben nu voorbeelden met pictogrammen .

  • Aangepaste stijlen voor <hr>s in elke waarschuwing verwijderd omdat ze al currentColor.

Insignes

  • BrekenAlle .badge-*kleurklassen voor achtergrondhulpprogramma's verwijderd (bijv. gebruiken .bg-primaryin plaats van .badge-primary).

  • BrekenDropped .badge-pill—gebruik .rounded-pillin plaats daarvan het hulpprogramma.

  • BrekenAanwijzer- en focusstijlen voor <a>en <button>elementen verwijderd.

  • Verhoogde standaard opvulling voor badges van .25em/ .5emnaar .35em/ .65em.

  • Vereenvoudigde de standaardweergave van breadcrumbs door padding, background-color, en te verwijderen border-radius.

  • Nieuwe aangepaste CSS-eigenschap toegevoegd --bs-breadcrumb-dividervoor eenvoudige aanpassing zonder dat CSS opnieuw hoeft te worden gecompileerd.

Toetsen

  • Breken Schakelknoppen , met selectievakjes of radio's, hebben geen JavaScript meer nodig en hebben nieuwe opmaak. We hebben niet langer een verpakkingselement nodig, voegen toe.btn-checkaan de<input>, en koppelen deze aan.btnklassen op de<label>. Zie #30650 . De documenten hiervoor zijn verplaatst van onze pagina Knoppen naar de nieuwe sectie Formulieren.

  • Breken Gedropt .btn-blockvoor nutsbedrijven. In plaats van .btn-blockop de te gebruiken .btn, wikkel je je knoppen met .d-griden een .gap-*hulpprogramma om ze naar behoefte te spreiden. Schakel over naar responsieve klassen voor nog meer controle over hen. Lees de documenten voor enkele voorbeelden.

  • Onze button-variant()en button-outline-variant()mixins bijgewerkt om aanvullende parameters te ondersteunen.

  • Bijgewerkte knoppen voor meer contrast bij zweven en actieve statussen.

  • Uitgeschakelde knoppen hebben nu pointer-events: none;.

Kaart

  • BrekenGedropt .card-deckten gunste van ons raster. Wikkel uw kaarten in kolomklassen en voeg een bovenliggende .row-cols-*container toe om kaartspellen opnieuw te maken (maar met meer controle over responsieve uitlijning).

  • BrekenGedropt .card-columnsten gunste van metselwerk. Zie #28922 .

  • BrekenDe .cardgebaseerde accordeon vervangen door een nieuwe accordeoncomponent .

  • Nieuwe .carousel-darkvariant toegevoegd voor donkere tekst, bedieningselementen en indicatoren (ideaal voor lichtere achtergronden).

  • Chevronpictogrammen voor carrouselbesturing vervangen door nieuwe SVG's van Bootstrap Icons .

Sluit knop

  • BrekenOmgedoopt .closetot .btn-closevoor een minder generieke naam.

  • Knoppen voor sluiten gebruiken nu een background-image(ingebedde SVG) in plaats van een &times;in de HTML, waardoor aanpassingen eenvoudiger zijn zonder dat u uw markeringen hoeft aan te raken.

  • Nieuwe .btn-close-whitevariant toegevoegd die gebruikt filter: invert(1)om afwijzingspictogrammen met een hoger contrast in te schakelen tegen donkere achtergronden.

Instorten

  • Scrollverankering voor accordeons verwijderd.

  • Nieuwe .dropdown-menu-darkvariant en bijbehorende variabelen toegevoegd voor on-demand donkere vervolgkeuzelijsten.

  • Nieuwe variabele toegevoegd voor $dropdown-padding-x.

  • De dropdown-verdeler is donkerder gemaakt voor een beter contrast.

  • BrekenAlle gebeurtenissen voor de vervolgkeuzelijst worden nu geactiveerd op de vervolgkeuzeknop en vervolgens naar het bovenliggende element gebubbeld.

  • Vervolgkeuzemenu's hebben nu een data-bs-popper="static"attribuut ingesteld wanneer de positionering van de vervolgkeuzelijst statisch is en data-bs-popper="none"wanneer de vervolgkeuzelijst zich in de navigatiebalk bevindt. Dit wordt toegevoegd door ons JavaScript en helpt ons om aangepaste positiestijlen te gebruiken zonder de positionering van Popper te verstoren.

  • BrekenOptie flipvoor dropdown-plug-in weggelaten ten gunste van native Popper-configuratie. U kunt het flipping-gedrag nu uitschakelen door een lege array door te geven voor fallbackPlacementsoptie in flip - modifier.

  • Er kunnen nu vervolgkeuzemenu's worden aangeklikt met een nieuwe autoCloseoptie om het gedrag van automatisch sluiten af ​​te handelen . U kunt deze optie gebruiken om de klik binnen of buiten het vervolgkeuzemenu te accepteren om het interactief te maken.

  • Dropdowns ondersteunen nu .dropdown-items verpakt in <li>s.

Jumbotron

Lijst groep

  • Nieuwe nullvariabelen toegevoegd voor font-size, font-weight, coloren :hover coloraan de .nav-linkklasse.
  • BrekenNavbars vereisen nu een container binnen (om de spatiëringsvereisten en CSS-vereisten drastisch te vereenvoudigen).

Off-canvas

Paginering

  • Pagineringslinks kunnen nu worden aangepast margin-leften dynamisch worden afgerond op alle hoeken wanneer ze van elkaar zijn gescheiden.

  • transitionS aan paginatielinks toegevoegd .

Popovers

  • BrekenHernoemd .arrownaar .popover-arrowin onze standaard popover-sjabloon.

  • Hernoemde whiteListoptie naar allowList.

Spinners

  • Spinners eren nu prefers-reduced-motion: reducedoor animaties te vertragen. Zie #31882 .

  • Verbeterde verticale uitlijning van de spinner.

Toast

  • Toasts kunnen nu in een a worden gepositioneerd.toast-container met behulp van positioneringshulpmiddelen .

  • Standaard toastduur gewijzigd in 5 seconden.

  • Verwijderd overflow: hiddenvan toast en vervangen door de juiste border-radiuss met calc()functies.

Knopinfo

  • BrekenHernoemd .arrownaar .tooltip-arrowin onze standaard tooltip-sjabloon.

  • BrekenDe standaardwaarde voor de fallbackPlacementsis gewijzigd in ['top', 'right', 'bottom', 'left']voor een betere plaatsing van popper-elementen.

  • BrekenHernoemde whiteListoptie naar allowList.

Nutsvoorzieningen

  • BrekenVerschillende hulpprogramma's hernoemd om logische eigenschapsnamen te gebruiken in plaats van richtingsnamen met de toevoeging van RTL-ondersteuning:

    • Hernoemd .left-*en .right-*naar .start-*en .end-*.
    • Hernoemd .float-leften .float-rightnaar .float-starten .float-end.
    • Hernoemd .border-leften .border-rightnaar .border-starten .border-end.
    • Hernoemd .rounded-leften .rounded-rightnaar .rounded-starten .rounded-end.
    • Hernoemd .ml-*en .mr-*naar .ms-*en .me-*.
    • Hernoemd .pl-*en .pr-*naar .ps-*en .pe-*.
    • Hernoemd .text-leften .text-rightnaar .text-starten .text-end.

  • BrekenNegatieve marges standaard uitgeschakeld.

  • Nieuwe .bg-bodyklasse toegevoegd voor het snel instellen van de <body>achtergrond van extra elementen.

  • Nieuwe positiehulpprogramma's toegevoegd voor top, right, bottom, en left. Waarden omvatten 0, 50%, en 100%voor elke eigenschap.

  • Nieuwe .translate-middle-xen .translate-middle-yhulpprogramma's toegevoegd om absolute/vast gepositioneerde elementen horizontaal of verticaal te centreren.

  • Nieuwe border-widthhulpprogramma's toegevoegd .

  • BrekenHernoemd .text-monospacenaar .font-monospace.

  • BrekenVerwijderd .text-hideomdat het een verouderde methode is om tekst te verbergen die niet meer zou moeten worden gebruikt.

  • .fs-*Hulpprogramma's voor hulpprogramma's toegevoegd font-size(met RFS ingeschakeld). Deze gebruiken dezelfde schaal als de standaardkoppen van HTML (1-6, groot naar klein) en kunnen worden gewijzigd via Sass-kaart.

  • BrekenHernoemde .font-weight-*hulpprogramma's .fw-*voor beknoptheid en consistentie.

  • BrekenHernoemde .font-style-*hulpprogramma's .fst-*voor beknoptheid en consistentie.

  • Toegevoegd .d-gridom hulpprogramma's en nieuwe gaphulpprogramma's ( .gap) weer te geven voor CSS-raster- en flexboxlay-outs.

  • BrekenVerwijderd .rounded-smen rounded-lg, en introduceerde een nieuwe schaal van klassen, .rounded-0naar .rounded-3. Zie #31687 .

  • Nieuwe line-heighthulpprogramma's toegevoegd: .lh-1, .lh-sm, .lh-baseen .lh-lg. Zie hier .

  • Het hulpprogramma in onze CSS verplaatst .d-noneom het meer gewicht te geven dan andere weergavehulpprogramma's.

  • De .visually-hidden-focusablehelper uitgebreid om ook aan containers te werken, met behulp van :focus-within.

Helpers

  • Breken Responsieve embed-helpers zijn hernoemd naar ratio-helpers met nieuwe klassenamen en verbeterd gedrag, evenals een handige CSS-variabele.

    • Klassen zijn hernoemd om te veranderen byin xde beeldverhouding. .ratio-16by9Is nu bijvoorbeeld .ratio-16x9.
    • We hebben de .embed-responsive-itemen elementgroepselector laten vallen ten gunste van een eenvoudigere .ratio > *selector. Er is geen klasse meer nodig en de ratio-helper werkt nu met elk HTML-element.
    • De $embed-responsive-aspect-ratiosSass-kaart is hernoemd naar $aspect-ratiosen de waarden zijn vereenvoudigd om de klassenaam en het percentage als het key: valuepaar op te nemen.
    • CSS-variabelen worden nu gegenereerd en opgenomen voor elke waarde in de Sass-kaart. Wijzig de --bs-aspect-ratiovariabele op de .ratioom een ​​aangepaste beeldverhouding te maken .

  • Breken "Schermlezer" klassen zijn nu "visueel verborgen" klassen .

    • Het Sass-bestand gewijzigd van scss/helpers/_screenreaders.scssnaarscss/helpers/_visually-hidden.scss
    • Hernoemd .sr-onlyen .sr-only-focusablenaar .visually-hiddenen.visually-hidden-focusable
    • Hernoemd sr-only()en sr-only-focusable()mixins naar visually-hidden()en visually-hidden-focusable().

  • bootstrap-utilities.cssnu ook onze helpers. Helpers hoeven niet meer te worden geïmporteerd in aangepaste builds.

JavaScript

  • JQuery-afhankelijkheid verwijderd en plug-ins herschreven om in normaal JavaScript te zijn.

  • BrekenGegevenskenmerken voor alle JavaScript-plug-ins hebben nu een naamruimte om de Bootstrap-functionaliteit te onderscheiden van derden en uw eigen code. We gebruiken bijvoorbeeld in data-bs-toggleplaats van data-toggle.

  • Alle plug-ins kunnen nu een CSS-selector als eerste argument accepteren. U kunt een DOM-element of een geldige CSS-selector doorgeven om een ​​nieuwe instantie van de plug-in te maken:

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

  • popperConfigkan worden doorgegeven als een functie die de standaard Popper-configuratie van Bootstrap als argument accepteert, zodat je deze standaardconfiguratie op jouw manier kunt samenvoegen. Is van toepassing op vervolgkeuzemenu's, popovers en knopinfo.

  • De standaardwaarde voor de fallbackPlacementsis gewijzigd in ['top', 'right', 'bottom', 'left']voor een betere plaatsing van Popper-elementen. Is van toepassing op vervolgkeuzemenu's, popovers en knopinfo.

  • Onderstrepingsteken verwijderd uit openbare statische methoden zoals _getInstance()→ getInstance().