Passà à u cuntenutu principale Salta à a navigazione di documenti
in English

Migrazione à v5

Track and review changes to the Bootstrap file source, documentation, and components to help you migrate from v4 to v5.

Dipendenze

  • JQuery sguassatu.
  • Aghjurnatu da Popper v1.x à Popper v2.x.
  • Sustituitu Libsass cù Dart Sass cum'è u nostru compilatore Sass datu Libsass era obsoletu.
  • Migratu da Jekyll à Hugo per custruisce a nostra documentazione

Supportu di u navigatore

  • Abbandunatu Internet Explorer 10 è 11
  • Sguassatu Microsoft Edge < 16 (Legacy Edge)
  • Sguassatu Firefox <60
  • Safari abandonné < 12
  • Caduta iOS Safari < 12
  • Chrome abbandunatu <60

A documentazione cambia

  • Pagina iniziale, layout di documenti è piè di pagina riprogettati.
  • Aggiunta una nova guida di Parcel .
  • Added new Customize section , rimpiazzà a pagina Theming di v4 , cù novi dettagli nantu à Sass, opzioni di cunfigurazione globale, schemi di culori, variabili CSS, è più.
  • Riurganizata tutta a documentazione di u furmulariu in a nova sezione Forme , sparghjendu u cuntenutu in pagine più focu.
  • In listessu modu, aghjurnatu a sezione Layout , per sbulicà u cuntenutu di a griglia più chjaramente.
  • Rinominata pagina di cumpunenti "Navs" in "Navs & Tabs".
  • Rinominata a pagina "Controlli" in "Controlli è radio".
  • Riprogettatu a barra di navigazione è aghjustatu un novu subnav per fà più faciule per andà in i nostri siti è versioni di documenti.
  • Aggiunta una nova scorciata di tastiera per u campu di ricerca: Ctrl + /.

Sass

  • Avemu abbandunatu e fusioni di carte Sass predeterminate per fà più faciule per sguassà i valori ridondanti. Tenite in mente chì avà deve definisce tutti i valori in i mape Sass cum'è $theme-colors. Scuprite cumu trattà cù e carte Sass .

  • RuptureFunzione rinominata color-yiq()è variabili cunnessi color-contrast()cum'è ùn hè più ligata à u spaziu di culore YIQ. Vede # 30168.

    • $yiq-contrasted-thresholdhè rinominatu in $min-contrast-ratio.
    • $yiq-text-darkè $yiq-text-lightsò rinominati rispettivamente in $color-contrast-darkè $color-contrast-light.
  • RuptureI paràmetri di mixins di media query sò cambiati per un approcciu più logicu.

    • media-breakpoint-down()usa u breakpoint stessu invece di u prossimu breakpoint (p.e., media-breakpoint-down(lg)invece di media-breakpoint-down(md)mira à i punti di vista più chjuchi di lg).
    • In u listessu modu, u sicondu paràmetru in media-breakpoint-between()usa ancu u puntu di scontru stessu invece di u prossimu puntu di scontru (per esempiu, media-between(sm, lg)invece di vede i punti di media-breakpoint-between(sm, md)vista trà smè lg).
  • RuptureStili di stampa eliminati è $enable-print-stylesvariabili. E classi di visualizazione di stampa sò sempre intornu. Vede # 28339 .

  • RuptureDropped color(), theme-color(), e gray()funzioni in favore di variàbili. Vede # 29083 .

  • RuptureFunzione rinominata theme-color-level()à color-level()è avà accetta ogni culore chì vulete invece di solu $theme-colorculori. Vede # 29083 Attenti : color-level() hè stata più tardi abbandunata in v5.0.0-alpha3.

  • RuptureRinominatu $enable-prefers-reduced-motion-media-queryè $enable-pointer-cursor-for-buttonsà $enable-reduced-motionè $enable-button-pointersper brevità.

  • RuptureEliminatu u bg-gradient-variant()mixin. Aduprate a .bg-gradientclassa per aghjunghje gradienti à elementi invece di e .bg-gradient-*classi generate.

  • Rupture Eliminati i mixin precedentemente obsoleti:

    • hover, hover-focus, plain-hover-focus, èhover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(abbandunò ancu a classe di utilità assuciata, .text-hide)
    • visibility()
    • form-control-focus()
  • RuptureFunzione rinominata scale-color()per shift-color()evità a collisione cù a funzione di scala di culore di Sass.

  • box-shadowI mixins ora permettenu i nullvalori è abbandunà noneda parechji argumenti. Vede # 30394 .

  • U border-radius()mixin hà avà un valore predeterminatu.

Sistema di culore

  • U sistema di culore chì hà travagliatu color-level()è $theme-color-intervalhè statu eliminatu in favore di un novu sistema di culore. Tutte lighten()e darken()funzioni in a nostra basa di codice sò rimpiazzate da tint-color()è shade-color(). Queste funzioni mischjeranu u culore cù biancu o neru invece di cambià a so ligerezza per una quantità fissa. U shift-color()tinterà o sfumatura un culore sicondu u so paràmetru di pesu hè pusitivu o negativu. Vede # 30622 per più dettagli.

  • Aghjunghjite novi tinte è sfumature per ogni culore, furnisce nove culori separati per ogni culore di basa, cum'è novi variabili Sass.

  • Cuntrastu di culore migliuratu. U rapportu di cuntrastu di u culore sbulicatu da 3: 1 à 4.5: 1 è i culori blu, verdi, ciani è rosa aghjurnati per assicurà u cuntrastu WCAG 2.1 AA. Ancu cambiatu u nostru culore di cuntrastu di culore da $gray-900a $black.

  • Per sustene u nostru sistema di culore, avemu aghjustatu novi persunalizazioni tint-color()è shade-color()funzioni per mischjà i nostri culori in modu adattatu.

L'aghjurnamenti di a griglia

  • Novu breakpoint! Aggiuntu novu xxlbreakpoint per 1400pxè up. Nisun cambiamenti à tutti l'altri punti di rottura.

  • Gouttières améliorées. Gutters sò oghji stabilitu in rems, è sò più stretti di v4 ( 1.5rem, o circa 24px, falà da 30px). Questu allinea i canali di u nostru sistema di griglia cù e nostre utilità di spaziatura.

    • Aggiunta una nova classe di goutte ( .g-*, .gx-*, è .gy-*) per cuntrullà i canotti orizontali / verticali, i canotti horizontali è i canali verticali.
    • RuptureRinominatu .no-guttersà .g-0per currisponde à e novi utilità di gutter.
  • I culonni ùn anu più position: relativeappiicatu, perchè pudete avè da aghjunghje .position-relativeà certi elementi per restaurà quellu cumpurtamentu.

  • RuptureAbbandunate parechje .order-*classi chì spessu ùn anu micca usatu. Avemu avà solu furnisce fora .order-1di .order-5a scatula.

  • RuptureAbbandunatu u .mediacumpunente perchè pò esse facilmente replicatu cù utilità. Vede #28265 è a pagina di utilità flex per un esempiu .

  • Rupture bootstrap-grid.cssavà s'applica solu box-sizing: border-boxà a colonna invece di resetting u box-sizing globale. In questu modu, i nostri stili di griglia ponu esse utilizati in più posti senza interferenza.

  • $enable-grid-classesùn disattiva più a generazione di classi di container. Vede # 29146.

  • Aghjurnatu u make-colmixin per difettu à e colonne uguali senza una dimensione specifica.

Cuntenutu, reboot, etc

  • RFS hè avà attivatu per difettu. Intestazioni chì utilizanu ufont-size()mixin aghjustà automaticamente a sofont-sizescala cù a vista. Questa funzione era prima opt-in cù v4.

  • RuptureRevisionatu a nostra tipografia di visualizazione per rimpiazzà e nostre $display-*variàbili è cù una $display-font-sizesmappa Sass. $display-*-weightEliminate ancu e variàbili individuali per un s unicu $display-font-weightè aghjustatu font-size.

  • Aghjunghjite duie novi .display-*dimensioni di intestazioni, .display-5è .display-6.

  • I ligami sò sottolineati per difettu (micca solu nantu à u passaghju), salvu chì sò parti di cumpunenti specifichi.

  • Tavule riprogettate per rinfriscà i so stili è ricustruisce cù variabili CSS per più cuntrollu di u stilu.

  • RuptureE tavule nidificate ùn eredite più stili.

  • Rupture .thead-lightè .thead-darksò abbandunati in favore di e classi .table-*varianti chì ponu esse usatu per tutti l'elementi di a tavola ( thead, tbody, tfoot, trè ).thtd

  • RuptureU table-row-variant()mixin hè rinominatu table-variant()è accetta solu 2 paràmetri: $color(nome di culore) è $value(codice di culore). U culore di u cunfini è i culori di l'accentu sò calculati automaticamente in basa di e variàbili di fattore di tabella.

  • Divide e variabili di riempimentu di cellula di a tabella in -ye -x.

  • RuptureClasse abbandunata .pre-scrollable. Vede # 29135

  • Rupture .text-*utilità ùn aghjunghjenu più stati di hover è focus à i ligami. .link-*E classi di helper ponu esse usate invece. Vede # 29267

  • RuptureClasse abbandunata .text-justify. Vede # 29793

  • Ripristina l'horizontale predefinitu è padding-left​​l' elementi da u navigatore predefinitu à .<ul><ol>40px2rem

  • Added $enable-smooth-scroll, chì s'applica scroll-behavior: smoothin u mondu, eccettu per l'utilizatori chì dumandanu un muvimentu ridottu attraversu prefers-reduced-motionmedia query. Vede # 31877

RTL

  • Variabili, utilità è mixin specifichi di direzzione horizontale sò stati tutti rinominati per utilizà proprietà logichi cum'è quelli chì si trovanu in i layout di flexbox - per esempiu, startè endinvece di leftè right.

Forme

  • Aghjunghjite novi forme flottanti! Avemu prumuvutu l'esempiu di etichette Floating per cumpunenti di forma cumplettamente supportati. Vede a nova pagina di etichette Floating.

  • Rupture Elementi di forma nativa è persunalizata cunsolidati. Checkboxes, radii, selezzione è altri inputs chì avianu classi nativi è persunalizati in v4 sò stati cunsolidati. Avà quasi tutti i nostri elementi di forma sò interamente persunalizati, a maiò parte senza bisognu di HTML persunalizatu.

    • .custom-checkhè avà .form-check.
    • .custom-check.custom-switchhè avà .form-check.form-switch.
    • .custom-selecthè avà .form-select.
    • .custom-fileè .form-filesò stati rimpiazzati da stili persunalizati in cima à .form-control.
    • .custom-rangehè avà .form-range.
    • Abbandunatu nativu .form-control-fileè .form-control-range.
  • RuptureAbbandunatu .input-group-appendè .input-group-prepend. Pudete avà solu aghjunghje buttoni è .input-group-textcum'è figlioli diretti di i gruppi di input.

  • U raghju di fruntiera mancante di longu u gruppu di input cù un bug di feedback di validazione hè infine riparatu aghjunghjendu una .has-validationclassa addiziale à i gruppi di input cù validazione.

  • Rupture Abbandunate classi di layout specifichi di forma per u nostru sistema di griglia. Aduprate a nostra griglia è utilità invece di .form-group, .form-row, o .form-inline.

  • RuptureL'etichette di forma necessitanu avà .form-label.

  • Rupture .form-textùn stabilisce più display, chì vi permette di creà inline o bluccà u testu di l'aiutu cum'è vulete solu cambià l'elementu HTML.

  • L'icone di validazione ùn sò più applicate à <select>s cù multiple.

  • I schedarii Sass di fonte riarrangati sottu scss/forms/, cumpresi stili di gruppu di input.


Cumpunenti

  • Valori unificati paddingper avvisi, breadcrumbs, cards, dropdowns, list groups, modali, popovers, è tooltips per esse basatu nantu à a nostra $spacervariabile. Vede # 30564 .

fisarmonica

Alerts

  • L'alerti anu avà esempi cù icone .

  • Stili persunalizati eliminati per <hr>s in ogni alerta postu chì anu digià utilizatu currentColor.

Badges

  • RuptureEliminate tutte .badge-*e classi di culore per l'utilità di fondo (per esempiu, utilizate .bg-primaryinvece di .badge-primary).

  • RuptureDropped - utilizate invece .badge-pilll' .rounded-pillutilità.

  • RuptureEliminati stili di hover è focus per <a>è <button>elementi.

  • Imbottitura predefinita aumentata per i badge da .25em/ .5emà .35em/ .65em.

  • Simplificà l'aspettu predeterminatu di breadcrumbs rimuovendu padding, background-colorè border-radius.

  • Aggiunta una nova pruprietà persunalizata CSS --bs-breadcrumb-dividerper una persunalizazione faciule senza bisognu di ricumpià CSS.

Bottoni

  • Rupture I buttoni Toggle , cù caselle di spunta o radiu, ùn anu più bisognu di JavaScript è anu novu marcatu. Ùn avemu più bisognu di un elementu di imballaggio, aghjunghje.btn-checkà u<input>, è l'accoppianu cù qualsiasi.btnclassi nantu à u<label>. Vede # 30650 . I documenti per questu sò passati da a nostra pagina di Buttons à a nova sezione Forme.

  • Rupture Abbandunatu .btn-blockper utilità. Invece d'utilizà .btn-blocknantu à u .btn, imbulighjate i vostri buttoni cù .d-griduna .gap-*utilità per spazzàli cum'è necessariu. Cambia à classi responsive per ancu più cuntrollu di elli. Leghjite i documenti per alcuni esempi.

  • Aghjurnatu i nostri button-variant()è i button-outline-variant()mixins per sustene parametri supplementari.

  • Buttuni aghjurnati per assicurà un cuntrastu aumentatu nantu à i stati attivi è attivi.

  • I buttoni disabilitati anu avà pointer-events: none;.

Card

  • RuptureAbbandunatu .card-deckin favore di a nostra griglia. Imbulighjate e vostre carte in classi di colonna è aghjunghje un .row-cols-*cuntainer parent per ricreà i mazzi di carte (ma cun più cuntrollu di l'allineamentu responsive).

  • RuptureAbbandunatu .card-columnsin favore di a Masoneria. Vede # 28922 .

  • RuptureSustituitu l' .cardaccordione basatu cù un novu cumpunente di Accordion .

  • Aggiunta una nova .carousel-darkvariante per u testu scuru, cuntrolli è indicatori (ottimu per sfondi più chjaru).

  • Icone di chevron rimpiazzate per i cuntrolli di carrusel cù novi SVG da Bootstrap Icons .

Chiudi buttone

  • RuptureRinominatu .closeper .btn-closeun nome menu genericu.

  • I buttuni chjusi usanu avà un background-image(SVG incrustatu) invece di un &times;in HTML, chì permette una persunalizazione più faciule senza bisognu di toccu u vostru marcatu.

  • Aggiunta una nova .btn-close-whitevariante chì usa filter: invert(1)per attivà l'icone di cuntrastu più altu contru à sfondi scuri.

Collapse

  • Eliminatu l'ancoraggio di scroll per l'accordioni.
  • Aggiunta una nova .dropdown-menu-darkvariante è variabili assuciati per i dropdown scuri à dumanda.

  • Aggiunta una nova variabile per $dropdown-padding-x.

  • Scuru u divisore dropdown per un cuntrastu migliuratu.

  • RuptureTutti l'avvenimenti per u dropdown sò avà attivati ​​​​in u buttone di basculante dropdown è poi bubbled up à l'elementu parent.

  • I menu dropdown sò avà un data-bs-popper="static"attributu stabilitu quandu u posizionamentu di u dropdown hè staticu è data-bs-popper="none"quandu u dropdown hè in a barra di navigazione. Questu hè aghjuntu da u nostru JavaScript è ci aiuta à aduprà stili di pusizioni persunalizati senza interferiscenu cù u pusizioni di Popper.

  • RuptureOpzione flipabbandunata per u plugin dropdown in favore di a cunfigurazione Popper nativa. Pudete avà disattivà u cumpurtamentu di flipping passendu un array viotu per fallbackPlacementsl'opzione in flip modificatore.

  • I menu a tendina ponu avà cliccà cù una nova autoCloseopzione per trattà u cumpurtamentu di chjusu automaticu . Pudete aduprà sta opzione per accettà u clicu in l'internu o fora di u menù dropdown per rende interattivu.

  • I dropdowns supportanu avà .dropdown-items avvolti in <li>s.

Jumbotron

Lista di gruppu

  • Aghjunghjite novi nullvariàbili per font-size, font-weight, color, è :hover colorà a .nav-linkclasse.
  • RuptureI Navbars necessitanu avà un containeru in (per simplificà drasticamente i requisiti di spaziatura è CSS necessariu).

Offcanvas

Paginazione

  • I ligami di paginazione sò avà persunalizabili margin-leftchì sò dinamicamente arrotondati in tutti i cantoni quandu sò separati l'un da l'altru.

  • Aggiuntu transitions à i ligami di paginazione.

Popovers

  • RuptureRinominatu .arrowin .popover-arrowu nostru mudellu popover predeterminatu.

  • Opzione whiteListrinominata à allowList.

Spinners

  • I spinners ora onoranu prefers-reduced-motion: reducerallentendu l'animazioni. Vede # 31882 .

  • Allineamentu verticale di spinner miglioratu.

Toasts

  • Toasts ponu avà esse posizionati in una .toast-containercù l'aiutu di l'utilità di pusizzioni .

  • A durata predeterminata di toast hè cambiata à 5 seconde.

  • Sguassatu overflow: hiddenda toast è rimpiazzatu cù border-radiuss propiu cù calc()funzioni.

Tooltips

  • RuptureRinominatu .arrowin .tooltip-arrowu nostru mudellu di tooltip predeterminatu.

  • RuptureU valore predeterminatu per u fallbackPlacementshè cambiatu in ['top', 'right', 'bottom', 'left']per una megliu piazzamentu di elementi popper.

  • RuptureOpzione whiteListrinominata à allowList.

Utilità

  • RuptureRinuminatu parechji utilità per utilizà nomi di pruprietà logica invece di nomi direzionali cù l'aghjuntu di supportu RTL:

    • Rinominatu .left-*è .right-*à .start-*è .end-*.
    • Rinominatu .float-leftè .float-rightà .float-startè .float-end.
    • Rinominatu .border-leftè .border-rightà .border-startè .border-end.
    • Rinominatu .rounded-leftè .rounded-rightà .rounded-startè .rounded-end.
    • Rinominatu .ml-*è .mr-*à .ms-*è .me-*.
    • Rinominatu .pl-*è .pr-*à .ps-*è .pe-*.
    • Rinominatu .text-leftè .text-rightà .text-startè .text-end.
  • RuptureDisabilitatu i margini negativi per difettu.

  • Aggiunta una nova .bg-bodyclasse per stabilisce rapidamente u <body>sfondate à elementi supplementari.

  • Aghjunghjite novi utilità di pusizioni per top, right, bottom, è left. I valori includenu 0, 50%, è 100%per ogni pruprietà.

  • Aggiunti novi .translate-middle-xè .translate-middle-yutilità per centru orizzontalmente o verticalmente elementi posizionati assoluti / fissi.

  • Aghjunghjite novi border-widthutilità .

  • RuptureRinominatu .text-monospaceà .font-monospace.

  • RuptureSguassatu .text-hidepostu chì hè un metudu anticu per ammuccià u testu chì ùn deve micca esse usatu più.

  • Utilità .fs-*aghjunte per font-sizeutilità (cù RFS attivatu). Quessi utilizanu a listessa scala cum'è l'intestazione predeterminata di HTML (1-6, grande à chjucu), è ponu esse mudificate via Sass map.

  • Rupture.font-weight-*Utilità rinominate in quantu .fw-*à a brevità è a coerenza .

  • Rupture.font-style-*Utilità rinominate in quantu .fst-*à a brevità è a coerenza .

  • Added .d-gridto display utilità è novi gaputilità ( .gap) per i layout CSS Grid è flexbox.

  • RuptureEliminatu .rounded-smè rounded-lg, è introduttu una nova scala di classi, .rounded-0à .rounded-3. Vede # 31687 .

  • Aggiunti novi line-heightutilità: .lh-1, .lh-sm, .lh-baseè .lh-lg. Vede quì .

  • Sposta l' .d-noneutilità in u nostru CSS per dà più pesu à l'altri utilità di visualizazione.

  • Estendu l' .visually-hidden-focusableaiutu per travaglià ancu nantu à i cuntenituri, usendu :focus-within.

Aiutanti

  • Rupture L'aiutanti di l'incrustazione responsive sò stati rinominati à l' aiutanti di ratio cù novi nomi di classi è cumpurtamenti migliurati, è ancu una variabile CSS utile.

    • E classi sò state rinominate per cambià byin xu rapportu d'aspettu. Per esempiu, .ratio-16by9hè avà .ratio-16x9.
    • Avemu abbandunatu u .embed-responsive-itemselettore di gruppi di elementi è in favore di un .ratio > *selettore più simplice. Ùn ci hè più bisognu di classi, è l'aiutu di ratio travaglia avà cù qualsiasi elementu HTML.
    • A $embed-responsive-aspect-ratiosmappa Sass hè stata rinominata $aspect-ratiosè i so valori sò simplificati per include u nome di a classa è u percentualità cum'è a key: valuecoppia.
    • Variabili CSS sò avà generati è inclusi per ogni valore in a mappa Sass. Mudificà a --bs-aspect-ratiovariabile nantu à .ratioper creà qualsiasi rapportu d'aspettu persunalizatu .
  • Rupture E classi "Lettore di schermu" sò avà classi "visualmente nascosti" .

    • Cambiatu u schedariu Sass da scss/helpers/_screenreaders.scssàscss/helpers/_visually-hidden.scss
    • Rinominatu .sr-onlyè .sr-only-focusableà .visually-hiddenè.visually-hidden-focusable
    • Rinominatu sr-only()è sr-only-focusable()mixins à visually-hidden()è visually-hidden-focusable().
  • bootstrap-utilities.cssavà include ancu i nostri aiutanti. L'aiutanti ùn anu più bisognu di esse impurtati in custruzzioni persunalizati.

JavaScript

  • A dipendenza di jQuery abbandunata è i plugins riscritti per esse in JavaScript regulare.

  • RuptureL'attributi di dati per tutti i plugins JavaScript sò avà spaziati in nomi per aiutà à distinguerà a funziunalità di Bootstrap da terze parti è u vostru propiu codice. Per esempiu, avemu usatu data-bs-toggleinvece di data-toggle.

  • Tutti i plugins ponu avà accettà un selettore CSS cum'è u primu argumentu. Pudete passà un elementu DOM o qualsiasi selettore CSS validu per creà una nova istanza di u plugin:

    var modal = new bootstrap.Modal('#myModal')
    var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
    
  • popperConfigpò esse passatu cum'è una funzione chì accetta a cunfigurazione Popper predeterminata di Bootstrap cum'è argumentu, perchè pudete unisce sta cunfigurazione predeterminata in u vostru modu. Si applica à i menu dropdown, popovers è tooltips.

  • U valore predeterminatu per u fallbackPlacementshè cambiatu in ['top', 'right', 'bottom', 'left']per una megliu piazzamentu di elementi Popper. Si applica à i menu dropdown, popovers è tooltips.

  • Eliminatu underscore da i metudi statichi publichi cum'è _getInstance()getInstance().