Bootstrap 5: responsives CSS-Framework

Mit Bootstrap 5 – Design lesbarer gestalten

In den bereits vorangegangenen Artikeln „Individuelle CSS-Klassen einsetzen“ und „Code lesbar gestalten“ wurde erläutert, wie weniger Code eingesetzt werden kann, um Wartbarkeit und Lesbarkeit zu erhöhen.

In diesem Bootstrap 5 Tutorial wird gezeigt, wie das Responsive CSS Framework Bootstrap genutzt werden kann, um Code lesbarer, wartbarer und strukturierter zu gestalten. Damit lassen sich individuelle CSS-Klassen oftmals vermeiden.

‍

Rückblick: Ein Blick auf bisherige Codebeispiele

Betrachten wir zunächst Codezeilen, die im Artikel „Individuelle CSS-Klassen einsetzen“ behandelt wurden:

1<div style="display:flex;flex-direction:column;align-items:center;gap:0.25rem;">
2    <div style="color:brown;font-size:12px;">Current count: @currentCount</div>
3    <button style="border-radius:0.25px; background-color:darkgreen;height:25px;color:white;font-size:14px;display:flex">Click me</button>
4</div>

Dieser Code kann durch die Kombination von Bootstrap 5 und individuellen CSS-Klassen lesbarer und wartbarer gestaltet werden. Nachfolgend wird Schritt für Schritt erläutert, wie dies umgesetzt werden kann.
‍

Optimierung mit Bootstrap 5

Beginnen wir mit der ersten Zeile:

1<div class="d-flex flex-column align-items-center gap-1">
2    <div style="color:brown;font-size:12px;">Current count: @currentCount</div>
3    <button style="border-radius:0.25px; background-color:darkgreen;height:25px;color:white;font-size:14px;display:flex">Click me</button>
4</div>

In diesem Beispiel wurde z. B. display:flex durch die Bootstrap-5-Klasse d-flex ersetzt. Hier wurde vollständig auf individuelle CSS-Klassen verzichtet.
‍

Kombination von Bootstrap 5 und individuellen CSS-Klassen

Im nächsten Schritt kombinieren wir Bootstrap 5 mit individuellen CSS-Klassen. Starten wir zunächst mit Bootstrap 5:

1<div class="d-flex flex-column align-items-center gap-1">
2    <div style="color:brown;font-size:12px;">Current count: @currentCount</div>
3    <button class="d-flex rounded-2 py-1 background-color:darkgreen;color:white;font-size:14px">Click me</button>
4</div>

Im Anschluss werden individuelle CSS-Klassen ergänzt:

1.label-counter-button {
2    color: brown;
3    font-size: 12px;
4}
5
6.counter-button {
7    background-color: darkgreen;
8    color: white;
9    font-size: 14px;
10}

‍

Fazit: Effizientere und wartbare Code-Strukturen

Wie Sie sehen, wurden die responsive CSS Framework Klassen nach den Bootstrap-5-Klassen eingefügt. Dies spart Zeichen und vereinfacht die Wartung. Durch die strategische Kombination von Bootstrap-Standardklassen und individuellen Anpassungen wird nicht nur die Lesbarkeit erhöht, sondern auch die Flexibilität beim Styling verbessert.