Anpassungen für Bootstrap 5

Mit Ilch 2.2.0 wurde mit dem Wechsel zu Bootstrap 5 und CKEditor 5 umfangreiche Änderungen vorgenommen, die leider auch Anpassungen an Layouts und Modulen erfordern. Seit Bootstrap 3.4, welches in Ilch bis Version 2.1.60 genutzt wurde, hat sich viel geändert. Klassen und sogar Komponenten sind weggefallen, wurden umbenannt oder durch andere ersetzt. Natürlich können wir hier nicht die gesamte Bootstrap 5 Dokumentation durchgehen, aber typischerweise werden häufig auch nur bestimmte Teile von Bootstrap genutzt. Einige Punkte, die wir im Hinblick auf Bootstrap 5 an den Layouts und Modulen anpassen mussten, werden nun auf dieser Seite aufgelistet.

Offizielle Dokumentation zur Migration zu Bootstrap 5.2: https://getbootstrap.com/docs/5.2/migration/

Offizielle Dokumentation zur Migration zu Bootstrap 5.3: https://getbootstrap.com/docs/5.3/migration/

Offizielle Seite von Bootstrap: https://getbootstrap.com/

"text-left" zu "text-start" und "text-right" zu "text-end"

Renamed .text-left and .text-right to .text-start and .text-end.

Siehe: https://getbootstrap.com/docs/5.2/migration/#utilities

"float-left" zu "float-start" und "float-right" zu "float-end"

Renamed .float-left and .float-right to .float-start and .float-end.

Siehe: https://getbootstrap.com/docs/5.2/migration/#utilities

"pull-left" zu "float-start" und "pull-right" zu "float-end"

Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.

Renamed .float-left and .float-right to .float-start and .float-end.

Siehe:

https://getbootstrap.com/docs/5.2/migration/#utilities

https://getbootstrap.com/docs/4.1/migration/#utilities

"text-justify" ist weggefallen

Dropped .text-justify class. See #29793

Siehe: https://getbootstrap.com/docs/5.2/migration/#content-reboot-etc

"form-group", "form-row" und "form-inline" sind weggefallen

Das Ersetzen der Klasse "form-group" durch die beiden Klassen "row" und "mb-3" führt häufig zu einer sehr ähnlichen Darstellung.

Dropped form-specific layout classes for our grid system. Use our grid and utilities instead of .form-group, .form-row, or .form-inline.

Siehe: https://getbootstrap.com/docs/5.2/migration/#forms

Form labels benötigen jetzt die "form-label"-Klasse bzw. "col-form-label"-Klasse

In Ilch haben wir überwiegend horizontale Forms genutzt. Hier wäre die "col-form-label"-Klasse nötig.

Form labels now require .form-label.

Siehe:

https://getbootstrap.com/docs/5.2/migration/#forms

https://getbootstrap.com/docs/5.3/forms/overview/

For horizontal forms, each row (with .row) contains the label and a form control, so the label needs a .col-form-label to have the right padding in order to be vertically aligned to the form control. For vertical forms (by default in our doc), .form-label is used.

Siehe:

https://getbootstrap.com/docs/5.3/forms/layout/#horizontal-form

https://github.com/orgs/twbs/discussions/39276

Die Klasse "close" wurde in "btn-close" umbenannt

Renamed .close to .btn-close for a less generic name.

Siehe: https://getbootstrap.com/docs/5.2/migration/#close-button

"input-group-addon" und "input-group-btn" wurden durch "input-group-text" ersetzt

Mit Bootstrap 4.1 wurden die beiden Klassen durch zwei neue Klasse ersetzt und mit Bootstrap 5.2 wurde dies vereinfacht, indem nun nur noch die Klasse "input-group-text" nötig ist.

Dropped .input-group-append and .input-group-prepend. You can now just add buttons and .input-group-text as direct children of the input groups.

Siehe: https://getbootstrap.com/docs/5.2/migration/#forms

"img-responsive" wurde in "img-fluid" umbenannt

Renamed .img-responsive to .img-fluid.

Siehe:

https://getbootstrap.com/docs/4.1/migration/#images

https://getbootstrap.com/docs/5.3/content/images/

"img-circle" wurde in "rounded-circle" umbenannt

Renamed .img-circle to .rounded-circle

Siehe:

https://getbootstrap.com/docs/4.1/migration/#images

https://getbootstrap.com/docs/5.3/content/images/

Die "form-group-"-Klassen wurden entfernt. Es sollen nun die "form-control-"-Klassen genutzt werden.

Dropped .form-group-* classes for simplicity’s sake. Use .form-control-* classes instead now.

Siehe:

https://getbootstrap.com/docs/4.1/migration/#forms-1

https://getbootstrap.com/docs/5.3/forms/form-control/

"form-horizontal" wird nicht mehr benötigt

Dropped the .form-horizontal class requirement.

Siehe:

https://getbootstrap.com/docs/4.1/migration/#forms-1

https://getbootstrap.com/docs/5.3/forms/layout/

"form-control-static" wurde in "form-control-plaintext" umbenannt

Renamed .form-control-static to .form-control-plaintext.

Siehe:

https://getbootstrap.com/docs/4.1/migration/#forms-1

https://getbootstrap.com/docs/5.3/forms/form-control/#readonly-plain-text

"btn-default" wurde in "btn-secondary" umbenannt

Renamed .btn-default to .btn-secondary.

Siehe:

https://getbootstrap.com/docs/4.1/migration/#buttons

https://getbootstrap.com/docs/5.3/components/buttons/

"btn-xs" wurde entfernt. "btn-sm" kann genutzt werden, da sie nun kleiner ist als in Bootstrap 3.x.

Dropped the .btn-xs class entirely as .btn-sm is proportionally much smaller than v3’s.

Siehe:

https://getbootstrap.com/docs/4.1/migration/#buttons

https://getbootstrap.com/docs/5.3/components/buttons/

"divider" wurde in "dropdown-divider" umbenannt

Renamed .divider to .dropdown-divider.

Siehe:

https://getbootstrap.com/docs/4.1/migration/#dropdowns

https://getbootstrap.com/docs/5.3/components/dropdowns/#dividers

Dropdown items benötigen nun die Klasse "dropdown-item"

Dropdown items now require .dropdown-item.

Siehe:

https://getbootstrap.com/docs/4.1/migration/#dropdowns

https://getbootstrap.com/docs/5.3/components/dropdowns/

<span class="caret"></span> ist nicht mehr nötig.

Dropdown toggles no longer require an explicit <span class="caret"></span>; this is now provided automatically via CSS’s ::after on .dropdown-toggle.

Siehe: https://getbootstrap.com/docs/4.1/migration/#dropdowns

"navbar-toggle" wurde umbenannt in "navbar-toggler"

.navbar-toggle is now .navbar-toggler and has different styles and inner markup (no more three s).

Siehe:

https://getbootstrap.com/docs/4.1/migration/#navbar

https://getbootstrap.com/docs/5.3/components/navbar/

Bei der progressbar wurden einige Klassen ersetzt

Replaced contextual .progress-bar-* classes with .bg-* utilities. For example, class="progress-bar progress-bar-danger" becomes class="progress-bar bg-danger".

Replaced .active for animated progress bars with .progress-bar-animated.

Siehe:

https://getbootstrap.com/docs/4.1/migration/#progress

https://getbootstrap.com/docs/5.3/components/progress/

Die "hidden"- und "show"-Klassen wurden entfernt.

Sie können diese oft durch das "hidden"-Attribut ersetzen.

The .hidden and .show classes have been removed [...]

All .hidden- classes have been removed, save for the print utilities which have been renamed. [...]

Print utilities no longer start with .hidden- or .visible-, but with .d-print-.

Siehe:

https://getbootstrap.com/docs/4.1/migration/#responsive-utilities

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

"panels", "thumbnails" und "wells" wurden komplett entfernt und durch cards ersetzt

Halten Sie vor allem Ausschau nach "panels". Diese Komponente wurde in Ilch genutzt. Hier müssen Sie oft nur Klassen umbenennen.

• "panel-heading" zu "card-header"
• "panel-title" zu "card-title"
• "panel-body" zu "card-body"
• "panel-footer" zu "card-footer"

Dropped panels, thumbnails, and wells for a new all-encompassing component, cards.

Siehe:

https://getbootstrap.com/docs/4.1/migration/#components

https://getbootstrap.com/docs/5.3/components/card/

JavaScript: Data-Attribute haben nun einen Namespace

Dies betrifft verschiedene Komponenten von Bootstrap 5. Beispiele wären Dropdowns, Navbar und Tooltips.

Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use data-bs-toggle instead of data-toggle.

Siehe:

https://getbootstrap.com/docs/5.2/migration/#javascript

https://getbootstrap.com/docs/5.3/components/dropdowns/

https://getbootstrap.com/docs/5.3/components/navbar/

https://getbootstrap.com/docs/5.3/components/tooltips/