Migrare da Bootstrap 4 a Bootstrap 5

Blocs ora supporta più versioni del framework Bootstrap e include anche funzionalità integrate aggiuntive per migrare facilmente un progetto alla versione più recente.

Come migrare

Per migrare un progetto a Bootstrap 5, apri il file main Impostazioni del progetto e impostare il contesto menu a discesa fino a Bootstrap 5. Il processo di migrazione inizierà quindi e ti avviserà quando sarà completo.

Cambiamenti importanti

I Blocs funzionalità di migrazione automatizzata migrerà solo il codice che Blocs ha creato, non migrerà alcun codice personalizzato che è stato aggiunto a un progetto tramite allegati, le Editor di codice o Widget del codice. Per aiutare a risolvere eventuali problemi, ti consigliamo di familiarizzare con il funzionario Documenti sulla migrazione di Bootstrap 5.

Messa in Piega

Ci sono una serie di piccole differenze di stile visivo in Bootstrap 5, tuttavia, la più evidente è il fatto che tutti i collegamenti sono ora sottolineati per impostazione predefinita, per aiutare a migliorare l'accessibilità del sito.

Structure

Tutte le barre di navigazione ora hanno un contenitore all'interno. Ciò semplifica drasticamente i requisiti di spaziatura ed elimina la necessità di estese sostituzioni CSS.

Javascript

Bootstrap 5 non richiede o utilizza più jquery. Ciò significa che Jquery non è incluso nei siti Bootstrap 5, per impostazione predefinita. Questa modifica ha il potenziale per rompere il javascript personalizzato che è stato aggiunto a un progetto.

Al momento dell'esportazione, Blocs analizzerà tutti gli allegati javascript, controllandoli per eventuali riferimenti evidenti a Jquery. Se vengono trovati riferimenti, Blocs includerà automaticamente Jquery con il sito.

Attributi dei dati

Gli attributi dei dati per tutti i JavaScript (modali, caroselli, descrizioni comandi ecc.) Sono ora distanziati dei nomi per aiutare a distinguere la funzionalità Bootstrap da terze parti. Ad esempio, Bootstrap 5 utilizza data-bs-attiva/disattiva invece di commutazione dati. Di seguito è riportato un elenco degli attributi di dati più comuni che sono stati modificati, fare riferimento a Documenti sulla migrazione di Bootstrap 5 per un ampio elenco.

• commutazione dati > data-bs-attiva/disattiva
• posizionamento dei dati > posizionamento-bs-dati
• dati-genitore > data-bs-genitore
• Ignora i dati > dati-bs-dismiss
• giro di dati > dati-bs-ride
• diapositiva dei dati > data-bs-diapositiva
• dati-slide-to > dati-bs-slide-to

Classi

Ci sono una serie di modifiche ai nomi delle classi in Bootstrap 5, di seguito è riportato un elenco delle classi più comuni che sono cambiate. Si prega di fare riferimento al Documenti sulla migrazione di Bootstrap 5 per un ampio elenco.

Moduli

• controllo personalizzato > controllo del modulo
• interruttore personalizzato > interruttore di forma
• input-controllo-personalizzato > modulo-controllo-input
• etichetta-controllo-personalizzata > etichetta di controllo del modulo

Incorporamenti reattivi

• incorporare-reattivo > rapporto
• incorporare-reattivo-16by9 > rapporto-16 × 9
• incorporare-reattivo-4by3 > rapporto-4 × 3
• incorporare-reattivo-4by4 > rapporto-4 × 4
• incorporare-reattivo-9by16 > rapporto-9 × 16

Margine e riempimento

• ml-0 > ms-0
• ml-1 > ms-1
• ml-2 > ms-2
• ml-3 > ms-3
• ml-4 > ms-4
• ml-5 > ms-5
• ml-auto > ms-auto
• mr-0 > me-0
• mr-1 > me-1
• mr-2 > me-2
• mr-3 > me-3
• mr-4 > me-4
• mr-5 > me-5
• signor-auto > io-auto
• pl-0 > PS-0
• pl-1 > PS-1
• pl-2 > PS-2
• pl-3 > PS-3
• pl-4 > PS-4
• pl-5 > PS-5
• pl-auto > ps-auto
• pr-0 > pr-0
• pr-1 > pe-1
• pr-2 > pe-2
• pr-3 > pe-3
• pr-4 > pe-4
• pr-5 > pe-5
• pr-auto > pe-auto

allineamento

• float-sinistra > avvio a virgola mobile
• galleggiante-destra > galleggiante
• testo a sinistra > inizio del testo
• testo a destra > fine del testo

Popover e descrizioni comandi

• freccia > tooltip-freccia
• freccia > popover-freccia

Miscellanea

• solo SR > visivamente nascosto
• senza grondaie > g-0
• btn-block > in-100