Gean nei haadynhâld Gean nei dokumintnavigaasje
in English

Migrearje nei v5

Track en kontrolearje feroarings oan de Bootstrap-boarnebestannen, dokumintaasje en komponinten om jo te helpen migrearje fan v4 nei v5.

Op dizze side

Ofhinklikens

  • JQuery ferdwûn.
  • Opwurdearre fan Popper v1.x nei Popper v2.x.
  • Libsass ferfongen troch Dart Sass, om't ús Sass-kompiler jûn Libsass waard ôfkard.
  • Migrearre fan Jekyll nei Hugo foar it bouwen fan ús dokumintaasje

Browser stipe

  • Internet Explorer 10 en 11 falle
  • Ferfallen Microsoft Edge <16 (Legacy Edge)
  • Firefox <60 ferdwûn
  • Safari ferdwûn < 12
  • iOS Safari ferdwûn < 12
  • Chrome ferdwûn <60

Dokumintaasje feroarings

  • Op 'e nij ûntworpen thússide, yndieling fan dokuminten en footer.
  • Nije pakketgids tafoege .
  • Nije seksje Oanpast tafoege , ferfanging fan v4's Theming-side , mei nije details oer Sass, globale konfiguraasjeopsjes, kleurskema's, CSS-fariabelen, en mear.
  • Reorganisearre alle formulierdokumintaasje yn nije Formulieren seksje , brekke de ynhâld út yn mear rjochte siden.
  • Lykas, bywurke de seksje Layout , om rasterynhâld dúdliker te meitsjen.
  • Omneamd "Navs" komponint side nei "Navs & Tabs".
  • Omneamd "Kontrôles" side nei "Kontrôles en radio's".
  • De navigaasjebalke opnij ûntworpen en in nije subnav tafoege om it makliker te meitsjen om ús siden en ferzjes fan dokuminten te krijen.
  • Nije fluchtoets tafoege foar it sykfjild: Ctrl + /.

Sass

  • Wy hawwe de standert Sass-kaartfúzjes fuortsmiten om it makliker te meitsjen om oerstallige wearden te ferwiderjen. Hâld der rekken mei dat jo no alle wearden moatte definiearje yn 'e Sass-kaarten lykas $theme-colors. Besjoch hoe't jo omgean mei Sass-kaarten .

  • BrekkeOmneamd color-yiq()funksje en besibbe fariabelen color-contrast()om't it net mear is relatearre oan YIQ-kleurromte. Sjoch #30168.

    • $yiq-contrasted-thresholdwurdt omneamd ta $min-contrast-ratio.
    • $yiq-text-darken $yiq-text-lightwurde respektivelik omneamd ta $color-contrast-darken $color-contrast-light.

  • BrekkeMedia query mixins parameters binne feroare foar in mear logyske oanpak.

    • media-breakpoint-down()brûkt it brekpunt sels ynstee fan it folgjende brekpunt (bgl. media-breakpoint-down(lg)ynstee fan media-breakpoint-down(md)doelen viewports lytser as lg).
    • Lykas media-breakpoint-between()brûkt de twadde parameter yn ek it brekpunt sels yn stee fan it folgjende brekpunt (bgl. media-between(sm, lg)ynstee fan media-breakpoint-between(sm, md)doelen viewports tusken smen lg).

  • BrekkeFuortsmite printstilen en $enable-print-stylesfariabele. Printwerjefteklassen binne noch rûn. Sjoch #28339 .

  • BrekkeDropped color(), theme-color(), en gray()funksjonearret yn it foardiel fan fariabelen. Sjoch #29083 .

  • BrekkeFunksje omneamd theme-color-level()nei color-level()en akseptearret no elke kleur dy't jo wolle ynstee fan allinich $theme-colorkleuren. Sjoch # 29083 Pas op: color-level() waard letter ynlutsen v5.0.0-alpha3.

  • BrekkeOmneamd $enable-prefers-reduced-motion-media-queryen $enable-pointer-cursor-for-buttonsta $enable-reduced-motionen $enable-button-pointersfoar koarteheid.

  • BrekkeFuortsmite de bg-gradient-variant()mixin. Brûk de .bg-gradientklasse om gradiënten ta te foegjen oan eleminten ynstee fan de generearre .bg-gradient-*klassen.

  • Brekke Ferwidere earder ferâldere mixins:

    • hover, hover-focus, plain-hover-focus, enhover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(de byhearrende nutsklasse ek falle, .text-hide)
    • visibility()
    • form-control-focus()

  • Brekkescale-color()Funksje omneamd shift-color()ta om botsing te foarkommen mei Sass's eigen kleurskaalfunksje.

  • box-shadowmixins tastean no nullwearden en falle noneút meardere arguminten. Sjoch #30394 .

  • De border-radius()mixin hat no in standertwearde.

Kleur systeem

  • It kleursysteem dat wurke mei color-level()en $theme-color-intervalwaard fuorthelle yn it foardiel fan in nij kleursysteem. Alle lighten()en darken()funksjes yn ús codebase wurde ferfongen troch tint-color()en shade-color(). Dizze funksjes sille de kleur mingje mei wyt of swart ynstee fan har ljochtheid te feroarjen mei in fêst bedrach. It shift-color()sil in kleur tint of skaden ôfhinklik fan oft de gewichtsparameter posityf of negatyf is. Sjoch #30622 foar mear details.

  • Nije tinten en skaden tafoege foar elke kleur, en jouwe njoggen aparte kleuren foar elke basiskleur, as nije Sass-fariabelen.

  • Ferbettere kleurkontrast. Bumped kleurkontrastferhâlding fan 3:1 oant 4.5:1 en bywurke blauwe, griene, cyaan en roze kleuren om WCAG 2.1 AA kontrast te garandearjen. Ek feroare ús kleurkontrastkleur fan $gray-900nei $black.

  • Om ús kleursysteem te stypjen, hawwe wy nije oanpaste tint-color()en shade-color()funksjes tafoege om ús kleuren passend te mingjen.

Grid updates

  • Nij brekpunt! xxlNij brekpunt tafoege foar 1400pxen omheech. Gjin feroarings oan alle oare brekpunten.

  • Ferbettere goaten. Gutters wurde no ynsteld yn rems, en binne smeller as v4 ( 1.5rem, of oer 24px, del fan 30px). Dit bringt de goten fan ús rastersysteem yn oerienstimming mei ús nutsfoarsjenningen foar ôfstân.

    • Nije gutterklasse tafoege ( .g-*, .gx-*, en .gy-*) om horizontale / fertikale gutters, horizontale gutters en fertikale gutters te kontrolearjen.
    • BrekkeOmneamd .no-guttersta .g-0om oerien te kommen mei nije nutsfoarsjenningen.

  • Kolommen binne net mear position: relativetapast, dus jo moatte miskien .position-relativeoan guon eleminten tafoegje om dat gedrach te herstellen.

  • BrekkeFerskate .order-*klassen falle dy't faak net brûkt waarden. Wy leverje no allinich .order-1oan .order-5út 'e doaze.

  • BrekkeIt .mediakomponint sakke, om't it maklik kin wurde replikearre mei nutsbedriuwen. Sjoch #28265 en de side fan flex-utilities foar in foarbyld .

  • Brekke bootstrap-grid.cssjildt no allinnich box-sizing: border-boxfoar de kolom ynstee fan it resetten fan de globale doaze-sizing. Op dizze manier kinne ús rasterstilen sûnder ynterferinsje op mear plakken brûkt wurde.

  • $enable-grid-classesskeakelt de generaasje fan kontenerklassen net mear út. Sjoch #29146.

  • Bywurke de make-colmixin nei standert nei lykweardige kolommen sûnder in spesifisearre grutte.

Ynhâld, Reboot, ensfh

  • RFS is no standert ynskeakele. Kopteksten dy't defont-size()mixin brûke sille har automatysk oanpassefont-sizeoan skaal mei de viewport. Dizze funksje wie earder opt-in mei v4.

  • BrekkeOerhauled ús display typografy te ferfangen ús $display-*fariabelen en mei in $display-font-sizesSass kaart. Ek fuorthelle de yndividuele $display-*-weightfariabelen foar in inkele $display-font-weighten oanpast font-sizes.

  • Twa nije .display-*koptekstgrutte tafoege, .display-5en .display-6.

  • Keppelings wurde standert ûnderstreke (net allinich op hover), útsein as se diel útmeitsje fan spesifike komponinten.

  • Tafels opnij ûntwurpen om har stilen te ferfarskjen en opnij op te bouwen mei CSS-fariabelen foar mear kontrôle oer styling.

  • BrekkeNeste tabellen erven gjin stilen mear.

  • Brekke .thead-lighten .thead-darkwurde sakke yn it foardiel fan 'e .table-*fariantklassen dy't brûkt wurde kinne foar alle tabeleleminten ( thead, tbody, tfoot, tr, then td).

  • BrekkeDe table-row-variant()mixin wurdt omneamd ta table-variant()en akseptearret mar 2 parameters: $color(kleur namme) en $value(kleur koade). De rânekleur en aksintkleuren wurde automatysk berekkene op basis fan de tabelfaktorfariabelen.

  • Split tabel sel padding fariabelen yn -yen -x.

  • BrekkeKlasse falle .pre-scrollable. Sjoch #29135

  • Brekke .text-*nutsbedriuwen foegje gjin hover- en fokussteaten mear ta oan keppelings. .link-*helper klassen kinne brûkt wurde ynstee. Sjoch #29267

  • BrekkeKlasse falle .text-justify. Sjoch #29793

  • Brekke <hr>eleminten brûke no heightynstee fan borderom it sizeattribút better te stypjen. Dit makket ek it brûken fan padding-nutsbedriuwen mooglik om dikkere skiedings te meitsjen (bgl. <hr class="py-1">).

  • Reset standert horizontaal padding-leftop <ul>en <ol>eleminten fan browser standert 40pxnei 2rem.

  • Tafoege $enable-smooth-scroll, wat scroll-behavior: smoothglobaal jildt - útsein brûkers dy't freegje om fermindere beweging fia prefers-reduced-motionmediafraach. Sjoch #31877

RTL

  • Horizontale rjochtingsspesifike fariabelen, nutsbedriuwen en mixins binne allegear omneamd om logyske eigenskippen te brûken lykas dy fûn yn flexbox-yndielingen - bygelyks starten endyn stee fan leften right.

Formulieren

  • Nije driuwende formulieren tafoege! Wy hawwe it foarbyld Floating labels promovearre ta folslein stipe formulierkomponinten. Sjoch de nije Floating labels side.

  • Brekke Konsolidearre native en oanpaste foarm eleminten. Checkboxes, radio's, selekten en oare ynputen dy't native en oanpaste klassen hiene yn v4 binne konsolidearre. No binne hast al ús formuliereleminten folslein oanpast, meast sûnder de needsaak foar oanpaste HTML.

    • .custom-checkis no .form-check.
    • .custom-check.custom-switchis no .form-check.form-switch.
    • .custom-selectis no .form-select.
    • .custom-fileen .form-filebinne ferfongen troch oanpaste stilen boppe op .form-control.
    • .custom-rangeis no .form-range.
    • Falle lânseigen .form-control-fileen .form-control-range.

  • BrekkeFallen .input-group-appenden .input-group-prepend. Jo kinne no gewoan knoppen tafoegje en .input-group-textas direkte bern fan 'e ynfiergroepen.

  • De lang besteande Missing grins radius op ynfier groep mei falidaasje feedback bug is úteinlik reparearre troch it tafoegjen fan in ekstra .has-validationklasse oan ynfier groepen mei falidaasje.

  • Brekke Formspesifike opmaakklassen falle foar ús rastersysteem. Brûk ús raster en nutsbedriuwen ynstee fan .form-group, .form-row, of .form-inline.

  • BrekkeFoarmetiketten binne no nedich .form-label.

  • Brekke .form-textnet mear ynsteld display, wêrtroch jo helptekst kinne oanmeitsje of blokkearje as jo wolle, gewoan troch it HTML-elemint te feroarjen.

  • Validaasje-ikoanen wurde net mear tapast op <select>s mei multiple.

  • Rearranged boarne Sass triemmen ûnder scss/forms/, ynklusyf input groep stilen.

Components

  • Uniformeare paddingwearden foar warskôgings, breadcrumbs, kaarten, dropdowns, listgroepen, modalen, popovers en tooltips om te basearjen op ús $spacerfariabele. Sjoch #30564 .

Akkordeon

Alerts

  • Alerts hawwe no foarbylden mei ikoanen .

  • Oanpaste stilen fuortsmiten foar <hr>s yn elke warskôging, om't se al brûke currentColor.

Badges

  • BrekkeAlle .badge-*kleurklassen foar eftergrûnhelpprogramma's falle (bgl. brûke .bg-primaryynstee fan .badge-primary).

  • BrekkeDropped - brûke ynstee .badge-pillit .rounded-pillhulpprogramma.

  • BrekkeFerwidere hover- en fokusstilen foar <a>en <button>eleminten.

  • Fergrutte standert padding foar badges fan .25em/ .5emnei .35em/ .65em.

  • Fersifere de standert uterlik fan breadcrumbs troch padding, background-color, en border-radius.

  • Nije oanpaste CSS-eigendom tafoege --bs-breadcrumb-dividerfoar maklike oanpassing sûnder CSS opnij te kompilearjen.

Knoppen

  • Brekke Knoppen wikselje , mei karfakjes of radio's, hawwe gjin JavaScript mear nedich en hawwe nije opmaak. Wy fereaskje net mear in wrapping elemint, heakjen.btn-checkoan de<input>, en keppelje it mei alle.btnklassen op 'e<label>. Sjoch #30650 . De dokuminten hjirfoar binne ferpleatst fan ús Knoppen-side nei de nije seksje Formulieren.

  • Brekke Falle .btn-blockfoar nutsbedriuwen. Yn stee fan te brûken .btn-blockop de .btn, wrap jo knoppen mei .d-griden in .gap-*nut foar romte se as nedich. Skeakelje nei responsive klassen foar noch mear kontrôle oer har. Lês de dokuminten foar guon foarbylden.

  • Us button-variant()en button-outline-variant()mixins bywurke om ekstra parameters te stypjen.

  • Bywurke knoppen om ferhege kontrast te garandearjen op hover en aktive steaten.

  • Utskeakele knoppen hawwe no pointer-events: none;.

Kaart

  • BrekkeFalle .card-deckyn it foardiel fan ús raster. Wrap jo kaarten yn kolomklassen en foegje in âlderkontener .row-cols-*ta om kaartdekken opnij te meitsjen (mar mei mear kontrôle oer responsive ôfstimming).

  • BrekkeFalle .card-columnsyn it foardiel fan Masonry. Sjoch #28922 .

  • BrekkeFerfong de .cardbasearre akkordeon mei in nije akkordeon-komponint .

  • .carousel-darkNije fariant tafoege foar donkere tekst, kontrôles en yndikatoaren (geweldich foar lichtere eftergrûnen).

  • Ferfongen chevron-ikoanen foar karrouselkontrôles mei nije SVG's fan Bootstrap Icons .

Knop slute

  • BrekkeOmneamd .closeta .btn-closefoar in minder generyske namme.

  • Slútknoppen brûke no in background-image(ynbêde SVG) ynstee fan in &times;yn 'e HTML, wêrtroch makliker oanpassing is sûnder de needsaak om jo markearring oan te raken.

  • .btn-close-whiteNije fariant tafoege dy't brûkt filter: invert(1)wurdt om ikoanen mei hegere kontrast yn te skeakeljen tsjin donkere eftergrûnen.

Ynsakje

  • Fuortsmite scroll anchoring foar akkordeons.

  • Nije fariant en byhearrende fariabelen tafoege .dropdown-menu-darkfoar donkere dropdowns op oanfraach.

  • Nije fariabele tafoege foar $dropdown-padding-x.

  • Fertsjustere de dellûkferdieling foar ferbettere kontrast.

  • BrekkeAlle eveneminten foar it dellûkmenu wurde no aktivearre op 'e útklapknop knop en dan bubbele nei it âlderelemint.

  • Dropdown-menu's hawwe no in data-bs-popper="static"attribút ynsteld as de posysje fan it dropdown statysk is en data-bs-popper="none"as it dropdown yn 'e navbar is. Dit wurdt tafoege troch ús JavaSkript en helpt ús oanpaste posysjestilen te brûken sûnder de posysjonearring fan Popper te bemuoien.

  • BrekkeOpsje falle flipfoar dropdown-plugin yn it foardiel fan native Popper-konfiguraasje. Jo kinne no it flipgedrach útskeakelje troch in lege array troch te jaan foar fallbackPlacementsopsje yn flipmodifier .

  • Dropdown-menu's kinne no klikber wêze mei in nije autoCloseopsje om it gedrach fan automatysk sluten te behanneljen . Jo kinne dizze opsje brûke om de klik binnen of bûten it útklapmenu te akseptearjen om it ynteraktyf te meitsjen.

  • Dropdowns stypje no .dropdown-items ferpakt yn <li>s.

Jumbotron

List groep

  • nullNije fariabelen tafoege foar font-size, font-weight, color, en :hover coloroan 'e .nav-linkklasse.
  • BrekkeNavbars fereaskje no in kontener binnen (om de ôfstâneasken drastysk te ferienfâldigjen en CSS fereaske).

Offcanvas

Paginaasje

  • Pagineringskeppelings binne no oanpasber margin-leftdy't dynamysk rûn binne op alle hoeken as se fan elkoar skieden binne.

  • Added transitions oan pagineringslinks.

Popovers

  • BrekkeOmneamd .arrowta .popover-arrowyn ús standert popover-sjabloan.

  • Opsje omneamd whiteListnei allowList.

Spinners

  • Spinners earje no prefers-reduced-motion: reducetroch animaasjes te fertragen. Sjoch #31882 .

  • Ferbettere fertikale ôfstimming fan spinner.

Toasts

  • Toast kin no wurde pleatst yn in .toast-containermei help fan posisjonearring nutsbedriuwen .

  • Feroare standert toast doer nei 5 sekonden.

  • Fuortsmiten overflow: hiddenfan toasts en ferfongen mei goede border-radiuss mei calc()funksjes.

Tooltips

  • BrekkeOmneamd .arrowta .tooltip-arrowyn ús standert tooltip-sjabloan.

  • BrekkeDe standertwearde foar de fallbackPlacementswurdt feroare nei ['top', 'right', 'bottom', 'left']foar bettere pleatsing fan popper-eleminten.

  • BrekkeOpsje omneamd whiteListnei allowList.

Utilities

  • BrekkeFerneamde ferskate nutsbedriuwen om logyske eigenskipsnammen te brûken ynstee fan rjochtingsnammen mei de tafoeging fan RTL-stipe:

    • Omneamd .left-*en .right-*nei .start-*en .end-*.
    • Omneamd .float-leften .float-rightnei .float-starten .float-end.
    • Omneamd .border-leften .border-rightnei .border-starten .border-end.
    • Omneamd .rounded-leften .rounded-rightnei .rounded-starten .rounded-end.
    • Omneamd .ml-*en .mr-*nei .ms-*en .me-*.
    • Omneamd .pl-*en .pr-*nei .ps-*en .pe-*.
    • Omneamd .text-leften .text-rightnei .text-starten .text-end.

  • BrekkeStandert útskeakele negative marzjes.

  • Nije klasse tafoege .bg-bodyfoar it fluch ynstellen fan <body>'e eftergrûn op ekstra eleminten.

  • Nije posysje nutsbedriuwen tafoege foar top, right, bottom, en left. Wearden omfetsje 0, 50%, en 100%foar elk pân.

  • Nije nutsfoarsjenningen tafoege om absolute .translate-middle-x/ .translate-middle-yfêste pleatste eleminten horizontaal as fertikaal te centreren.

  • border-widthNije nutsfoarsjenningen tafoege .

  • BrekkeOmneamd .text-monospaceta .font-monospace.

  • BrekkeFuortsmite .text-hideom't it in ferâldere metoade is foar it ferbergjen fan tekst dy't net mear brûkt wurde moat.

  • Hulpprogramma's tafoege .fs-*foar font-sizenutsbedriuwen (mei RFS ynskeakele). Dizze brûke deselde skaal as de standertkoppen fan HTML (1-6, grut oant lyts), en kinne wizige wurde fia Sass-kaart.

  • BrekkeOmneamde .font-weight-*nutsbedriuwen as .fw-*foar koarteheid en konsistinsje.

  • BrekkeOmneamde .font-style-*nutsbedriuwen as .fst-*foar koarteheid en konsistinsje.

  • Tafoege .d-gridom nutsfoarsjenningen en nije gapnutsfoarsjenningen te werjaan ( .gap) foar CSS Grid- en flexbox-yndielingen.

  • BrekkeFuortsmiten .rounded-smen rounded-lg, en yntrodusearre in nije skaal fan klassen, .rounded-0oan .rounded-3. Sjoch #31687 .

  • line-heightNije nutsfoarsjenningen tafoege : .lh-1, .lh-sm, .lh-baseen .lh-lg. Sjoch hjir .

  • It nut ferpleatst .d-noneyn ús CSS om it mear gewicht te jaan oer oare display-hulpprogramma's.

  • .visually-hidden-focusableDe helper útwreide om ek te wurkjen oan konteners, mei :focus-within.

Helpers

  • Brekke Responsive embed-helpers binne omneamd ta ratio-helpers mei nije klassenammen en ferbettere gedrach, lykas ek in nuttige CSS-fariabele.

    • Klassen binne omneamd om te feroarjen byyn x'e aspektferhâlding. Bygelyks, .ratio-16by9is no .ratio-16x9.
    • Wy hawwe de .embed-responsive-itemen elemint groep selektor sakke yn it foardiel fan in ienfâldiger .ratio > *selektor. Gjin klasse mear is nedich, en de ferhâldingshelper wurket no mei elk HTML-elemint.
    • De $embed-responsive-aspect-ratiosSass-kaart is omneamd ta $aspect-ratiosen syn wearden binne ferienfâldige om de klassenamme en it persintaazje as it key: valuepear op te nimmen.
    • CSS-fariabelen wurde no oanmakke en opnommen foar elke wearde yn 'e Sass-kaart. Feroarje de --bs-aspect-ratiofariabele op 'e .ratioom elke oanpaste aspektferhâlding te meitsjen .

  • Brekke Klassen "Skermlêzer" binne no "visueel ferburgen" klassen .

    • It Sass-bestân feroare fan scss/helpers/_screenreaders.scssneiscss/helpers/_visually-hidden.scss
    • Omneamd .sr-onlyen .sr-only-focusableoan .visually-hiddenen.visually-hidden-focusable
    • Omneamd sr-only()en sr-only-focusable()mixins nei visually-hidden()en visually-hidden-focusable().

  • bootstrap-utilities.cssomfettet no ek ús helpers. Helpers hoege net mear te ymportearjen yn oanpaste builds.

JavaSkript

  • JQuery-ôfhinklikens ferdwûn en plugins opnij skreaun om yn gewoane JavaScript te wêzen.

  • BrekkeGegevensattributen foar alle JavaSkript-plugins binne no nammespaced om te helpen Bootstrap-funksjonaliteit te ûnderskieden fan tredden en jo eigen koade. Bygelyks, wy brûke data-bs-toggleynstee fan data-toggle.

  • Alle plugins kinne no in CSS-selektor akseptearje as it earste argumint. Jo kinne in DOM-elemint of elke jildige CSS-selektor trochjaan om in nije eksimplaar fan it plugin te meitsjen:

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

  • popperConfigkin trochjûn wurde as in funksje dy't de standert Popper-konfiguraasje fan 'e Bootstrap akseptearret as argumint, sadat jo dizze standertkonfiguraasje op jo manier kinne gearfoegje. Jildt foar dropdowns, popovers en tooltips.

  • De standertwearde foar de fallbackPlacementswurdt feroare nei ['top', 'right', 'bottom', 'left']foar bettere pleatsing fan Popper eleminten. Jildt foar dropdowns, popovers en tooltips.

  • Underscore fuortsmiten fan iepenbiere statyske metoaden lykas _getInstance()→ getInstance().