Bootstrap 4 Update

Wie der ein oder andere vielleicht schon vernommen hat, gab es beim allseits bekannten CSS-Framework Bootstrap im Januar das größere Update auf die Version 4. Wir von werkraum haben uns die Änderungen angesehen und wollen die für uns wichtigsten Neuerungen hier kurz vorstellen.

Bootstrap 4 Komponenten

Bei den Komponenten sind uns zwei Änderungen besonders aufgefallen: die Navigation und die Einführung der Cards. Das Design der Navigation wurde in Richtung flat-design, eine subtilere Optik, geändert, und bietet durch die ebenfalls unterstützte Flexeigenschaft ein verbessertes responsives Verhalten. Eine der besten Neuerungen ist die breite Unterstützung der Flexeigenschaft. Nahezu alle Komponenten, wie beispielsweise das Grid oder die Bootstrap-eigene Navigationsleiste, unterstützen nun flex. Dies ist gerade für die Entwicklung von responsiven Webdesigns relevant und vereinfacht die Arbeit. Außerdem gibt es ein paar semantische Änderungen, man kann nun direkt die .navbar Klasse verwenden. 

Die Cards, flexible Container, welche die bisherigen Panels und Wells ersetzen, unterstützen ebenfalls flex, ein Motto, welches sich quasi durch das ganze Bootstrap-Update hindurchzieht und bieten eine Reihe von zusätzlichen Features, wie zum Beispiel eigene Navbars und Headings.

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <footer class="blockquote-footer">Someone famous in Source Title</footer>
    </blockquote>
  </div>
</div>

Neuerungen im Bootstrap Grid

Auch das Grid-System, genauer gesagt die Struktur und die Grid-Spalten wurden überarbeitet. Die Breite der Spalten ist de facto gleich geblieben, allerdings wurde die Aufteilung ein wenig geändert. Es gibt nun fünf verschiedene Größen (xs, sm, md, lg xl) wobei nun xl für sehr große Bildschirme angedacht ist. Die Größenangaben werden nun nicht mehr in Pixel angegeben, sondern in em beziehungsweise rem, was das Grid responsiver und dynamischer macht. Das Grid unterstützt nun ebenfalls, wie so viele andere Komponenten auch, die Flexeigenschaft.

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

Nutzung von Sass statt Less

Seit der Version 4 unterstützt Bootstrap nicht mehr Less, sondern Sass zur Anpassung der Komponenten. Doch warum eigentlich nun Sass? Zum einen spricht die schnellere Kompilierbarkeit durch Libsass, einen C/C++ Port der Sass Engine, dafür. Zum anderen zeichnet sich Sass durch eine bessere Lesbarkeit, sowie eine bessere Übersicht über child–parent-Relationen und das „Nesting“ von Selectoren aus, was wiederum zu einer besseren Lesbarkeit und weniger redundantem Code führt. Zudem unterstützt Sass die Verwendung von Variablen, was Wartung oder kleinere Änderungen am Design erleichtern kann. Daher wird Sass von der Webentwicklercommunity eher bevorzugt. Wir bei werkraum nutzen ebenfalls Sass in unseren Projekten, daher war dies keine wirkliche Umstellung.

Kleinere Änderungen in Bootstrap 4

Zum Schluss seien noch eine Reihe kleinerer Änderungen erwähnt. Bootstrap 4 unterstützt nicht mehr offiziell den Internet Explorer 8 bzw. 9, da viele CSS3-Funktionalitäten, wie zum Beispiel eben die Flexeigenschaft, auf diesen Browsern nicht unterstützt werden. Ferner werde Glyphicons nun nicht mehr unterstützt, allerdings steht mit Font Awesome eine gute Alternative bereit. Die responsiven Floats wurden ebenfalls geändert. Bisher musste für eine bestimmte Bildschirmgröße ein Media Query geschrieben werden und dann konnte man die floats einfügen. Nun orientieren diese sich an den vorhandenen Gridgrößen, beziehungsweise der gesamten Breite des Bildschirms. Ein praktisches Beispiel: Du möchtest ein Element rechts am Rand auf einem mittelgroßen Bildschirm schweben lassen? Dann kannst du nun die Klasse .float-md-right verwenden und bist fertig.

Abschließend kann man sagen, das Update auf die Version 4 ist durchaus gelungen. Insbesondere die Einführung der Flexeigenschaft und der Wechsel zu Sass als "Stylesheet-Sprache" haben uns bei werkraum gut gefallen und wir sind gespannt auf die nächsten coolen Erweiterungen des Frameworks.

Hat Dir der Artikel gefallen?