Bootstrap 5 Tutorial | Responsive CSS Framework Guide
TL;DR
Dieser praktische Guide zu Bootstrap 5 zeigt anhand eines Praxisbeispiels, wie das Responsive CSS Framework eingesetzt wird, um Inline-Styles zu reduzieren, individuelle CSS-Klassen gezielt zu kombinieren und wartbaren, sauberen Frontend-Code zu schreiben.
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.
