Migrazione alla v5

v5.2.0

Design rinnovato

Bootstrap v5.2.0 presenta un sottile aggiornamento del design per una manciata di componenti e proprietà in tutto il progetto, in particolare attraverso border-radiusvalori perfezionati su pulsanti e controlli dei moduli . Anche la nostra documentazione è stata aggiornata con una nuova home page, un layout dei documenti più semplice che non comprime più sezioni della barra laterale ed esempi più importanti di icone Bootstrap .

Più variabili CSS

Abbiamo aggiornato tutti i nostri componenti per utilizzare le variabili CSS. Mentre Sass è ancora alla base di tutto, ogni componente è stato aggiornato per includere variabili CSS nelle classi di base dei componenti (ad esempio, .btn), consentendo una maggiore personalizzazione in tempo reale di Bootstrap. Nelle versioni successive, continueremo ad espandere il nostro uso delle variabili CSS nel nostro layout, moduli, helper e utilità. Maggiori informazioni sulle variabili CSS in ciascun componente nelle rispettive pagine di documentazione.

Il nostro utilizzo delle variabili CSS sarà alquanto incompleto fino a Bootstrap 6. Anche se ci piacerebbe implementarli completamente su tutta la linea, corrono il rischio di causare modifiche interrotte. Ad esempio, l'impostazione $alert-border-width: var(--bs-border-width)nel nostro codice sorgente interrompe il potenziale Sass nel tuo codice se lo stavi facendo $alert-border-width * 2per qualche motivo.

Pertanto, ove possibile, continueremo a spingere verso più variabili CSS, ma ti preghiamo di riconoscere che la nostra implementazione potrebbe essere leggermente limitata nella v5.

Nuovo_maps.scss

Bootstrap v5.2.0 ha introdotto un nuovo file Sass con _maps.scss. Estrae diverse mappe Sass da _variables.scssper risolvere un problema per cui gli aggiornamenti a una mappa originale non venivano applicati alle mappe secondarie che le estendono. Ad esempio, gli aggiornamenti a $theme-colorsnon venivano applicati ad altre mappe tematiche che si basavano su $theme-colors, interrompendo i flussi di lavoro di personalizzazione chiave. In breve, Sass ha una limitazione per cui una volta utilizzata una variabile o una mappa di default , non può essere aggiornata. C'è una lacuna simile con le variabili CSS quando vengono utilizzate per comporre altre variabili CSS.

Questo è il motivo per cui le personalizzazioni variabili in Bootstrap devono venire dopo @import "functions", ma prima @import "variables"e il resto del nostro stack di importazione. Lo stesso vale per le mappe Sass: devi sovrascrivere le impostazioni predefinite prima che vengano utilizzate. Le seguenti mappe sono state spostate nel nuovo _maps.scss:

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

Le tue build CSS Bootstrap personalizzate dovrebbero ora avere un aspetto simile a questo con un'importazione di mappe separata.

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

Nuove utilità

• font-weightUtilità estese da includere .fw-semiboldper i caratteri semigrassetto.
• border-radiusUtilità ampliate per includere due nuove dimensioni .rounded-4e .rounded-5, per ulteriori opzioni.

Ulteriori modifiche

• Introdotta nuova $enable-container-classesopzione. — Ora, quando si attiva il layout sperimentale della griglia CSS, .container-*le classi verranno comunque compilate, a meno che questa opzione non sia impostata su false. Anche i contenitori ora mantengono i loro valori di grondaia.

• Il componente Offcanvas ora ha variazioni reattive . La .offcanvasclasse originale rimane invariata: nasconde il contenuto in tutte le finestre. Per renderlo reattivo, cambia quella .offcanvasclasse in qualsiasi .offcanvas-{sm|md|lg|xl|xxl}classe.

• I divisori da tavolo più spessi sono ora disponibili. — Abbiamo rimosso il bordo più spesso e più difficile da ignorare tra i gruppi di tabelle e lo abbiamo spostato in una classe facoltativa che puoi applicare, .table-group-divider. Vedere i documenti della tabella per un esempio.

• Scrollspy è stato riscritto per utilizzare l'Intersection Observer API , il che significa che non hai più bisogno di wrapper padre relativi,offsetconfigurazione obsoleta e altro. Cerca che le tue implementazioni di Scrollspy siano più accurate e coerenti nell'evidenziazione della navigazione.

• I popover e le descrizioni comandi ora utilizzano variabili CSS. Alcune variabili CSS sono state aggiornate dalle loro controparti Sass per ridurre il numero di variabili. Di conseguenza, tre variabili sono state deprecate in questa versione: $popover-arrow-color, $popover-arrow-outer-color, e $tooltip-arrow-color.

• Aggiunti nuovi .text-bg-{color}aiutanti. Invece di impostare singoli .text-*e .bg-*utilità, ora puoi utilizzare gli .text-bg-*helper per impostare un background-colorprimo piano con contrasto color.

• Aggiunto .form-check-reversemodificatore per capovolgere l'ordine delle etichette e delle caselle di controllo/radio associate.

• Aggiunto il supporto delle colonne a strisce alle tabelle tramite la nuova .table-striped-columnsclasse.

Per un elenco completo delle modifiche, vedere il progetto v5.2.0 su GitHub .

v5.1.0

• Aggiunto supporto sperimentale per il layout della griglia CSS . — Questo è un lavoro in corso e non è ancora pronto per l'uso in produzione, ma puoi attivare la nuova funzionalità tramite Sass. Per abilitarlo, disabilitare la griglia predefinita, impostando $enable-grid-classes: falsee abilitare la Griglia CSS impostando $enable-cssgrid: true.

• Barre di navigazione aggiornate per supportare offcanvas. — Aggiungi cassetti offcanvas in qualsiasi barra di navigazione con le .navbar-expand-*classi reattive e alcuni markup offcanvas.

• Aggiunto nuovo componente segnaposto . — Il nostro componente più recente, un modo per fornire blocchi temporanei al posto del contenuto reale per aiutare a indicare che qualcosa è ancora in carica nel tuo sito o nella tua app.

• Il plug-in Comprimi ora supporta il collasso orizzontale . — Aggiungi .collapse-horizontalal tuo .collapseper comprimere widthinvece di height. Evita il ridisegno del browser impostando a min-heighto height.

• Aggiunti nuovi helper per lo stack e le regole verticali. — Applica rapidamente più proprietà flexbox per creare rapidamente layout personalizzati con pile . Scegli tra pile orizzontali ( .hstack) e verticali ( ). .vstackAggiungi divisori verticali simili agli <hr>elementi con i nuovi .vraiutanti .

• Aggiunte nuove :rootvariabili CSS globali. — Aggiunte diverse nuove variabili CSS al :rootlivello per il controllo degli <body>stili. Altri sono in lavorazione, anche attraverso le nostre utilità e componenti, ma per ora leggi le variabili CSS nella sezione Personalizza .

• Utilità di colore e sfondo revisionate per utilizzare le variabili CSS e aggiunte nuove utilità di opacità del testo e opacità dello sfondo . — .text-* e .bg-*le utilità sono ora costruite con variabili CSS e rgba()valori di colore, consentendoti di personalizzare facilmente qualsiasi utilità con nuove utilità di opacità.

• Aggiunti nuovi esempi di snippet basati per mostrare come personalizzare i nostri componenti. — Estrai componenti personalizzati pronti per l'uso e altri modelli di progettazione comuni con i nostri nuovi esempi di frammenti . Include piè di pagina , menu a discesa , gruppi di elenchi e modali .

• Rimossi gli stili di posizionamento inutilizzati dai popover e dai suggerimenti poiché questi sono gestiti esclusivamente da Popper. $tooltip-marginè stato deprecato e impostato su nullnel processo.

Vuoi maggiori informazioni? Leggi il post sul blog v5.1.0.

Dipendenze

• jQuery eliminato.
• Aggiornato da Popper v1.x a Popper v2.x.
• Sostituito Libsass con Dart Sass poiché il nostro compilatore Sass dato Libsass era deprecato.
• Migrato da Jekyll a Hugo per la creazione della nostra documentazione

Supporto browser

• Eliminato Internet Explorer 10 e 11
• Eliminato Microsoft Edge < 16 (Legacy Edge)
• Firefox abbandonato < 60
• Safari abbandonato < 12
• Safari iOS abbandonato < 12
• Chrome caduto < 60

Modifiche alla documentazione

• Home page, layout dei documenti e piè di pagina ridisegnati.
• Aggiunta nuova guida ai pacchi .
• Aggiunta una nuova sezione Personalizza , che sostituisce la pagina Temi della v4 , con nuovi dettagli su Sass, opzioni di configurazione globale, combinazioni di colori, variabili CSS e altro ancora.
• Riorganizzata tutta la documentazione dei moduli nella nuova sezione Moduli , suddividendo il contenuto in pagine più mirate.
• Allo stesso modo, è stata aggiornata la sezione Layout , per arricchire il contenuto della griglia in modo più chiaro.
• Rinominata la pagina del componente "Navi" in "Navi e schede".
• Rinominata la pagina "Assegni" in "Assegni e radio".
• Ridisegnata la barra di navigazione e aggiunto un nuovo sottonav per semplificare la navigazione nei nostri siti e nelle versioni dei documenti.
• Aggiunta nuova scorciatoia da tastiera per il campo di ricerca: Ctrl + /.

Sass

• Abbiamo abbandonato le unioni di mappe Sass predefinite per semplificare la rimozione dei valori ridondanti. Tieni presente che ora devi definire tutti i valori nelle mappe Sass come $theme-colors. Scopri come gestire le mappe Sass .

• RotturaFunzione rinominata color-yiq()e variabili correlate in color-contrast()quanto non è più correlata allo spazio colore YIQ. Vedi #30168.

  • $yiq-contrasted-thresholdviene rinominato in $min-contrast-ratio.
  • $yiq-text-darke $yiq-text-lightsono rispettivamente rinominati $color-contrast-darke $color-contrast-light.

• RotturaI parametri dei mixin di query multimediali sono stati modificati per un approccio più logico.

  • media-breakpoint-down()utilizza il punto di interruzione stesso invece del punto di interruzione successivo (ad esempio, media-breakpoint-down(lg)invece di media-breakpoint-down(md)visualizzare finestre di destinazione più piccole di lg).
  • Allo stesso modo, anche il secondo parametro in media-breakpoint-between()usa il punto di interruzione stesso invece del punto di interruzione successivo (ad esempio, media-between(sm, lg)invece delle media-breakpoint-between(sm, md)finestre di destinazione tra sme lg).

• RotturaStili di stampa e $enable-print-stylesvariabili rimossi. Le classi di visualizzazione della stampa sono ancora in circolazione. Vedi #28339 .

• RotturaDropped color(), theme-color(), e gray()funzioni a favore delle variabili. Vedi #29083 .

• Rotturatheme-color-level()La funzione rinominata color-level()e ora accetta qualsiasi colore desiderato invece dei soli $theme-colorcolori. Vedi #29083 Attenzione: color-level() è stato successivamente inserito v5.0.0-alpha3.

• RotturaRinominato $enable-prefers-reduced-motion-media-querye $enable-pointer-cursor-for-buttonsin $enable-reduced-motione $enable-button-pointersper brevità.

• RotturaRimosso il bg-gradient-variant()mix. Usa la .bg-gradientclasse per aggiungere sfumature agli elementi invece delle .bg-gradient-*classi generate.

• Rottura Mixin precedentemente deprecati rimossi:

  • hover, hover-focus, plain-hover-focus, ehover-focus-active
  • float()
  • form-control-mixin()
  • nav-divider()
  • retina-img()
  • text-hide()(ha anche eliminato la classe di utilità associata, .text-hide)
  • visibility()
  • form-control-focus()

• Rotturascale-color()Funzione rinominata in shift-color()per evitare collisioni con la funzione di ridimensionamento del colore di Sass.

• box-shadowmixins ora consente nullvalori e drop noneda più argomenti. Vedi #30394 .

• Il border-radius()mixin ora ha un valore predefinito.

Sistema di colore

• Il sistema di colori con cui funzionava color-level()ed $theme-color-intervalè stato rimosso a favore di un nuovo sistema di colori. Tutte lighten()e le darken()funzioni nella nostra base di codice sono sostituite da tint-color()e shade-color(). Queste funzioni mescoleranno il colore con il bianco o il nero invece di cambiarne la luminosità di una quantità fissa. Il shift-color()colore o ombreggerà un colore a seconda che il suo parametro di peso sia positivo o negativo. Vedere #30622 per maggiori dettagli.

• Aggiunte nuove tinte e sfumature per ogni colore, fornendo nove colori separati per ogni colore di base, come nuove variabili Sass.

• Contrasto cromatico migliorato. Rapporto di contrasto del colore aumentato da 3:1 a 4,5:1 e colori blu, verde, ciano e rosa aggiornati per garantire un contrasto WCAG 2.1 AA. Anche cambiato il nostro colore di contrasto del colore da $gray-900a $black.

• Per supportare il nostro sistema di colori, abbiamo aggiunto nuove funzioni personalizzate tint-color()e shade-color()per mescolare i nostri colori in modo appropriato.

Aggiornamenti della griglia

• Nuovo punto di interruzione! Aggiunto nuovo xxlpunto di interruzione per 1400pxe su. Nessuna modifica a tutti gli altri punti di interruzione.

• Grondaie migliorate. Le grondaie ora sono impostate in rem e sono più strette di v4 ( 1.5rem, o circa 24px, in basso da 30px). Questo allinea le grondaie del nostro sistema di griglia con le nostre utilità di spaziatura.

  • Aggiunta una nuova classe di grondaie ( .g-*, .gx-*, e .gy-*) per controllare le grondaie orizzontali/verticali, le grondaie orizzontali e le grondaie verticali.
  • RotturaRinominato .no-guttersin .g-0per abbinare le nuove utilità di grondaia.

• Le colonne non sono più state position: relativeapplicate, quindi potresti dover aggiungere .position-relativealcuni elementi per ripristinare quel comportamento.

• RotturaAbbandonato diverse .order-*classi che spesso non venivano utilizzate. Ora forniamo solo .order-1out .order-5of the box.

• RotturaEliminato il .mediacomponente in quanto può essere facilmente replicato con le utilità. Vedere #28265 e la pagina delle utilità flessibili per un esempio .

• Rottura bootstrap-grid.cssora si applica solo box-sizing: border-boxalla colonna invece di reimpostare il ridimensionamento globale della casella. In questo modo, i nostri stili di griglia possono essere utilizzati in più posti senza interferenze.

• $enable-grid-classesnon disabilita più la generazione di classi contenitore. Vedi #29146.

• Aggiornato il make-colmixin per impostare colonne uguali senza una dimensione specificata.

Contenuto, riavvio, ecc

• RFS è ora abilitato per impostazione predefinita. Le intestazioni che utilizzano ilfont-size()mixin regoleranno automaticamente la lorofont-sizescala con il viewport. Questa funzione è stata precedentemente attivata con la v4.

• RotturaRevisionata la nostra tipografia di visualizzazione per sostituire le nostre $display-*variabili e con una $display-font-sizesmappa Sass. Rimosse anche le singole $display-*-weightvariabili per un singolo $display-font-weights font-size.

• Aggiunte due nuove .display-*dimensioni dell'intestazione .display-5e .display-6.

• I collegamenti sono sottolineati per impostazione predefinita (non solo al passaggio del mouse), a meno che non facciano parte di componenti specifici.

• Tabelle riprogettate per aggiornare i loro stili e ricostruirle con variabili CSS per un maggiore controllo sullo stile.

• RotturaLe tabelle nidificate non ereditano più gli stili.

• Rottura .thead-lighte .thead-darkvengono eliminate a favore delle .table-*classi variant che possono essere utilizzate per tutti gli elementi della tabella ( , thead, tbody, tfoote tr) .thtd

• RotturaIl table-row-variant()mixin viene rinominato table-variant()e accetta solo 2 parametri: $color(nome colore) e $value(codice colore). Il colore del bordo e i colori degli accenti vengono calcolati automaticamente in base alle variabili dei fattori della tabella.

• Dividi le variabili di riempimento della cella della tabella in -ye -x.

• RotturaClasse abbandonata .pre-scrollable. Vedi #29135

• Rottura .text-*le utility non aggiungono più stati al passaggio del mouse e focus ai collegamenti. .link-*invece possono essere utilizzate classi helper. Vedi #29267

• RotturaClasse abbandonata .text-justify. Vedi #29793

• Rottura <hr>gli elementi ora usano heightinvece di borderper supportare meglio l' sizeattributo. Ciò consente anche l'uso di utilità di riempimento per creare divisori più spessi (ad esempio, <hr class="py-1">).

• padding-leftRipristina l' orizzontale predefinito <ul>e <ol>gli elementi dal predefinito del browser 40pxa 2rem.

• Aggiunto $enable-smooth-scroll, che si applica scroll-behavior: smootha livello globale, ad eccezione degli utenti che richiedono una riduzione del movimento tramite prefers-reduced-motionquery multimediali. Vedi #31877

RTL

• Le variabili, le utilità e i mixin specifici della direzione orizzontale sono stati tutti rinominati per utilizzare proprietà logiche come quelle che si trovano nei layout flexbox, ad esempio starte endal posto di lefte right.

Le forme

• Aggiunte nuove forme fluttuanti! Abbiamo promosso l'esempio di etichette mobili a componenti di moduli completamente supportati. Vedi la nuova pagina Etichette mobili.

• Rottura Elementi di moduli nativi e personalizzati consolidati. Caselle di controllo, radio, selezioni e altri input che avevano classi native e personalizzate nella v4 sono stati consolidati. Ora quasi tutti i nostri elementi del modulo sono interamente personalizzati, la maggior parte senza la necessità di HTML personalizzato.

  • .custom-control.custom-checkboxè adesso .form-check.
  • .custom-control.custom-custom-radioè adesso .form-check.
  • .custom-control.custom-switchè adesso .form-check.form-switch.
  • .custom-selectè adesso .form-select.
  • .custom-filee .form-filesono stati sostituiti da stili personalizzati in cima a .form-control.
  • .custom-rangeè adesso .form-range.
  • Nativo abbandonato .form-control-filee .form-control-range.

• RotturaCaduto .input-group-appende .input-group-prepend. Ora puoi semplicemente aggiungere pulsanti e .input-group-textcome figli diretti dei gruppi di input.

• Il lungo raggio di confine mancante sul gruppo di input con bug di feedback di convalida è stato finalmente risolto aggiungendo una .has-validationclasse aggiuntiva ai gruppi di input con convalida.

• Rottura Classi di layout specifiche del modulo eliminate per il nostro sistema di griglia. Usa la nostra griglia e le nostre utility invece di .form-group, .form-rowo .form-inline.

• RotturaLe etichette dei moduli ora richiedono .form-label.

• Rottura .form-textnon è più set display, permettendoti di creare in linea o bloccare il testo della guida come desideri semplicemente modificando l'elemento HTML.

• I controlli del modulo non sono più stati utilizzati fissi heightquando possibile, ma rinviati min-heightper migliorare la personalizzazione e la compatibilità con altri componenti.

• Le icone di convalida non vengono più applicate ai messaggi di posta <select>elettronica con multiple.

• File Sass sorgente riorganizzati in scss/forms/, inclusi gli stili dei gruppi di input.

Componenti

• Valori unificati paddingper avvisi, breadcrumb, schede, menu a discesa, gruppi di elenchi, modali, popover e suggerimenti per essere basati sulla nostra $spacervariabile. Vedi #30564 .

Fisarmonica

• Aggiunto nuovo componente per fisarmonica .

Avvisi

• Gli avvisi ora hanno esempi con icone .

• Rimossi gli stili personalizzati per messaggi di posta <hr>elettronica in ogni avviso poiché utilizzano già currentColor.

Distintivi

• RotturaEliminate tutte le .badge-*classi di colore per le utilità di sfondo (ad esempio, usa .bg-primaryinvece di .badge-primary).

• RotturaRilasciato : utilizzare invece .badge-pilll' .rounded-pillutilità.

• RotturaRimossi gli stili al passaggio del mouse e di messa a fuoco per <a>e <button>gli elementi.

• Aumentato il riempimento predefinito per i badge da .25em/ .5ema .35em/ .65em.

Briciole di pane

• Semplificato l'aspetto predefinito dei breadcrumb rimuovendo padding, background-color, e border-radius.

• Aggiunta nuova proprietà personalizzata CSS --bs-breadcrumb-dividerper una facile personalizzazione senza la necessità di ricompilare CSS.

Bottoni

• Rottura I pulsanti di commutazione , con caselle di controllo o radio, non richiedono più JavaScript e hanno un nuovo markup. Non abbiamo più bisogno di un elemento di avvolgimento, aggiungilo.btn-checka<input>e abbinalo a qualsiasi.btnclasse su<label>. Vedi #30650 . I documenti per questo sono stati spostati dalla nostra pagina Pulsanti alla nuova sezione Moduli.

• Rottura Abbandonato .btn-blockper utilità. Invece di usare .btn-blocksu .btn, avvolgi i tuoi pulsanti con .d-gride .gap-*un'utilità per distanziarli secondo necessità. Passa alle classi reattive per un controllo ancora maggiore su di esse. Leggi i documenti per alcuni esempi.

• Aggiornato our button-variant()e button-outline-variant()mixin per supportare parametri aggiuntivi.

• Pulsanti aggiornati per garantire un maggiore contrasto al passaggio del mouse e negli stati attivi.

• I pulsanti disabilitati ora hanno pointer-events: none;.

Carta

• RotturaAbbattuto .card-decka favore della nostra griglia. Avvolgi le tue carte in classi di colonne e aggiungi un .row-cols-*contenitore principale per ricreare i mazzi di carte (ma con un maggiore controllo sull'allineamento reattivo).

• RotturaAbbandonato .card-columnsa favore della Massoneria. Vedi #28922 .

• RotturaSostituita la .cardfisarmonica basata con un nuovo componente Accordion .

Giostra

• Aggiunta una nuova .carousel-darkvariante per testo scuro, controlli e indicatori (ottimo per sfondi più chiari).

• Sostituite le icone chevron per i controlli del carosello con i nuovi SVG di Bootstrap Icons .

Pulsante Chiudi

• RotturaRinominato .closeper .btn-closeun nome meno generico.

• I pulsanti di chiusura ora utilizzano un background-image(SVG incorporato) invece di un ×nell'HTML, consentendo una personalizzazione più semplice senza la necessità di modificare il markup.

• Aggiunta una nuova .btn-close-whitevariante che filter: invert(1)consente di abilitare le icone di eliminazione del contrasto più elevato su sfondi più scuri.

Crollo

• Rimosso l'ancoraggio a scorrimento per le fisarmoniche.

Dropdown

• Aggiunta una nuova .dropdown-menu-darkvariante e variabili associate per i menu a discesa scuri su richiesta.

• Aggiunta nuova variabile per $dropdown-padding-x.

• Scurito il divisore a discesa per migliorare il contrasto.

• RotturaTutti gli eventi per il menu a discesa vengono ora attivati ​​sul pulsante di attivazione/disattivazione del menu a discesa e quindi visualizzati in bolla nell'elemento padre.

• I menu a discesa ora hanno un data-bs-popper="static"attributo impostato quando il posizionamento del menu a discesa è statico o il menu a discesa è nella barra di navigazione. Questo è aggiunto dal nostro JavaScript e ci aiuta a utilizzare stili di posizione personalizzati senza interferire con il posizionamento di Popper.

• RotturaOpzione eliminata flipper il plug-in a discesa a favore della configurazione nativa di Popper. Ora puoi disabilitare il comportamento di capovolgimento passando un array vuoto per l' fallbackPlacementsopzione nel modificatore di capovolgimento .

• I menu a discesa possono ora essere cliccabili con una nuova autoCloseopzione per gestire il comportamento di chiusura automatica . Puoi utilizzare questa opzione per accettare il clic all'interno o all'esterno del menu a discesa per renderlo interattivo.

• I menu a discesa ora supportano .dropdown-items racchiusi in <li>s.

Jumbotron

• RotturaEliminato il componente jumbotron in quanto può essere replicato con le utilità. Guarda il nostro nuovo esempio Jumbotron per una demo.

Gruppo elenco

• Aggiunto nuovo .list-group-numberedmodificatore per elencare i gruppi.

Navigatori e schede

• Aggiunte nuove nullvariabili per font-size, font-weight, colore :hover coloralla .nav-linkclasse.

barre di navigazione

• RotturaLe barre di navigazione ora richiedono un contenitore all'interno (per semplificare drasticamente i requisiti di spaziatura e CSS richiesti).
• RotturaLa .activeclasse non è più applicabile a .nav-items, deve essere applicata direttamente a .nav-links.

Fuori tela

• Aggiunto il nuovo componente offcanvas .

Impaginazione

• I collegamenti di impaginazione ora sono personalizzabili margin-leftche vengono arrotondati dinamicamente su tutti gli angoli quando separati l'uno dall'altro.

• Aggiunti transitionmessaggi di posta elettronica ai collegamenti di impaginazione.

Popover

• RotturaRinominato .arrowin .popover-arrownel nostro modello popover predefinito.

• whiteListOpzione rinominata in allowList.

Filatori

• Gli spinner ora onorano prefers-reduced-motion: reducerallentando le animazioni. Vedi #31882 .

• Allineamento verticale dello spinner migliorato.

Brindisi

• I toast possono ora essere posizionati in a .toast-containercon l'aiuto delle utilità di posizionamento .

• Durata del brindisi predefinita modificata a 5 secondi.

• Rimosso overflow: hiddendai brindisi e sostituito con border-radiuss appropriati con calc()funzioni.

Suggerimenti

• RotturaRinominato .arrowin .tooltip-arrownel nostro modello di descrizione comando predefinito.

• RotturaIl valore predefinito per fallbackPlacementsviene modificato in ['top', 'right', 'bottom', 'left']per un migliore posizionamento degli elementi popper.

• RotturawhiteListOpzione rinominata in allowList.

Utilità

• RotturaRinominate diverse utilità per utilizzare nomi di proprietà logiche invece di nomi direzionali con l'aggiunta del supporto RTL:

  • Rinominato .left-*e .right-*in .start-*e .end-*.
  • Rinominato .float-lefte .float-rightin .float-starte .float-end.
  • Rinominato .border-lefte .border-rightin .border-starte .border-end.
  • Rinominato .rounded-lefte .rounded-rightin .rounded-starte .rounded-end.
  • Rinominato .ml-*e .mr-*in .ms-*e .me-*.
  • Rinominato .pl-*e .pr-*in .ps-*e .pe-*.
  • Rinominato .text-lefte .text-rightin .text-starte .text-end.

• RotturaMargini negativi disabilitati per impostazione predefinita.

• Aggiunta una nuova .bg-bodyclasse per impostare rapidamente lo <body>sfondo di ' su elementi aggiuntivi.

• Aggiunte nuove utilità di posizione per top, right, bottome left. I valori includono 0, 50%e 100%per ogni proprietà.

• Aggiunte nuove .translate-middle-xe .translate-middle-yutilità per centrare orizzontalmente o verticalmente gli elementi posizionati assoluti/fissi.

• Aggiunte nuove border-widthutilità .

• RotturaRinominato .text-monospacein .font-monospace.

• RotturaRimosso .text-hidein quanto metodo antiquato per nascondere il testo che non dovrebbe più essere utilizzato.

• Aggiunte .fs-*utilità per font-sizele utilità (con RFS abilitato). Questi utilizzano la stessa scala delle intestazioni predefinite dell'HTML (1-6, da grande a piccolo) e possono essere modificati tramite la mappa Sass.

• Rottura.font-weight-*Utilità rinominate .fw-*per brevità e coerenza.

• Rottura.font-style-*Utilità rinominate .fst-*per brevità e coerenza.

• Aggiunte .d-gridper visualizzare utilità e nuove gaputilità ( .gap) per layout CSS Grid e flexbox.

• RotturaRimosso .rounded-sme rounded-lg, e introdotta una nuova scala di classi, .rounded-0a .rounded-3. Vedi #31687 .

• Aggiunte nuove line-heightutilità: .lh-1, .lh-sm, .lh-basee .lh-lg. Vedi qui .

• Spostata l' .d-noneutilità nel nostro CSS per darle più peso rispetto ad altre utilità di visualizzazione.

• Esteso l' .visually-hidden-focusablehelper per lavorare anche sui contenitori, usando :focus-within.

Aiutanti

• Rottura Gli helper di incorporamento reattivi sono stati rinominati per proporzionare gli helper con nuovi nomi di classe e comportamenti migliorati, oltre a un'utile variabile CSS.

  • byLe classi sono state rinominate per cambiare xle proporzioni. Ad esempio, .ratio-16by9è ora .ratio-16x9.
  • Abbiamo eliminato il .embed-responsive-itemselettore del gruppo di elementi e a favore di un .ratio > *selettore più semplice. Non è necessaria più la classe e l'helper del rapporto ora funziona con qualsiasi elemento HTML.
  • La $embed-responsive-aspect-ratiosmappa Sass è stata rinominata $aspect-ratiose i suoi valori sono stati semplificati per includere il nome della classe e la percentuale come key: valuecoppia.
  • Le variabili CSS vengono ora generate e incluse per ogni valore nella mappa Sass. Modificare la --bs-aspect-ratiovariabile su .ratioper creare qualsiasi rapporto di aspetto personalizzato .

• Rottura Le classi "Screen reader" ora sono classi "visivamente nascoste" .

  • Modificato il file Sass da scss/helpers/_screenreaders.scssascss/helpers/_visually-hidden.scss
  • Rinominato .sr-onlye .sr-only-focusablein .visually-hiddene.visually-hidden-focusable
  • Rinominato sr-only()e sr-only-focusable()mixin in visually-hidden()e visually-hidden-focusable().

• bootstrap-utilities.cssora include anche i nostri aiutanti. Gli helper non devono più essere importati nelle build personalizzate.

JavaScript

• Rilasciata la dipendenza da jQuery e riscritti i plugin in modo che fossero in JavaScript normale.

• RotturaGli attributi dei dati per tutti i plug-in JavaScript ora hanno uno spazio dei nomi per aiutare a distinguere la funzionalità Bootstrap da terze parti e dal tuo codice. Ad esempio, utilizziamo data-bs-toggleinvece di data-toggle.

• Tutti i plugin ora possono accettare un selettore CSS come primo argomento. Puoi passare un elemento DOM o qualsiasi selettore CSS valido per creare una nuova istanza del plugin:

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

• popperConfigpuò essere passato come una funzione che accetta la configurazione Popper predefinita di Bootstrap come argomento, in modo da poter unire questa configurazione predefinita a modo tuo. Si applica a menu a discesa, popover e suggerimenti.

• Il valore predefinito per fallbackPlacementsviene modificato in ['top', 'right', 'bottom', 'left']per un migliore posizionamento degli elementi Popper. Si applica a menu a discesa, popover e suggerimenti.

• Rimosso il trattino basso dai metodi statici pubblici come _getInstance()→ getInstance().