1. Home
  2. Tipps
  3. Migrieren Sie von Bootstrap 4 zu Bootstrap 5
  1. Home
  2. Fehlerbehebung
  3. Migrieren Sie von Bootstrap 4 zu Bootstrap 5

Migrieren Sie von Bootstrap 4 zu Bootstrap 5

Blocs Unterstützt jetzt mehrere Versionen des Bootstrap-Frameworks und enthält zusätzliche integrierte Funktionen, um ein Projekt einfach auf die neueste Version zu migrieren.

Wie man migriert

Öffnen Sie das Hauptfenster, um ein Projekt auf Bootstrap 5 zu migrieren Projekt Einstellungen und setze die Rahmen Dropdown-Liste zu Bootstrap 5. Der Migrationsprozess beginnt dann und benachrichtigt Sie, wenn er abgeschlossen ist.

Design-Leinwand

Wichtige Änderungen

Das Blocs automatisierte Migrationsfunktion migriert nur Code zur Verbesserung der Gesundheitsgerechtigkeit Blocs erstellt wurde, wird kein benutzerdefinierter Code migriert, der einem Projekt über hinzugefügt wurde Anhänge, Code-Editor oder nach einem Code-Widget. Um Probleme zu lösen, empfehlen wir Ihnen, sich mit dem Beamten vertraut zu machen Bootstrap 5-Migrationsdokumente.

Styling

In Bootstrap 5 gibt es eine Reihe kleinerer Unterschiede im visuellen Stil. Am auffälligsten ist jedoch die Tatsache, dass alle Links jetzt standardmäßig unterstrichen sind, um die Zugänglichkeit der Website zu verbessern.

Struktur

Alle Navigationsleisten enthalten jetzt einen Container. Dies vereinfacht die Abstandsanforderungen drastisch und macht umfangreiche CSS-Überschreibungen überflüssig.

Javascript

Bootstrap 5 benötigt oder verwendet nicht mehr JQuery. Dies bedeutet, dass Jquery standardmäßig nicht in Bootstrap 5-Sites enthalten ist. Diese Änderung kann dazu führen, dass benutzerdefiniertes Javascript, das einem Projekt hinzugefügt wurde, beschädigt wird.

Beim Export, Blocs scannt alle Javascript-Anhänge und überprüft sie auf offensichtliche Verweise auf Jquery. Wenn Referenzen gefunden werden, Blocs wird Jquery automatisch in die Site aufnehmen.

Wichtig

Bitte beachten Sie, dass Jquery-Code, der über den Code-Editor zu einem Projekt hinzugefügt wird, die automatische Aufnahme von Jquery nicht auslöst.

Datenattribute

Datenattribute für alle JavaScript-Daten (Modalitäten, Karussells, QuickInfos usw.) sind jetzt mit einem Namespace versehen, um die Bootstrap-Funktionalität von Drittanbietern zu unterscheiden. Zum Beispiel verwendet Bootstrap 5 data-bs-toggle statt Daten umschalten. Unten finden Sie eine Liste der häufigsten Datenattribute, die sich geändert haben Bootstrap 5-Migrationsdokumente für eine umfangreiche Liste.

  • Daten umschalten > data-bs-toggle
  • Datenplatzierung > Daten-BS-Platzierung
  • Daten-Eltern > data-bs-eltern
  • Datenentlassung > Daten-bs-entlassen
  • Datenfahrt > Daten-BS-Fahrt
  • Datenfolie > Daten-BS-Folie
  • Daten-Folie-zu > data-bs-slide-to

Klassen

In Bootstrap 5 gibt es eine Reihe von Änderungen an Klassennamen. Nachfolgend finden Sie eine Liste der am häufigsten geänderten Klassen. Bitte wende dich an die Bootstrap 5-Migrationsdokumente für eine umfangreiche Liste.

Formulare
  • Zollkontrolle > Formularprüfung
  • Custom-Switch > Formschalter
  • benutzerdefinierte Steuereingabe > Formular-Check-Eingabe
  • Custom-Control-Label > Formular-Check-Label
Responsive Einbettungen
  • einbettungsempfindlich > Verhältnis
  • Embed-Responsive-16by9 > Verhältnis 16 × 9
  • Embed-Responsive-4by3 > Verhältnis 4 × 3
  • Embed-Responsive-4by4 > Verhältnis 4 × 4
  • Embed-Responsive-9by16 > Verhältnis 9 × 16
Rand und Polsterung
  • 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
  • Herr-Auto > ich-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
Ausrichtung
  • links schweben > Float-Start
  • schweben rechts > Float-Ende
  • Text links > Textstart
  • Text rechts > Textende
Popovers und Tooltips
  • Pfeil > Tooltip-Pfeil
  • Pfeil > Popover-Pfeil
Sonstiges
  • Nur sr > visuell versteckt
  • keine Dachrinnen > g-0
  • btn-block > w-100
Aktualisiert am 7. April 2021

War dieser Artikel hilfreich?

Verwandte Artikel