1. Home
  2. Tips
  3. Migreren van Bootstrap 4 naar Bootstrap 5
  1. Home
  2. Probleem oplossen
  3. Migreren van Bootstrap 4 naar Bootstrap 5

Migreren van Bootstrap 4 naar Bootstrap 5

Blocs ondersteunt nu meerdere versies van het Bootstrap-framework en bevat ook extra ingebouwde functionaliteit om eenvoudig een project naar de nieuwste versie te migreren.

Hoe te migreren

Om een ​​project naar Bootstrap 5 te migreren, opent u het main Projectinstellingen en stel de kader vervolgkeuzelijst naar Bootstrap 5. Het migratieproces zal dan beginnen en u informeren wanneer het voltooid is.

ontwerp-canvas

Belangrijke wijzigingen

Het Blocs geautomatiseerde migratiefunctie migreert alleen code dat Blocs heeft gemaakt, zal het geen aangepaste code migreren die is toegevoegd aan een project via toebehoren Code-editor of Codewidget​ Om eventuele problemen op te lossen, raden we u aan om uzelf vertrouwd te maken met de functionaris Bootstrap 5-migratiedocumenten.

Styling

Er zijn een aantal kleine verschillen in visuele stijl in Bootstrap 5, maar het meest opvallende is het feit dat alle links nu standaard onderstreept zijn om de toegankelijkheid van de site te helpen verbeteren.

Structuur

Alle navigatiebalken hebben nu een container erin. Dit vereenvoudigt de afstandsvereisten drastisch en maakt uitgebreide CSS-overrides overbodig.

Javascript

Bootstrap 5 vereist of gebruikt niet langer jQuery​ Dit betekent dat Jquery niet standaard is opgenomen in Bootstrap 5-sites. Deze wijziging kan mogelijk aangepast javascript breken dat aan een project is toegevoegd.

Bij export Blocs scant alle javascript-bijlagen en inspecteert ze op duidelijke verwijzingen naar Jquery. Als er referenties worden gevonden, Blocs zal JQuery automatisch aan de site toevoegen.

belangrijk

Houd er rekening mee dat elke JQuery-code die via de code-editor aan een project wordt toegevoegd, de automatische opname van Jquery niet zal activeren.

Gegevensattributen

Gegevensattributen voor alle JavaScript (modals, carrousels, tooltips enz.) Hebben nu een naamruimte gekregen om de Bootstrap-functionaliteit te onderscheiden van die van derden. Bootstrap 5 gebruikt bijvoorbeeld data-bs-toggle in plaats van gegevens-schakelaar​ Hieronder vindt u een lijst met de meest voorkomende gegevensattributen die zijn gewijzigd.Raadpleeg het Bootstrap 5-migratiedocumenten voor een uitgebreide lijst.

  • gegevens-schakelaar > data-bs-toggle
  • data-plaatsing > data-bs-plaatsing
  • data-ouder > data-bs-ouder
  • data-disiss > data-bs-negeren
  • data-rit > data-bs-rit
  • gegevensdia > data-bs-dia
  • data-slide-naar > data-bs-slide-naar

Klassen

Er zijn een aantal wijzigingen in de klassenamen in Bootstrap 5, hieronder staat een lijst met de meest voorkomende klassen die zijn gewijzigd. Raadpleeg de Bootstrap 5-migratiedocumenten voor een uitgebreide lijst.

Formulieren
  • aangepaste controle > formulier-check
  • aangepaste schakelaar > vorm-schakelaar
  • aangepaste controle-invoer > formulier-check-input
  • aangepast controlelabel > formulier-check-label
Responsieve insluitingen
  • insluiten-responsief > verhouding
  • embed-responsive-16by9 > verhouding-16 × 9
  • embed-responsive-4by3 > verhouding-4 × 3
  • embed-responsive-4by4 > verhouding-4 × 4
  • embed-responsive-9by16 > verhouding-9 × 16
Marge en opvulling
  • 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
  • dhr-auto > ik-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
Uitlijning
  • zweven naar links > vlotter-start
  • zweven-rechts > vlotter-einde
  • tekst-links > tekst-start
  • tekst-rechts > tekst-end
Popovers en tooltips
  • pijl > tooltip-pijl
  • pijl > popover-pijl
Diversen
  • alleen sr > visueel verborgen
  • no-goten > G-0
  • btn-block > w-100
Bijgewerkt op 23 november 2022

Was dit artikel behulpzaam?

Gerelateerde artikelen