Cosa c’è di nuovo in Bootstrap 5

Bootstrap è una delle librerie CSS più popolari. Permette agli sviluppatori di utilizzare facilmente stili e componenti belli e creare siti web responsive. L’uso di Bootstrap può risparmiare tempo agli sviluppatori, specialmente con componenti che vengono utilizzati in quasi ogni progetto.

Bootstrap 5 (l’attuale versione principale, rilasciata nel maggio 2021) ha portato con sé un sacco di cambiamenti e miglioramenti, tra cui l’aggiunta di nuovi componenti, nuove classi, nuovi stili per vecchi componenti, supporto agli browser aggiornato, rimozione di alcuni vecchi componenti e molto altro.

In questo articolo, esamineremo cosa è cambiato in Bootstrap 5, cosa è stato eliminato e, ancora più entusiasmante, cosa c’è di nuovo.

Quando Usare Bootstrap (e quando no)

Bootstrap si autodefinisce come “il framework più popolare al mondo per costruire siti responsivi, pensati per dispositivi mobili” e con 152k stelle su GitHub, non penso che tale affermazione sia troppo fuorviante. Specialmente per i principianti, Bootstrap è un ottimo modo per iniziare a creare siti web moderni e puliti. Rende facile realizzare progetti complessi e pensati per dispositivi mobili e fornisce molti componenti che probabilmente sarai necessario in diversi progetti.

Bootstrap ha una curva di apprendimento bassa e si presta bene a siti web statici che non richiedono un passaggio di compilazione, poiché puoi semplicemente fare riferimento alla libreria dal CDN di Bootstrap. Questo è in contrasto con alcune altre popolari librerie CSS che potrebbero essere ottimizzate per l’uso con un bundler o un task runner.

Dovresti anche essere consapevole, tuttavia, che Bootstrap non è una soluzione miracolosa. Per chi non è esperto, Bootstrap rende facile produrre markup disordinato e complicato. È anche una libreria relativamente pesante in termini di kilobyte (anche se questo migliora con ogni rilascio), quindi potrebbe non essere la scelta migliore se stai utilizzando solo una o due delle sue funzionalità. Come con qualsiasi astrazione, sarà di grande aiuto se hai una buona comprensione della tecnologia sottostante e puoi prendere una decisione informata su quando utilizzarla.

Aggiornamento da Bootstrap 4 a 5

L’aggiornamento da Bootstrap 4 a 5 è generalmente abbastanza semplice. La maggior parte dei componenti, delle loro classi e delle classi di utilità disponibili in Bootstrap 4 sono ancora disponibili in Bootstrap 5. La cosa principale su cui dovresti concentrarti durante la migrazione è se le classi o i componenti che stai utilizzando siano stati eliminati. Se sono stati eliminati, ci sono sostituzioni o modi per ottenere lo stesso risultato utilizzando classi di utilità. La seconda cosa su cui dovresti concentrarti è il passaggio dagli attributi data-* agli attributi data-bs-* nei componenti che richiedono JavaScript come parte delle loro funzionalità. (Ne parleremo più nella prossima sezione.)

Se utilizzi i file Sass di Bootstrap, ci sono alcune variabili e mixin che sono state rinominate. Bootstrap 5 ha una sezione estesa e dettagliata su personalizzazione, nonché dettagli sulle variabili Sass e mixin per ciascun componente nelle rispettive pagine di documentazione.

Cosa è cambiato

Bootstrap 5 apporta modifiche fondamentali a Bootstrap come libreria, con cambiamenti nei dipendenze richieste, supporto ai browser e altro ancora. Porta anche modifiche ai componenti e alle classi che abbiamo sempre utilizzato nelle versioni precedenti.

jQuery non più una dipendenza

Come una grande variazione rispetto alle versioni precedenti, jQuery non è più una dipendenza di Bootstrap. Ora, puoi utilizzare Bootstrap nella sua piena gloria senza di esso, ma hai ancora bisogno di Popper.js. Questo cambiamento facilita l’uso di Bootstrap in progetti che non richiedono o non utilizzano jQuery, come quando si utilizza Bootstrap con React.

Puoi ancora utilizzare jQuery con Bootstrap se fa parte del tuo sito web. Se Bootstrap rileva jQuery nell’oggetto window, aggiungerà automaticamente tutti i componenti al sistema di plugin di jQuery. Quindi, se stai migrando da v4 a v5, non devi preoccuparti di questo cambiamento e puoi ancora utilizzare jQuery con Bootstrap secondo necessità.

Ma cosa succede se usi jQuery nel tuo sito, ma non vuoi che Bootstrap lo usi? Puoi farlo aggiungendo l’attributo data-bs-no-jquery all’elemento body del documento:

<body data-bs-no-jquery="true">
</body>

Come funziona Bootstrap senza jQuery? Ad esempio, in v4 useresti il seguente codice JavaScript per creare un elemento Toast:

$('.toast').toast()

In Bootstrap 5, puoi usare lo stesso codice per creare un elemento Toast se il tuo sito utilizza già jQuery. Senza jQuery, dovrai utilizzare un codice simile al seguente per creare un elemento Toast:

const toastElList = [...document.querySelectorAll('.toast')]
const toastList = toastElList.map((toastEl) => {
  return new bootstrap.Toast(toastEl)
})

Questo utilizza semplicemente JavaScript Vanilla per interrogare il documento alla ricerca di elementi con la classe .toast, quindi inizializza un componente Toast sull’elemento utilizzando new bootstrap.Toast().

Cambiamento nel supporto dei browser

Fino alla versione 4, Bootstrap supportava Internet Explorer (IE) 10 e 11. A partire da Bootstrap 5, il supporto per IE è stato completamente eliminato. Quindi, se è necessario supportare IE nel tuo sito web, probabilmente dovresti stare attento durante la migrazione a v5.

Altri cambiamenti nel supporto dei browser includono:

• Supporto per Firefox e Chrome a partire dalla versione 60
• Supporto per Safari e iOS a partire dalla versione 12
• Supporto per Android Browser e WebView a partire dalla versione 6

Cambiamento negli attributi dei dati

Bootstrap 5 ha modificato il nome degli attributi dei dati generalmente utilizzati dai suoi componenti che utilizzano JavaScript come parte della loro funzionalità. In precedenza, la maggior parte dei componenti che dipendevano da alcune funzionalità JavaScript avrebbero avuto attributi dei dati che iniziavano con data-. Ad esempio, per creare un componente Tooltip in Bootstrap 4:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-toggle="tooltip" 
  data-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

Si noti l’uso di data-toggle e data-placement. In Bootstrap 5, gli attributi dei dati per questi componenti ora iniziano con data-bs per facilitare la denominazione degli attributi Bootstrap. Ad esempio, per creare un componente Tooltip in Bootstrap 5:

<button 
  type="button" 
  class="btn btn-secondary" 
  data-bs-toggle="tooltip" 
  data-bs-placement="top" 
  title="Tooltip"
>
  Tooltip
</button>

Invece di utilizzare `data-toggle` e `data-placement`, utilizziamo `data-bs-toggle` e `data-bs-placement`. Se utilizzi JavaScript per creare componenti in Bootstrap, probabilmente non c’è bisogno di apportare modifiche. Tuttavia, se i tuoi componenti dipendono solo dagli attributi dati per funzionare, devi cambiare tutti gli attributi dati che iniziano con `data` in modo che inizino con `data-bs`.

Bug risolti

Nella documentazione di Bootstrap 4, sotto Browser e dispositivi, c’è un elenco di bug che si verificano su alcuni browser. Questi bug non sono più elencati in lo stesso elenco per Bootstrap 5. L’elenco include quanto segue:

• Lo stile di hover veniva applicato agli elementi durante eventi touch su iOS, il che non era desiderabile poiché era considerato un comportamento inaspettato.
• L’uso di `.container` in Safari 8 e versioni successive causava una piccola dimensione del font durante la stampa.
• Il raggio del bordo veniva sovrascritto dalla feedback di validazione (ma poteva essere risolto aggiungendo una classe extra `.has-validation`).

L’elenco di bug e problemi nella documentazione di Bootstrap 4 dettaglia anche bug che si sono verificati su versioni di browser non più supportate.

Altre modifiche

Ci sono molte altre modifiche che sono o di minore importanza o che non causano un cambiamento drastico e visibile. Queste modifiche sono:

• Bootstrap 5 ora utilizza Popper v2. Assicurati di aggiornare la tua versione di Popper. Popper v1 non funzionerà più, poiché Bootstrap 5 richiede @popperjs/core invece della precedente popper.js.

• Bootstrap 5 ora può essere utilizzato come modulo nel browser utilizzando una versione di Bootstrap costruita come modulo ECMAScript.

• Poiché Libsass e Node Sass (che erano utilizzati in Bootstrap 4) sono ora deprecati, Bootstrap 5 utilizza Dart Sass per compilare i file Sass sorgente in CSS.

• Sono stati modificati alcuni valori delle variabili Sass, come $zindex-modal che è passato da 1050 a 1060, $zindex-popover da 1060 a 1070, e altri ancora. Pertanto, si raccomanda di verificare le variabili Sass di ciascun componente o classe di utilità nella documentazione di Bootstrap 5.

• In passato, per rendere un elemento nascosto ma mantenere la sua individuabilità per tecnologie assistive, veniva utilizzata la classe .sr-only. Questa classe è ora sostituita con .visually-hidden.

• In precedenza, per rendere un elemento interattivo nascosto ma ancora individuabile per tecnologie assistive, era necessario utilizzare sia le classi .sr-only che .sr-only-focusable. In Bootstrap 5, è sufficiente utilizzare la classe .visually-hidden-focusable senza .visually-hidden.

• I blocchi di citazione con una fonte nominata sono ora racchiusi da un elemento <figure>.

  Ecco un esempio di come sono ora i Blockquotes in Bootstrap 5:

• Nelle versioni precedenti, gli stili delle tabelle erano ereditati. Ciò significa che se una tabella è annidata all’interno di un’altra tabella, la tabella annidata erediterà la tabella genitore. In Bootstrap 5, gli stili delle tabelle sono indipendenti l’uno dall’altro anche se sono annidati.

• Utilità dei bordi ora supportano le tabelle. Ciò significa che ora puoi cambiare il colore del bordo di una tabella utilizzando le utilità del colore del bordo.

  Ecco un esempio dell’uso delle utilità dei bordi con le tabelle in Bootstrap 5:

• Lo stile predefinito dei breadcrumb è stato modificato, rimuovendo il fondo grigio predefinito, il padding e il bordo arrotondato che erano presenti nelle versioni precedenti.

  Ecco un esempio dello stile dei Breadcrumb in Bootstrap 5:

• Il nome delle classi che utilizzavano left e right per riferirsi alla posizione è stato cambiato in start e end. Ad esempio, .dropleft e .dropright in dropdown sono sostituiti rispettivamente da .dropstart e .dropend.

• Allo stesso modo del punto precedente, le classi utilità che usavano l per left e r per right ora usano s per start e e per end rispettivamente. Ad esempio, .mr-* è ora .me-*.

• La classe .form-control-range utilizzata per gli input di range è ora .form-range.

• I gutters sono ora impostati in rems anziché nei precedenti px.

• .no-gutters è stato rinominato in .g-0 come parte delle nuove classi di gutter aggiunte (più dettagli su questo in sezioni successive).

• I link ora sono sottolineati per impostazione predefinita, anche quando non sono in hover.

• I nomi di classe personalizzati degli elementi del form sono cambiati da .custom-* per far parte delle classi degli elementi del form. Ad esempio, .custom-check è sostituito da .form-check, .custom-select è sostituito da .form-select, e così via.

• Aggiungere .form-label ai label è ora obbligatorio.

• Gli avvisi, i breadcrumb, i card, i dropdown, i gruppi di liste, i modali, i popover e i tooltip ora usano gli stessi valori di padding utilizzando la variabile $spacer.

• Il padding predefinito negli elementi badge è ora cambiato da .25em/.5em a .35em/.65em.

• I wrapper per pulsanti a interruttore vengono utilizzati con caselle di controllo e pulsanti radio. Anche la marcatura è ora semplificata. In Bootstrap 4, un pulsante a interruttore con casella di controllo era ottenuto con la seguente marcatura:

  <div class="btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary active">
      <input type="checkbox" checked> Checked
    </label>
  </div>
  

  In Bootstrap 5, si può fare in modo più semplice:

  <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
  <label class="btn btn-primary" for="btn-check">Checked</label>
  

• Gli stati active e hover dei pulsanti presentano ora un contrasto maggiore nel colore.

• Gli iconcine di freccia per i carousel ora utilizzano SVG da Bootstrap Icons.

• La classe per il pulsante di chiusura è stata rinominata da .close a .btn-close, e utilizza un’icona SVG invece di ×.

• Le separazioni per i dropdown sono ora più scure per un migliore contrasto.

• La navbar ora dovrebbe essere racchiusa all’interno di un elemento container. Ad esempio in Bootstrap 4:

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    ...
  </nav>
  

  Diventa in Bootstrap 5:

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      ...
    </div>
  </nav>
  

• La classe .arrow nei componenti popover è ora sostituita dalla classe .popover-arrow, e la classe .arrow nei componenti Tooltip è ora sostituita dalla classe .tooltip-arrow.

• L’opzione popover whiteList è stata rinominata in allowList.

• La durata predefinita per il Toast è cambiata a 5 secondi.

• Il valore predefinito per fallbackPlacements nei componenti tooltip, dropdown e popover è stato modificato nell’array ['top', 'right', 'bottom', 'left'].

• .text-monospace è stato rinominato in .font-monospace.

• .font-weight-* è stato rinominato in .fw-* e .font-style-* in .fst-*.

• .rounded-sm e .rounded-lg sono ora sostituiti da una gamma di classi arrotondate .rounded-* da 0 a 3.

Cosa è stato eliminato

Le modifiche possono avere un costo. Con l’uscita di una nuova versione che apporta cambiamenti e miglioramenti, vengono anche eliminate alcune delle vecchie funzionalità che precedentemente supportava. Con questa nuova release, alcuni componenti, classi di utilità o altre funzionalità di Bootstrap sono stati eliminati.

La maggior parte degli elementi eliminati da Bootstrap 5 sono stati rimossi perché lo stesso effetto può essere raggiunto utilizzando classi di utilità invece di renderli un componente autonomo. Inoltre, alcuni elementi che sono stati eliminati si sono rivelati inutilizzati o non necessari.

Ecco un elenco di cosa è stato eliminato da Bootstrap 5:

• Come menzionato nella sezione precedente, il supporto per IE è stato completamente eliminato.

• Le classi di colore per badge (ad esempio, .badge-primary) sono state eliminate in favore dell’uso delle classi di utilità per il colore (ad esempio, .bg-primary).

• La classe .badge-pill per badge, che donava a un badge uno stile a pillola, è stata eliminata in favore dell’uso di .rounded-pill, che ottiene lo stesso risultato.

• La classe di pulsanti .btn-block è stata rimossa, poiché lo stesso risultato può essere ottenuto utilizzando classi di utilità di visualizzazione come .d-block.

• La disposizione delle carte Masonry .card-columns precedentemente disponibile è stata eliminata, poiché presentava molti effetti collaterali.

• L’opzione flip per i componenti a discesa è stata rimossa, a favore delle configurazioni di Popper.

• Il componente Jumbotron è stato eliminato, poiché lo stesso risultato può essere ottenuto utilizzando classi di utilità.

• Alcune delle classi di utilità per l’ordine (.order-*) sono state eliminate, poiché in precedenza andavano da 1 a 12. Ora vanno da 1 a 5.

• Il componente multimediale è stato eliminato, poiché lo stesso risultato può essere ottenuto con classi di utilità.

• Le classi .thead-light e .thead-dark sono state eliminate, poiché le classi varianti .table-* possono essere applicate a tutti gli elementi della tabella.

• La classe .pre-scrollable è stata eliminata, poiché non viene utilizzata molto.

• La classe .text-justify è stata eliminata, a causa di problemi di rispondenza, così come la classe .text-hide, perché il suo metodo è vecchio e non dovrebbe essere usato. E le classi .text-* non aggiungono più stati di hover o focus ai link. Quelle classi .text-* dovrebbero essere sostituite con classi .link-*.

• Gli input groups che contengono più input o componenti non hanno più bisogno di utilizzare .input-group-append e .input-group-prepend. Gli elementi che dovrebbero far parte del gruppo possono essere aggiunti direttamente come figli del .input-group.

  Ecco un esempio di utilizzo degli input groups con più input:

• .form-group, .form-row, e .form-inline sono stati tutti eliminati a favore delle classi di layout.

• .form-text non ha più una proprietà display impostata. La visibilità dell’elemento dipenderà dal fatto che l’elemento stesso sia un elemento block o inline.

• I simboli di validazione sono stati rimossi per gli elementi <select> con multiple.

• La classe .card-deck è stata rimossa a favore delle classi di griglia.

• I margini negativi sono disabilitati per impostazione predefinita.

• .embed-responsive-item gli elementi sono ora rimossi a favore dell’applicazione dello stile su tutti i figli dei rapporti, che in precedenza erano incorporamenti reattivi (più su questo nella sezione successiva).

Cosa c’è di nuovo

Infine, Bootstrap apporta molte aggiunte entusiasmanti alla sua libreria nella versione 5. Alcune di queste modifiche includono nuove funzionalità, nuovi concetti supportati, nuovi componenti, nuove classi utilità e altro ancora.

Le dimensioni dei font reattive sono ora abilitate per impostazione predefinita

Dimensioni dei font reattive (RFS) erano presenti nelle versioni precedenti di Bootstrap, ma erano disabilitate per impostazione predefinita. Bootstrap 5 abilita RFS per impostazione predefinita, rendendo i font in Bootstrap più reattivi. RFS è un progetto laterale creato da Bootstrap per inizialmente scalare e ridimensionare le dimensioni dei font in modo reattivo. Ora, è in grado di fare lo stesso per proprietà come margine, riempimento, ombra della scatola e altro ancora.

Ciò che fa è fondamentalmente calcolare i valori più adatti in base alle dimensioni del browser, e questi calcoli vengono tradotti in funzioni calc quando viene compilato. L’uso di RFS abbandona anche l’uso precedente di px per utilizzare rem, poiché aiuta a ottenere una migliore reattività.

Se stai utilizzando i file Sass per Bootstrap, ora puoi utilizzare i mixin creati da RFS, incluso font-size, margin, padding, e altro ancora, che ti consentono di assicurarti che i tuoi componenti e stili siano reattivi.

Supporto da destra a sinistra

Bootstrap 5 aggiunge il supporto per il testo a sinistra (RTL) utilizzando RTLCSS. Poiché Bootstrap viene utilizzato in tutto il mondo, è un grande e importante passo rendere disponibile il supporto RTL già incluso di default. Per questo motivo, Bootstrap 5 ha eliminato le denominazioni specifiche per le direzioni (ad esempio, l’uso di left e right) in favore di start e end. Ciò rende Bootstrap abbastanza flessibile da funzionare con siti web sia da sinistra a destra (LTR) che da destra a sinistra (RTL). Ad esempio, .dropleft è ora .dropstart, .ml-* è ora .ms-*, e altro ancora.

Per far sì che Bootstrap riconosca e applichi stili RTL sul tuo sito web, devi impostare il dir di <html> su rtl e aggiungere un attributo lang con la lingua RTL del sito web. Ad esempio, lang="ar".

Infine, dovrai includere il file CSS RTL di Bootstrap:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N" crossorigin="anonymous">

E con ciò, il tuo sito web supporterà il testo da destra a sinistra.

Nuovo breakpoint

Bootstrap 5 introduce il supporto per il nuovo breakpoint xxl che si rivolge a dispositivi con larghezza maggiore o uguale a 1400px. In passato, il breakpoint più alto era xl, che si rivolgeva a dispositivi con larghezza maggiore o uguale a 1200px. Questa modifica consente una migliore rispondenza alle esigenze dei dispositivi con schermi più grandi, poiché il breakpoint xl non era sufficiente.

Utilizzare il nuovo breakpoint è simile a tutti gli altri breakpoint. Ad esempio, per applicare uno spazio interno per dispositivi con larghezza maggiore o uguale a 1400px, puoi farlo utilizzando la classe .p-xxl-2.

Miglioramenti nella documentazione

Anche se questo non fa parte della libreria stessa, è buono notare il miglioramento nella documentazione di Bootstrap. La documentazione in Bootstrap 5 ha una migliore organizzazione dei contenuti, poiché i componenti che hanno dettagli più estesi ora hanno le proprie sezioni. Ad esempio, il componente Form in Bootstrap 4 era solo una pagina con tutti i componenti stipati dentro. In Bootstrap 5, la documentazione del componente Form è una sezione a sé stante, con sottocategorie per diversi sottocomponenti tra cui Form Control, Select, Input Groups e altro ancora.

Inoltre, la navigazione nella documentazione è più semplice ora attraverso la barra laterale, specialmente per schermi più piccoli. In Bootstrap 4, la barra laterale del sommario non era visibile su dispositivi più piccoli, rendendo più difficile trovare la sezione richiesta sulla pagina. In Bootstrap 5, il sommario è sempre visibile su tutte le dimensioni dello schermo.

Inoltre, in Bootstrap 5 puoi trovare tutte le variabili Sass, mixins e funzioni per ogni componente sulla sua pagina. In passato, c’era solo una pagina sui temi che aveva alcuni dettagli su come cambiare le variabili del tema in Bootstrap. Ora, c’è una sezione di personalizzazione a sé stante che fornisce maggiori dettagli su come personalizzare il tema di Bootstrap.

Nuovi componenti

Bootstrap 5 introduce alcuni nuovi componenti nella libreria. Alcuni di questi componenti erano parte di altri componenti e ora sono componenti autonomi.

Accordion

In passato, l’Accordion faceva parte del componente Collapsible, piuttosto che essere un componente a sé stante. In Bootstrap 5, Accordion è un nuovo componente. Con l’Accordion arriva una nuova classe, .accordion, che contiene al suo interno un elenco di elementi accordion. Inoltre, gli Accordion hanno uno stile nuovo rispetto allo stile precedente in Bootstrap 4. Ecco un esempio del componente accordion:

Bootstrap 5 aggiunge anche alcune classi per modificare lo stile dell’Accordion. Ad esempio, .accordion-flush rimuove parte dello stile dell’Accordion predefinito come i colori di sfondo o i bordi. Puoi anche fare in modo che un elemento accordion rimanga sempre aperto rimuovendo l’attributo data-bs-parent dal suo elemento .accordion-collapse.

Offcanvas

Un altro nuovo componente è Offcanvas, che ti permette di creare un sidebar sovrapposto. È lo sidebar che di solito viene utilizzato sulle pagine web per mostrare il menu su dispositivi più piccoli. Puoi posizionarla su qualsiasi lato della pagina utilizzando .offcanvas-start per sinistra in LTR, .offcanvas-top per in alto, .offcanvas-end per destra in LTR, e .offcanvas-bottom per in basso. Puoi anche specificare se l’Offcanvas dovrebbe avere o meno uno sfondo. Ecco un esempio di utilizzo del componente Offcanvas:

Floating Label

Floating Label è una nuova parte componente dei componenti Form. Ti consente di creare un input la cui etichetta sembra un segnaposto inizialmente, poi quando l’input riceve il focus l’etichetta galleggia in cima all’input sopra il valore. Funziona anche su elementi <select> e elementi <textarea>. Ecco un esempio di utilizzo degli etichette galleggianti:

Altre aggiunte

Oltre ai nuovi componenti, ci sono nuovi classi per componenti esistenti, nuove classi di utilità, nuove classi ausiliarie e altro ancora. Ecco un elenco di tutte le altre nuove aggiunte in Bootstrap 5:

• È stata aggiunta la classe .row-cols-auto, che consente alle colonne di assumere la loro larghezza naturale.

• A new utility class has been added to justify content called .justify-content-evenly.

• In precedenza, i gutter tra le colonne erano ottenuti utilizzando le utilità di spaziatura. Ora, puoi impostare il gutter tra le colonne utilizzando la nuova utilità di layout Gutter. Per impostare un gutter orizzontale, usa .gx-*. Per impostare un gutter verticale, usa .gy-*. Per impostare il gutter sia orizzontalmente che verticalmente, usa .g-*.

• A start script has been added to the Bootstrap package when installed with npm or Yarn. The start script compiles the CSS and JavaScript files, builds the documentation, then starts a local server.

• Le classi di utilità di allineamento verticale possono ora essere utilizzate con tabelle.

• A new class .caption-top has been added, which allows placing the caption of a table at the top rather than at the bottom.

• Ora c’è la possibilità di cambiare il divisore in Breadcrumb utilizzando la variabile CSS --bs-breadcrumb-divider.

  Ecco un esempio di cambio del divisore in >>:

• Esiste una nuova variante scura per i carousels che utilizza la classe .carousel-dark, e una nuova variante scura per i dropdown che utilizza .dropdown-menu-dark.

• Esiste una nuova opzione di chiusura automatica nei Dropdown che può modificare il comportamento predefinito di chiusura del menu Dropdown. Per impostazione predefinita, i menu dropdown si chiudono quando si fa clic fuori dal dropdown o su uno degli elementi dropdown. Puoi cambiare questo impostando l’attributo dati data-bs-auto-close su inside, che fa sì che il dropdown si chiuda quando si fa clic su uno degli elementi dropdown ma non quando si fa clic fuori. Puoi anche impostarlo su outside, che farà sì che il dropdown si chiuda solo quando si fa clic fuori dal dropdown. Infine, puoi impostarlo su false per far sì che si chiuda solo quando viene cliccato di nuovo il pulsante del dropdown. Se stai inizializzando il dropdown con JavaScript, puoi utilizzare l’opzione autoClose al posto dell’attributo dati. Ecco un esempio del suo utilizzo:

• Ora ci sono stili migliorati per gli input file nei moduli.

• A new color input has been added, using the class .form-control-color.

• A new datalists input type has been added, which simulates a typeahead select field. Here’s an example:

• Sono stati aggiunti nuovi toni e sfumature di colore nelle variabili Sass.

• Sono state aggiunte due nuove dimensioni di intestazione di visualizzazione .display-5 e .display-6.

• C’è una nuova variante bianca per i pulsanti di chiusura .btn-close-white.

• I dropdown ora possono avere .dropdown-items racchiusi in elementi <li>.

• Gli elementi nei gruppi di elenchi ora possono essere numerati utilizzando la nuova classe .list-group-numbered.

• Sono stati aggiunti proprietà transition per i link nel componente di Paginazione, migliorandone lo stile.

• È stata introdotta una nuova classe .bg-body che imposta il colore di sfondo del corpo a bianco.

• Sono state aggiunte nuove classi di utilità position per impostare le proprietà top, left, right o bottom di un elemento. Ad esempio, .top-0.

• Sono state aggiunte nuove classi .translate-middle-x e .translate-middle-y per centrare facilmente elementi assoluti orizzontalmente e verticalmente rispettivamente.

• Sono stati aggiunti nuovi utilizzi di larghezza bordo classi .border-* che vanno da 1 a 5.

• C’è una nuova utilità di visualizzazione .d-grid e una nuova utilità di spazio .gap.

• Sono stati aggiunti nuovi utilizzi di altezza linea .lh-1, .lh-sm, .lh-base e .lh-lg.

• Sono stati aggiunti nuovi aiuti di rapporto che sostituiscono ciò che in precedenza erano aiuti di incorporamento reattivo. I nomi delle classi sono stati rinominati sostituendo embed-responsive con ratio e by con x. Ad esempio, ciò che in precedenza era .embed-responsive-16by9 ora è .ratio-16x9.

• A new option popperConfig has been added to Dropdowns, Popovers and Tooltips. This option can be used to make changes to Popper’s configurations.

• Ci sono utilità .fs-* per le dimensioni dei font, poiché RFS è ora abilitato per impostazione predefinita.

Conclusione

Bootstrap è stato uno dei principali framework CSS per la maggior parte del decennio scorso. Consente agli sviluppatori di costruire facilmente siti web responsive e offrire una buona esperienza utente. Con le aggiunte e le modifiche di Bootstrap 5, questo processo sarà ancora più semplice e consentirà di migliorare il design dei siti web e fornire una buona esperienza utente. Se stai utilizzando Bootstrap 4 e stai pensando di migrare a Bootstrap 5, la migrazione è facile e probabilmente non dovrai apportare molte modifiche.

Domande frequenti (FAQs) su Bootstrap 5