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

  • 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

Pagination

  • Pagination links now have customizable margin-left that are dynamically rounded on all corners when separated from one another.

  • Added transitions to pagination links.

Popovers

  • Breaking Renamed .arrow to .popover-arrow in our default popover template.

  • Renamed whiteList option to allowList.

Spinners

  • Spinners now honor prefers-reduced-motion: reduce by slowing down animations. See #31882.

  • Improved spinner vertical alignment.

Toasts

  • Toasts can now be positioned in a .toast-container with the help of positioning utilities.

  • Changed default toast duration to 5 seconds.

  • Removed overflow: hidden from toasts and replaced with proper border-radiuss with calc() functions.

Tooltips

  • Breaking Renamed .arrow to .tooltip-arrow in our default tooltip template.

  • Breaking The default value for the fallbackPlacements is changed to ['top', 'right', 'bottom', 'left'] for better placement of popper elements.

  • Breaking Renamed whiteList option to allowList.

Utilities

  • Breaking Renamed several utilities to use logical property names instead of directional names with the addition of RTL support:

    • Renamed .left-* and .right-* to .start-* and .end-*.
    • Renamed .float-left and .float-right to .float-start and .float-end.
    • Renamed .border-left and .border-right to .border-start and .border-end.
    • Renamed .rounded-left and .rounded-right to .rounded-start and .rounded-end.
    • Renamed .ml-* and .mr-* to .ms-* and .me-*.
    • Renamed .pl-* and .pr-* to .ps-* and .pe-*.
    • Renamed .text-left and .text-right to .text-start and .text-end.

  • Breaking Disabled negative margins by default.

  • Added new .bg-body class for quickly setting the <body>’s background to additional elements.

  • Added new position utilities for top, right, bottom, and left. Values include 0, 50%, and 100% for each property.

  • Added new .translate-middle-x & .translate-middle-y utilities to horizontally or vertically center absolute/fixed positioned elements.

  • Added new border-width utilities.

  • Breaking Renamed .text-monospace to .font-monospace.

  • Breaking Removed .text-hide as it’s an antiquated method for hiding text that shouldn’t be used anymore.

  • Added .fs-* utilities for font-size utilities (with RFS enabled). These use the same scale as HTML’s default headings (1-6, large to small), and can be modified via Sass map.

  • Breaking Renamed .font-weight-* utilities as .fw-* for brevity and consistency.

  • Breaking Renamed .font-style-* utilities as .fst-* for brevity and consistency.

  • Added .d-grid to display utilities and new gap utilities (.gap) for CSS Grid and flexbox layouts.

  • Breaking Removed .rounded-sm and rounded-lg, and introduced a new scale of classes, .rounded-0 to .rounded-3. See #31687.

  • Added new line-height utilities: .lh-1, .lh-sm, .lh-base and .lh-lg. See here.

  • Moved the .d-none utility in our CSS to give it more weight over other display utilities.

  • Extended the .visually-hidden-focusable helper to also work on containers, using :focus-within.

Helpers

  • Breaking Responsive embed helpers have been renamed to ratio helpers with new class names and improved behaviors, as well as a helpful CSS variable.

    • Classes have been renamed to change by to x in the aspect ratio. For example, .ratio-16by9 is now .ratio-16x9.
    • We’ve dropped the .embed-responsive-item and element group selector in favor of a simpler .ratio > * selector. No more class is needed, and the ratio helper now works with any HTML element.
    • The $embed-responsive-aspect-ratios Sass map has been renamed to $aspect-ratios and its values have been simplified to include the class name and the percentage as the key: value pair.
    • CSS variables are now generated and included for each value in the Sass map. Modify the --bs-aspect-ratio variable on the .ratio to create any custom aspect ratio.

  • Breaking “Screen reader” classes are now “visually hidden” classes.

    • Changed the Sass file from scss/helpers/_screenreaders.scss to scss/helpers/_visually-hidden.scss
    • Renamed .sr-only and .sr-only-focusable to .visually-hidden and .visually-hidden-focusable
    • Renamed sr-only() and sr-only-focusable() mixins to visually-hidden() and visually-hidden-focusable().

  • bootstrap-utilities.css now also includes our helpers. Helpers don’t need to be imported in custom builds anymore.

JavaScript

  • Dropped jQuery dependency and rewrote plugins to be in regular JavaScript.

  • Breaking Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use data-bs-toggle instead of data-toggle.

  • All plugins can now accept a CSS selector as the first argument. You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin:

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

  • popperConfig can be passed as a function that accepts the Bootstrap’s default Popper config as an argument, so that you can merge this default configuration in your way. Applies to dropdowns, popovers, and tooltips.

  • The default value for the fallbackPlacements is changed to ['top', 'right', 'bottom', 'left'] for better placement of Popper elements. Applies to dropdowns, popovers, and tooltips.

  • Removed underscore from public static methods like _getInstance() → getInstance().