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.
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 '×' 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">×</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.
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/
Neueste
- Ausblenden der Primärschlüssel der Datenbank UUID Ihrer Webanwendung
- Don't Repeat Yourself (DRY) mit Jinja2
- SQLAlchemy, PostgreSQL, maximale Anzahl von Zeilen pro user
- Anzeige der Werte in den dynamischen Filtern SQLAlchemy
- Sichere Datenübertragung mit Public Key Verschlüsselung und pyNaCl
- rqlite: eine hochverfügbare und distverteilte SQLite -Alternative
Meistgesehen
- Verwendung von Pythons pyOpenSSL zur Überprüfung von SSL-Zertifikaten, die von einem Host heruntergeladen wurden
- Verwendung von UUIDs anstelle von Integer Autoincrement Primary Keys mit SQLAlchemy und MariaDb
- Verbindung zu einem Dienst auf einem Docker -Host von einem Docker -Container aus
- PyInstaller und Cython verwenden, um eine ausführbare Python-Datei zu erstellen
- SQLAlchemy: Verwendung von Cascade Deletes zum Löschen verwandter Objekte
- Flask RESTful API Validierung von Anfrageparametern mit Marshmallow-Schemas