bootstrap

[Gunnar Bittersmann]

@@dedlfix

Mal ketzerisch zusammengefasst: Es ist das gleiche wie bei einem Hammer. Man kann damit Nägel einschlagen,

Mal ketzerisch den Vergleich berichtigt: Mit dem Hammer Bootstrap schlägst du keine Nägel in die Wand, sondern Schrauben.

Andererseits geht bei Verwendung von Bootstrap nicht wirklich was kaputt.

Doch, die performance, und damit die user experience. Der ganze Bootstrap-Code (300 Kilobyte, wir sprachen drüber) muss ja erstmal übertragen und geparst werden.

Eine der "Gefahren oder Tücken" ist also, dass die Anwender nicht genügend nachdenken oder HTML-Wissen haben, vielleicht auch zu ängstlich sind, etwas kaputt zu machen, um die in den Beispielen verwendeten divs durch für ihren Anwendungsfall geeignetere Elemente zu ersetzen.

Das kann ich bestätigen. Ich hatte unlängst statt <div class="container">, <div class="row"> und <div class="col-…"> – um den Gammelcode wenigstens etwas überschaubarer zu machen – <bs-container class="container">, <bs-row class="row"> und <bs-col class="col-…"> verwendet. Dann sieht man wenigstens bei den End-Tags </bs-col></bs-row></bs-container>, welches Element da nun gerade zugeht, anstatt unleserliches </div></div></div> im Code zu haben. Das wurde nicht verstanden, dass das überhaupt nichts kaputtmacht; und ich musste die sprechenden Elementbezeichner durch divs ersetzen, weil Bootstrap macht das in den Beispielen ja auch so. 😡

Ein wesentlicher Bestandteil von Bootstrap ist das 12-Spalten-Grid-System […] Das sorgt dafür, dass man recht unkompliziert den Elementen der Webseite eine einheitliche Ausrichtung und Größe geben kann

Eben das ist nicht der Fall!

Bei Boostrap brauchst du 3fache Verschachtelung:

<div class="container">
	<div class="row">
		<div class="col-6">Item 1</div>
		<div class="col-6">Item 2</div>
	</div>
</div>

Unkompliziert geht so:

<div class="container">
	<div>Item 1</div>
	<div>Item 2</div>
</div>

und das auch für unterschiedliche Viewportgrößen.

Und hierbei ist es noch weniger der Fall.

Bootstrap: für jeden Breakpoint noch eine zusätzliche Klasse mehr.

<div class="container">
	<div class="row">
		<div class="col-12 col-sm-6 col-md-4 col-lg-3">Item 1</div>
		<div class="col-12 col-sm-6 col-md-4 col-lg-3">Item 2</div>
	</div>
</div>

Unkompliziert geht so: für obiges unkomplizierte Markup bspw.:

.containder
{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}

Einfach nur die Mindestbreite der Griditems angeben – fertig. Keine media queries – das Rechnen kann man dem Rechner überlassen.

Bei Bootstrap hat man deutlich höheren Aufwand beim Erstellen des Codes; und nochmal viel höheren Aufwand bei späteren Änderungen.

LLAP 🖖