Migrieren von Bootstrap 4 nach Bootstrap 5

Im Dezember 2020 wurde Bootstrap 5 Beta 1 veröffentlicht. Nachdem man alle Änderungen und Ergänzungen gelesen hat, kann man nur feststellen, dass dies ein weiterer großer Schritt nach vorne ist.

17 Januar 2021

Peter

In Bootstrap 5

1 Kommentare

https://unsplash.com/@davidboca

Heutzutage verwenden Websites eine Menge CSS und Javascript. Wenn Sie Websites erstellen, können Sie diese nicht ständig mit den wichtigsten Browsern testen. Stattdessen benötigen Sie einen framework , der alle wichtigen Browser unterstützt. Dieser framework muss gut unterstützt werden und das bedeutet, dass nur wenige übrig bleiben.

Für diese Seite habe ich Bootstrap 4 gewählt. Dies ist kein Zufall. Vor ein paar Jahren suchte ich für einen Kunden den besten framework für eine große Anzahl von Websites. Nach einer umfangreichen Auswahl kam Bootstrap als Nummer eins heraus.

Ich mag Bootstrap sehr. Ich bin kein Experte, sondern ein Backend-Entwickler, der es für das Frontend verwendet. Das bedeutet, dass ich Bootstrap hauptsächlich aus einer technischen Perspektive betrachte. Ich bin auch kein Grafikdesigner, aber ich kenne Grafikdesigner, die es ebenfalls mögen.

Warum ein Upgrade auf Bootstrap 5?

Im Dezember 2020 wurde Bootstrap 5 Beta 1 veröffentlicht. Nachdem man alle Änderungen und Ergänzungen gelesen hat, kann man nur zu dem Schluss kommen, dass dies ein weiterer großer Schritt nach vorne ist. Bootstrap 5 Beta ersetzte Bootstrap 4 auf der Homepage der Bootstrap -Website, was bedeutet, dass sie es zumindest als geeignet für neue Designs ansehen.

Warum wollte ich ein Upgrade von Bootstrap 4 auf Bootstrap 5 durchführen? Letztes Wochenende habe ich meinen Entwicklungs-PC und Laptop von Ubuntu 18.04 auf Ubuntu 20.04 aktualisiert. Also dachte ich, während ich noch im Upgrade-Modus bin, warum nicht auch Bootstrap upgraden, das will ich wahrscheinlich sowieso irgendwann in diesem Jahr machen.

RTL, Rechts-nach-Links-Sprachen

Viele werden das nicht brauchen, aber es ist eine tolle Sache, wenn Sie Rechts-nach-Links-Sprachen unterstützen wollen. Es gibt etwa 300 Millionen Muttersprachler dieser Sprachen. Um dies zu aktivieren, müssen Sie nur dir="rtl" zum <html>-Element hinzufügen. Sie können dies selbst ausprobieren.

To enable  RTL  add '?rtl=on' to the url

To disable  RTL  add '?rtl=off' to the url

Benötigen Sie ein Upgrade?

Wie viele Leute verwende ich Bootstrap so wie es ist, also ab einem CDN, nur dass ich es auf meinem eigenen Webserver hoste. Wenn Sie viele Anpassungen, SCSS, verwenden, kann es schwierig werden. In diesem Beitrag teile ich meine Notizen zum Upgrade dieser Website.

Einige Fragen und Antworten:

War die Migration erfolgreich?
Ja. Diese Website läuft jetzt mit Bootstrap 5.
War das Upgrade schwierig?
Nein.
Wie viel Zeit hat es in Anspruch genommen?
Fünf Tage. Die meiste Zeit wurde mit der Konvertierung der Formularfelder verbracht. Außerdem musste ich die Funktionen zur Formularerstellung anpassen.
Gab es irgendwelche Probleme?
Ja, es gab einige Probleme. Mindestens eines ist zur Zeit noch ungelöst. In Bootstrap 4 ändert sich der Toggler (Hamburger-Symbol) in ein 'X' und umgekehrt. Ich habe keine Ahnung, wie man das in Bootstrap 5 macht.
Sollten Sie ein Upgrade durchführen?
Es liegt an Ihnen. Ich schlage vor, dass Sie sich zuerst die schwierigen Teile wie das Dropdown-Menü ansehen. Lesen Sie den Rest dieses Beitrags und schauen Sie sich die Probleme auf Github an.
Was hat die meiste Zeit in Anspruch genommen?
Das Neuanordnen der Formularfelder.

Bootstrap 5 weggeschmissen, aber ich kann nicht ohne es leben....

Bootstrap 5 verwendet nicht mehr jQuery. Das kann ich mir vorstellen. Sie brauchten nur einen Teil davon und können nun Probleme, Inkompatibilitäten, selbst beheben. Eine Abhängigkeit weniger.

Ich verwende jQuery überall und ich werde sicherlich nicht meinen gesamten Code gegen regulären Javascript austauschen. Der Hauptgrund ist, dass ich keine Zeit habe, Browserprobleme und Sicherheitsprobleme zu lösen. Bedeutet das, dass Sie mehr Javascript laden müssen? Eigentlich nicht. Bootstrap hat auch den notwendigen Code von popper.js genommen und ihn mit ihrem eigenen Code gebündelt.

Werkzeug zum Konvertieren von Bootstrap -Klassen

Ich konnte kein Tool finden, um Bootstrap -Klassen zu konvertieren, also habe ich Rexxer verwendet, ein allgemeines Suchen und Ersetzen-Tool für Linux. Das funktionierte gut, war aber manchmal sehr langsam wegen der vielen Dateien, die es durchsuchen musste. Aber ich will mich nicht beschweren. Ich hätte auch ein Werkzeug in Python schreiben können, aber das hätte weitere vier Stunden gedauert. Sie sollten vielleicht warten, bis weitere Upgrade-Tools verfügbar sind.

Schritt 1: Prüfen Sie die Bootstrap -Migrationsdokumente

Auf der Bootstrap -Website gibt es eine Seite mit dem Titel "Migrating to v5". Obwohl hier nicht alles aufgelistet ist, habe ich mich oft dabei ertappt, dass ich zu dieser Seite zurückgekehrt bin, um z. B. Änderungen an bestimmten Klassen zu sehen. Die Bootstrap -Website hat jetzt auch (endlich) ein fantastisches Suchfeld mit Autovervollständigung.

Schritt 2: Modifizieren Sie die Basisvorlage

Das Umstellen des Basistemplates auf Bootstrap 5 ist nichts Besonderes. Der interessanteste Teil ist das Entfernen von popper.js. Der Code befindet sich nun in bootstrap.bundle.min.js. Nachdem Sie diesen Schritt durchgeführt haben, denken Sie vielleicht: Was ist mit meiner schönen Website passiert? Seien Sie nicht verzweifelt!

Bootstrap 4 Basis-Vorlage:

<!DOCTYPE html>
<html lang="en">
<head>
<meta  charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/static/vendor/bootstrap/4.5.0-dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" rel="stylesheet">
</head>
<body>
	
<header>
</header>

<main>
</main>

<footer>
</footer>

<script src="/static/vendor/jquery/3.5.1/jquery-3.5.1.min.js"></script>
<script src="/static/vendor/popper/1.16.0/umd/popper.min.js"></script>
<script src="/static/vendor/bootstrap/4.5.0-dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

</body>
</html>

Bootstrap 5 -Basistemplate:

<!DOCTYPE html>
<html lang="en">
<head>
<meta  charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="/static/vendor/bootstrap/5.0.0-beta1-dist/css/bootstrap.min.css" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" rel="stylesheet">

<body>

<header>
</header>

<main>
</main>

<footer>
</footer>

<script src="/static/vendor/jquery/3.5.1/jquery-3.5.1.min.js"></script>
<script src="/static/vendor/bootstrap/5.0.0-beta1-dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

</body>
</html>

Schritt 2: Umbenennen der Bootstrap -Klassen

Als nächstes müssen Sie die Bootstrap -Klassen umbenennen. Nach der Änderung des Basistemplates sehen Sie eine Site mit vielen Problemen. Wenn Sie sich die Seite 'Migrating to v5' auf der Bootstrap -Website angesehen haben, werden Sie feststellen, dass viele Bootstrap -Klassen umbenannt wurden. Es gibt keine schöne einzelne Liste auf dieser Seite, also habe ich die Änderungen, die für mich wichtig waren, herausgekratzt:

Components
---
Rename .dropleft and .dropright to .dropstart and dropend.
Rename .dropdown-menu-*-left and .dropdown-menu-*-right to .dropdown-menu-*-start and .dropdown-menu-*-end.
Rename .bs-popover-left and .bs-popover-right to .bs-popover-start and .bs-popover-end.
Rename .bs-tooltip-left and .bs-tooltip-right to .bs-tooltip-start and .bs-tooltip-end.
Rename .carousel-item-left and .carousel-item-right to .carousel-item-start and .carousel-item-end.
Rename .close to .btn-close for a less generic name.

Utilities
---
Rename .left-* and .right-* to .start-* and .end-*.
Rename .float-left and .float-right to .float-start and .float-end.
Rename .border-left and .border-right to .border-start and .border-end.
Rename .rounded-left and .rounded-right to .rounded-start and .rounded-end.
Rename .ml-* and .mr-* to .ms-* and .me-*.
Rename .pl-* and .pr-* to .ps-* and .pe-*.
Rename .text-left and .text-right to .text-start and .text-end.

Text utilities
---
Rename .font-weight-* utilities as .fw-* for brevity and consistency.
Rename .font-style-* utilities as .fst-* for brevity and consistency.

Data utilities
---
Rename data-toggle to data-bs-toggle
Rename data-target to data-bs-target
Rename data-parent to data-bs-parent
Rename data-dismiss to data-bs-dismiss
Rename data-offset to data-bs-offset
Rename data-interval to data-bs-interval
Rename data-ride to data-bs-ride

Helpers
---
Rename .sr-only and .sr-only-focusable to .visually-hidden and .visually-hidden-focusable

Schritt 3: Fehler beheben

Der nächste Schritt ist, alle Dinge zu beheben, die kaputt sind. Ich pflege zwei zusätzliche CSS-Dateien:

default.css
Kann für ein anderes Theme geändert werden.
custom.css
Enthält das CSS, das immer vorhanden sein muss.

Unten stehen meine Notizen. Nicht alles, was ich gemacht habe, ist hier aufgeführt. Ich habe einige Formularfeldkonvertierungen weggelassen.

Alle Links sind jetzt standardmäßig unterstrichen. Schrecklich!

Korrektur: Zu default.css hinzufügen:

a, ... {
	color: #000000;
	text-decoration: none;
}

Überschriften zu fett

Weiß nicht, ob dies wirklich eine Änderung war.
Fix: Hinzufügen zu default.css:

h1, h2, h3, h4, h5, h6 {
	font-weight: 400!important;
}

Navbar-Toggler (Hamburger) Probleme (ungelöst)

Dies funktioniert jetzt anders. In Bootstrap 4 kann ich vom Hamburger auf X umschalten und umgekehrt. In Bootstrap 5 funktioniert das nicht mehr und ich habe im Moment keine Lösung dafür. Ich musste das 'X' entfernen.

Spaltenreihenfolge, linke Spalte und rechte Spalte waren auf dem Handy vertauscht

Fix: Ich musste ein wenig mit den Ordnungsklassen spielen, um dies zu beheben.

Tags verschwanden visuell

Die Tags verwendeten die Badge-Klasse.
Fix: Ich habe die Badge-Klasse durch die Button-Klasse ersetzt. Ist sowieso besser.

Schließen-Schaltfläche für Alerts und Modals

Behoben: Symbolzeile '&times' entfernen.

Benachrichtigungen. In Bootstrap 4 haben Sie etwas wie:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

In Bootstrap 5 wird dies:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

Gleiche Korrektur für Modale.

Zusammengeklappt navbar Marke und Hamburger an die Seitengrenzen links und rechts verschoben

Bei Bootstrap 4 musste ich dies nachbessern.

Beheben: px-0 in der Container-Klasse entfernen.

Von:

<div class="sticky-top z-index-30">
  <nav class="navbar   navbar-expand-md {{  navbar_main_extra_class }} sticky-top z-index-30">
    <div class="container  px-0  mx-auto max-width-site">

Nach:

<div class="sticky-top z-index-30">
  <nav class="navbar   navbar-expand-md {{  navbar_main_extra_class }} sticky-top z-index-30">
    <div class="container mx-auto max-width-site">

Rand links und rechts vergrößert bei XS und SM

Beheben: Verringern Sie den Rand durch Hinzufügen von px-0 und px-md-2.

Von:

<main role="main" class="container-fluid  px-0  px-sm-3 pb-3 pt-5">
  <div class="row no-gutters mx-auto max-width-site">
    <div class="col">

Nach:

<main role="main" class="container-fluid  px-0  px-sm-3 pb-3 pt-5">
  <div class="row no-gutters mx-auto max-width-site">
    <div class="col  px-0  px-md-2">

Formular - kein Rand unter Formularfeldern

Die Klasse form-group wurde entfernt.

Behebung: hinzufügen zu custom.css:

.form-group {
	margin-bottom: 1rem;
}

Formulare - Eingabegruppe

Die Suchleiste in navbar wurde hässlich. Dies ist eine Eingabegruppe. Bootstrap 5 ließ .input-group-append und .input-group-prepend fallen.

Korrektur: Verwenden Sie die Bootstrap -Dokumentation für Input-Gruppen.

In Bootstrap 4 haben Sie:

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's  username" aria-label="Recipient's  username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

In Bootstrap 5 wird dies:

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's  username" aria-label="Recipient's  username" aria-describedby="basic-addon2">
  <span class="input-group-text" id="basic-addon2">@example.com</span>
</div>

Formulare - Formularfeldbeschriftungen benötigen jetzt die Klasse .form-label

Fix: Klasse form-label hinzufügen.

In Bootstrap 4 haben Sie:

  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
  </div>

In Bootstrap 5 wird dies:

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>

Formulare - Benutzerdefinierte Auswahl wurde entfernt

Lösung: Ändern Sie die Klasse.

In Bootstrap 4 haben Sie:

<select class="custom-select">
...

In Bootstrap 5 wird dies zu:

<select class="form-select" aria-label="Default select example">

Formulare - Benutzerdefiniertes Kontrollkästchen wurde entfernt

Es ist jetzt identisch mit dem Ankreuzfeld Bootstrap 4 .

In Bootstrap 4 haben Sie:

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">
    Check this custom checkbox
  </label>
</div>

In Bootstrap 5 wird daraus:

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Default checkbox
  </label>
</div>

Einige Dinge, die ich mag und einige Dinge, die ich mir noch wünsche

mögen:

Mehr Kontrolle über das Layout
Einige Inkonsistenzen beseitigt
Neue Standardschriftart
Responsive Schriftarten
Ränder mit Breiten
Kontrolle über den Bundsteg
Jetzt ist es möglich, den Bundstegabstand sehr einfach zu ändern. Ich habe die Klasse gx-3 sofort angewendet!

Wunsch:

Mehr Breitenklassen, wie z.B. w-10, w-40
Responsive Breitenklassen, z.B. w-md-25
Responsive Ränder, z.B. Grabenbegrenzungen auf Mobile

Zusammenfassung

Die Migration von Bootstrap 4 auf Bootstrap 5 hat sehr viel Zeit in Anspruch genommen. Sie ist zu etwa 90 % abgeschlossen. Und ich verwende nur einen begrenzten Satz. Der größte Teil der Zeit wurde für die Konvertierung der Formularfelder verwendet. Ich generiere Formulare mit Feldern mit einem Jinja -Skript und musste eine Menge Änderungen vornehmen. Aber eine gute Sache ist, dass Bootstrap 5 die benutzerdefinierten Felder entfernt hat.
Wenn Sie eine Website haben, die noch ein paar Jahre läuft, dann lohnt sich die Migration auf Bootstrap 5 definitiv. Sie können auch ein paar Monate warten, bis dahin sind die meisten Ihrer Probleme wahrscheinlich schon von anderen gelöst worden.

Links / Impressum

Bootstrap 5 Beta 1
https://blog.getbootstrap.com/2020/12/07/bootstrap-5-beta-1/

Build fast, responsive sites with Bootstrap
https://getbootstrap.com/

Migrating to v5
https://getbootstrap.com/docs/5.0/migration/

Reboot
https://getbootstrap.com/docs/5.0/content/reboot/

twbs / bootstrap
https://github.com/twbs/bootstrap

Mehr erfahren

Bootstrap

Einen Kommentar hinterlassen

Kommentieren Sie anonym oder melden Sie sich zum Kommentieren an.

Kommentare (1)

Eine Antwort hinterlassen

Antworten Sie anonym oder melden Sie sich an, um zu antworten.

Anonymer Besucher (nicht eingeloggt) 10 Monate vor

I created a really cool tool to help on this. What do you think?
It works pretty good, and can help. I put a live version of my script, which is available on the webpage downloadable or usable. It is licensed under the GNU, so please feel free to modify it.
https://properprogramming.com/tools/converters/bootstrap-4-to-bootstrap-5-converter/

Migrieren von Bootstrap 4 nach Bootstrap 5

Warum ein Upgrade auf Bootstrap 5?

RTL, Rechts-nach-Links-Sprachen

Benötigen Sie ein Upgrade?

Bootstrap 5 weggeschmissen, aber ich kann nicht ohne es leben....

Werkzeug zum Konvertieren von Bootstrap -Klassen

Schritt 1: Prüfen Sie die Bootstrap -Migrationsdokumente

Schritt 2: Modifizieren Sie die Basisvorlage

Schritt 2: Umbenennen der Bootstrap -Klassen

Schritt 3: Fehler beheben

Alle Links sind jetzt standardmäßig unterstrichen. Schrecklich!

Überschriften zu fett

Navbar-Toggler (Hamburger) Probleme (ungelöst)

Spaltenreihenfolge, linke Spalte und rechte Spalte waren auf dem Handy vertauscht

Tags verschwanden visuell

Schließen-Schaltfläche für Alerts und Modals

Zusammengeklappt navbar Marke und Hamburger an die Seitengrenzen links und rechts verschoben

Rand links und rechts vergrößert bei XS und SM

Formular - kein Rand unter Formularfeldern

Formulare - Eingabegruppe

Formulare - Formularfeldbeschriftungen benötigen jetzt die Klasse .form-label

Formulare - Benutzerdefinierte Auswahl wurde entfernt

Formulare - Benutzerdefiniertes Kontrollkästchen wurde entfernt

Einige Dinge, die ich mag und einige Dinge, die ich mir noch wünsche

Zusammenfassung

Links / Impressum

Mehr erfahren

Bootstrap

Einen Kommentar hinterlassen

Kommentare (1)

Eine Antwort hinterlassen

Neueste

Meistgesehen

Tags