1. Casa
  2. Consigli
  3. Migrare da Bootstrap 4 a Bootstrap 5
  1. Casa
  2. Troubleshooting
  3. Migrare da Bootstrap 4 a Bootstrap 5

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.

tela di design

Cambiamenti importanti

La 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, la 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.

Consigli

Tieni presente che qualsiasi codice Jquery aggiunto a un progetto tramite l'editor di codice non attiverà l'inclusione automatica di Jquery.

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
Aggiornato il 23 novembre 2022

questo articolo è stato utile?

Articoli Correlati