Gean nei haadynhâld Gean nei dokumintnavigaasje
Check
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

v5.2.0

Ferfarske ûntwerp

Bootstrap v5.2.0 hat in subtile ûntwerpupdate foar in hânfol komponinten en eigenskippen oer it projekt, benammen troch ferfine border-radiuswearden op knoppen en formulierkontrôles . Us dokumintaasje is ek bywurke mei in nije thússide, ienfâldiger docs-yndieling dy't gjin seksjes fan 'e sydbalke mear ynstoart, en mear promininte foarbylden fan Bootstrap Icons .

Mear CSS fariabelen

Wy hawwe al ús komponinten bywurke om CSS-fariabelen te brûken. Wylst Sass noch alles ûnderstreket, is elke komponint bywurke om CSS-fariabelen op te nimmen op 'e basisklassen fan' e komponint (bygelyks, .btn), wêrtroch mear realtime oanpassing fan Bootstrap mooglik is. Yn folgjende releases sille wy trochgean mei it útwreidzjen fan ús gebrûk fan CSS-fariabelen yn ús yndieling, formulieren, helpers en nutsbedriuwen. Lês mear oer CSS-fariabelen yn elke komponint op har respektive dokumintaasjesiden.

Us gebrûk fan CSS-fariabele sil wat ûnfolslein wêze oant Bootstrap 6. Wylst wy dizze oer de hiele breedte folslein ymplementearje wolle, rinne se it risiko om brekende feroaringen te feroarjen. Bygelyks, it ynstellen $alert-border-width: var(--bs-border-width)fan ús boarnekoade brekt potinsjele Sass yn jo eigen koade as jo $alert-border-width * 2om ien of oare reden dogge.

As sadanich, wêr mooglik, sille wy trochgean te triuwe nei mear CSS-fariabelen, mar erkenne asjebleaft dat ús ymplemintaasje in bytsje beheind kin wêze yn v5.

Nij_maps.scss

Bootstrap v5.2.0 yntrodusearre in nij Sass triem mei _maps.scss. It lûkt ferskate Sass-kaarten út _variables.scssom in probleem op te lossen wêrby't updates foar in orizjinele kaart net waarden tapast op sekundêre kaarten dy't se útwreidzje. Bygelyks, updates foar $theme-colorswaarden net tapast op oare temakaarten dy't fertrouden op $theme-colors, brekke wichtige oanpassingswurkflows. Koartsein, Sass hat in beheining dêr't ienris in standert fariabele of kaart is brûkt , it kin net bywurke wurde. D'r is in ferlykber tekoart mei CSS-fariabelen as se wurde brûkt om oare CSS-fariabelen te komponearjen.

Dit is wêrom fariabele oanpassingen yn Bootstrap moatte komme nei @import "functions", mar foar @import "variables"en de rest fan ús ymportstapel. Itselde jildt foar Sass-kaarten - jo moatte de standertynstellingen oerskriuwe foardat se brûkt wurde. De folgjende kaarten binne ferpleatst nei de nije _maps.scss:

  • $theme-colors-rgb
  • $utilities-colors
  • $utilities-text
  • $utilities-text-colors
  • $utilities-bg
  • $utilities-bg-colors
  • $negative-spacers
  • $gutters

Jo oanpaste Bootstrap CSS-builds moatte no der sa útsjen mei in aparte map-ymport.

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

Nije nutsbedriuwen

Oanfoljende feroarings

  • $enable-container-classesNije opsje yntrodusearre . - No as jo kieze foar de eksperimintele CSS Grid-yndieling, .container-*wurde klassen noch kompilearre, útsein as dizze opsje is ynsteld op false. Konteners hâlde no ek har gootwearden.

  • Offcanvas-komponint hat no responsive fariaasjes . De orizjinele .offcanvasklasse bliuwt net feroare - it ferberget ynhâld oer alle werjefteports. Om it responsyf te meitsjen, feroarje dy .offcanvasklasse nei elke .offcanvas-{sm|md|lg|xl|xxl}klasse.

  • Dikkere tafelferdielings binne no opt-in. - Wy hawwe fuortsmiten de dikker en dreger te oerskriuwen grins tusken tabel groepen en ferpleatst it nei in opsjoneel klasse kinne jo tapasse .table-group-divider,. Sjoch de tabeldokuminten foar in foarbyld.

  • Scrollspy is opnij skreaun om de Intersection Observer API te brûken , wat betsjut dat jo gjin relatyf âlder-wrappers mear nedich binne,offsetkonfiguraasje ôfskriuwt, en mear. Sjoch foar jo Scrollspy-ymplemintaasjes om krekter en konsekwint te wêzen yn har nav-markearring.

  • Popovers en tooltips brûke no CSS-fariabelen. Guon CSS fariabelen binne bywurke fan harren Sass tsjinhingers te ferminderjen it oantal fariabelen. As gefolch, trije fariabelen binne ôfret yn dizze útjefte: $popover-arrow-color, $popover-arrow-outer-color, en $tooltip-arrow-color.

  • .text-bg-{color}Nije helpers tafoege . Yn stee fan yndividuele .text-*en .bg-*nutsbedriuwen yn te stellen, kinne jo no de .text-bg-*helpers brûke om in background-colormei kontrastearjende foargrûn yn te stellen color.

  • .form-check-reverseModifier tafoege om de folchoarder fan labels en byhearrende karfakjes/radio's om te draaien.

  • Stipe foar gestreepte kolommen tafoege oan tabellen fia de nije .table-striped-columnsklasse.

Foar in folsleine list mei feroarings, sjoch it v5.2.0-projekt op GitHub .

v5.1.0

  • Eksperimintele stipe tafoege foar CSS Grid-yndieling . - Dit is in wurk oan 'e gong, en is noch net klear foar produksje gebrûk, mar jo kinne kieze foar de nije funksje fia Sass. Om it yn te skeakeljen, skeakelje it standertraster út, troch $enable-grid-classes: falseit CSS-raster yn te stellen en yn te skeakeljen troch yn te stellen $enable-cssgrid: true.

  • Bywurke navbars om offcanvas te stypjen. - Foegje offcanvas-laden ta yn elke navbar mei de responsive .navbar-expand-*klassen en wat offcanvas-markearring.

  • Nije plakhâlder-komponint tafoege . - Us nijste komponint, in manier om tydlike blokken te leverjen yn plak fan echte ynhâld om te helpen oan te jaan dat der noch wat wurdt laden yn jo side of app.

  • Ynstekke plugin stipet no horizontaal ynstoarten . - Taheakje .collapse-horizontaloan jo .collapsete ynstoarten de widthynstee fan de height. Foarkom blêder opnij skilderjen troch in min-heightof height.

  • Nije stap- en fertikale regelhelpers tafoege. - Tapasse rap meardere flexbox-eigenskippen om fluch oanpaste yndielingen te meitsjen mei stapels . Kies út horizontale ( .hstack) en fertikale ( .vstack) stapels. Foegje fertikale dividers ta gelyk oan <hr>eleminten mei de nije .vrhelpers .

  • Nije globale :rootCSS fariabelen tafoege. - Ferskate nije CSS-fariabelen tafoege oan it :rootnivo foar it kontrolearjen fan <body>stilen. Mear binne yn 'e wurken, ynklusyf oer ús nutsbedriuwen en komponinten, mar lês no CSS-fariabelen yn' e seksje Oanpasse .

  • Overhauled kleur en eftergrûn nutsfoarsjennings te brûken CSS fariabelen, en tafoege nije tekst dekking en eftergrûn dekking nutsbedriuwen. - .text-* en .bg-*nutsbedriuwen binne no boud mei CSS-fariabelen en rgba()kleurwearden, wêrtroch jo elk nutsbedriuw maklik kinne oanpasse mei nije dekkingshelpprogramma's.

  • Nije foarbylden fan snippet tafoege om te sjen hoe't jo ús komponinten oanpasse kinne. - Pull klear om oanpaste komponinten en oare mienskiplike ûntwerppatroanen te brûken mei ús nije Snippets-foarbylden . Omfettet fuotteksten , dropdowns , listgroepen en modalen .

  • Net brûkte posisjonearringsstilen fuortsmiten fan popovers en tooltips , om't dizze allinich troch Popper behannele wurde. $tooltip-marginis ôfret en nullyn it proses ynsteld.

Wolle jo mear ynformaasje? Lês de v5.1.0 blogpost.

Hey dêr! Feroarings oan ús earste grutte release fan Bootstrap 5, v5.0.0, wurde hjirûnder dokumintearre. Se wjerspegelje de boppesteande ekstra wizigingen net.

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, docs-yndieling 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 yn fallen 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 plak 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-control.custom-checkboxis no .form-check.
    • .custom-control.custom-custom-radiois no .form-check.
    • .custom-control.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 langstige ûntbrekkende grinsradius op ynfiergroep mei falidaasjefeedback-bug wurdt einlings reparearre troch in ekstra .has-validationklasse ta te foegjen oan ynfiergroepen 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.

  • Formkontrôles wurde net mear brûkt fêst heightas it mooglik is, ynstee útstelle nei min-heightoanpassing en kompatibiliteit mei oare komponinten te ferbetterjen.

  • 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, of dropdown is yn 'e navbar. 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).
  • BrekkeDe .activeklasse kin net mear tapast wurde op .nav-items, it moat direkt op .nav-links tapast wurde.

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:

    const modal = new bootstrap.Modal('#myModal')
const 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().