Einführung in Bootstrap 4

Bootstrap 4 leicht gemacht
Keine Kommentare

Bootstrap 4 ist da und hat so einiges gegenüber der Vorgängerversion verändert. Was ist neu und wie arbeitet man mit der neuen Version? Dieser Artikel gibt eine praktische Einführung in die verschiedenen Funktionen von Bootstrap 4 und einen Überblick über die Änderungen.

Bootstrap ist ein Frontend-Framework, mit dem man Websites gestalten kann. Es werden HTML- und CSS-Vorlagen bereitgestellt, um unterschiedlichste Websiteelemente darzustellen. Dazu gehören Formulare, Buttons, Tabellen, Navigation und ein Grid-System für Layouts. Darüber hinaus ist es in Bootstrap durch JavaScript-Module möglich, Interaktionen (z. B. eine Bilder-Slideshow, Tabs und Dialogboxen) in die Website einzubinden. Zudem bietet das Framework alle Voraussetzungen, um responsive Webdesigns zu gestalten, die dann auch auf Smartphones oder Tablets optimal dargestellt werden.

Was ist Bootstrap?

Bootstrap wurde 2010 von Twitter unter dem Namen „Twitter Bootstrap“ entwickelt. Das Ziel war, eine einheitliche Bibliothek für die Gestaltung von Weboberflächen zu schaffen. Das Problem lag zu diesem Zeitpunkt darin, dass für die Designentwicklung bei Twitter viele verschiedene Bibliotheken verwendet wurden. Das führte zu Inkonsistenzen und einem großen Wartungsaufwand. Bootstrap sollte eine gemeinsame Basis schaffen, mit der alle Mitarbeiter arbeiten konnten, um schnell und einfach Websites zu gestalten.

Das Bootstrap-Framework besteht im einfachsten Fall aus einer CSS-Datei (bootstrap.min.css) und einer JavaScript-Datei (bootstrap.min.js). Viele Designelemente können in Bootstrap mit reinen CSS-Regeln umgesetzt werden. Für andere Komponenten, z. B. Dialogboxen, wird JavaScript benötigt.

Bootstrap basiert auf der Stylesheetsprache Sass, die einer Obermenge von CSS entspricht. Jeder CSS-Befehl ist auch ein gültiger Sass-Befehl. Mit Sass lassen sich jedoch noch weitere Programmierparadigmen umsetzen, z. B. Variablen, Schachtelungen von Regeln sowie Funktionen und Operatoren, die mit CSS nicht möglich sind. Das alles dient dazu, Codewiederholungen im CSS-Code zu vermeiden. Weitere Informationen zu SASS gibt es online.

Im Normalfall müssen die Sass-Dateien von Bootstrap nicht angepasst werden, da man einfach mit der fertigen bootstrap.min.css-Datei arbeitet. Möchte man aber grundlegende Anpassungen im Design vornehmen und z. B. die Rasterbreite einstellen, ist es sinnvoll, direkt die Bootstrap-Sass-Dateien zu bearbeiten.

Bootstrap besteht aus einzelnen Komponenten, die in eine Website eingefügt werden können. Dabei handelt es sich um HTML-Codes, die mit CSS-Klassen und ggf. JavaScript-Code ausgestattet sind. Bootstrap 4 ist modular aufgebaut und wird in folgende vier Bereiche gegliedert:

  • Layout
  • Inhalt
  • Komponenten
  • Werkzeuge

Layout

Das Herzstück von Bootstrap 4 ist das Raster (Abb. 1). Standardmäßig verwendet Bootstrap ein 12-spaltiges Rasterlayout mit einer Breite von 1 140 Pixel (.container). Dabei wird die Rasterbreite entsprechend der Displaygröße via CSS-Breakpoints angepasst. Eine Alternative bietet die Klasse .container-fluid, die den Container immer über die komplette Displaygröße darstellt.

Abb. 1: Das Raster

Abb. 1 Das Raster

Ein Raster besteht aus Zeilen (.row) und Spalten (.col), wobei die Spalten mithilfe von CSS-Klassen passend für das jeweilige Endgerät angeordnet werden können. In Tabelle 1 sind die verschiedenen CSS-Präfix-Klassen für das Bootstrap-Raster dargestellt, wobei XX einem Wert zwischen 1 und 12 entspricht. Das HTML für ein einfaches zweispaltiges Layout mit Sidebar sieht wie folgt aus:

<div class="container">
  <div class="row">
    <div class="col-md-2">Sidebar</div>
    <div class="col-md-10">Inhalt</div>
  </div>
</div>

Normalerweise sind alle Rasterspalten in Bootstrap gleich groß. Durch Weglassen der Spaltenbreite (XX-Angabe) lassen sich jedoch Layouts mit unterschiedlich breiten Spalten darstellen:

<div class="container">
  <div class="row">
    <div class="col">Sidebar 1 (.col)</div>
    <div class="col-7">Inhalt (.col-3)</div>
    <div class="col">Sidebar 2 (.col)</div>
  </div>
</div>

Neben den in Tabelle 1 dargestellten responsiven Klassen existieren in Bootstrap noch weitere Regeln, um das Raster anzupassen. So ist es möglich, mithilfe der Klasse .w-100 einen Spaltenumbruch zu erzwingen. Ebenso ist eine Vermischung von Klassen möglich. Auf diese Weise kann z. B. eine Sidebar, die auf dem Desktop-PC nur 20 Prozent der Breite einnimmt, auf dem Smartphone die Hälfte des Displays abdecken.

Tabelle 1: Rasterklassen in Bootstrap

Tabelle 1: Rasterklassen in Bootstrap

Eine Neuerung in Bootstrap 4 ist die Möglichkeit der horizontalen und vertikalen Anordnung von Zeilen und Spalten innerhalb des Rasters. Dies wird in Listing 1 veranschaulicht.

<style type="text/css">
  /*nur fuer Beispiel, um Hoehe des Containers zu simulieren*/
  .test {
    height:10em;
  }
</style>
<div class="container">
  <div class="row">
    <div class="col">
      <h1>Vertikale Ausrichtung (Zeile)</h1>
    </div>
  </div>
  <div class="row align-items-center test">
    <div class="col">Sidebar 1 (.col)</div>
    <div class="col-7">Inhalt (.col-3)</div>
    <div class="col">Sidebar 2 (.col)</div>
  </div>

  <div class="row">
    <div class="col">
      <h1>Vertikale Ausrichtung (Spalte)</h1>
    </div>
  </div>
  <div class="row test">
    <div class="col align-self-start">.col (oben)</div>
    <div class="col align-self-center">.col (mittig)</div>
    <div class="col align-self-end">.col (unten)</div>
  </div>

  <div class="row">
    <div class="col">
      <h1>Horizontale Ausrichtung (Zeile)</h1>
    </div>
  </div>
  <div class="row justify-content-start">
    <div class="col-2">.col-2 (links)</div>
  </div>    
  <div class="row justify-content-center">
    <div class="col-2">.col-2 (mittig)</div>
  </div>
  <div class="row justify-content-end">
    <div class="col-2">.col-2 (rechts)</div>
  </div>
  <div class="row justify-content-around">
    <div class="col-2">.col-2 (ringsherum)</div>
    <div class="col-2">.col-2 (ringsherum)</div>
  </div>
  <div class="row justify-content-between">
    <div class="col-2">.col-2 (dazwischen)</div>
    <div class="col-2">.col-2 (dazwischen)</div>
  </div>
</div>

Alle Besonderheiten des Bootstrap-Rasters in diesem Artikel zu erläutern, würde den Rahmen sprengen. Jedoch stellen folgende Aufgaben beim Layoutentwurf kein Problem dar:

  • Spaltenzwischenräume entfernen (.no-gutters)
  • Spaltenreihenfolge anpassen (.order-XX, .order-first, .order-last)
  • Versatz zwischen Spalten einfügen (z. B. .offset-md-4)
  • Verschachtelungen von Rastern (neue .row einfügen)

Inhalte einfügen

Nun  kommen wir zu den Möglichkeiten der Anpassung des Websiteinhalts. Wir konzentrieren uns auf die interessanteren Dinge, z. B. Bilder mit Bildunterschriften sowie Tabellen und deren Umsetzung mit Bootstrap 4.

Von einer gut gemachten Website sind Bilder nicht mehr wegzudenken. Oftmals besteht das Problem darin, dass Bilder nur auf großen Displays wie denen von Desktop-PCs optimal angezeigt werden. Auf kleineren Bildschirmen erscheinen sie dann zu groß, zu klein oder werden verzerrt dargestellt. Abhilfe schafft die Klasse .img-fluid, denn dann wird das Bild responsive mit einer maximalen Breite von 100 Prozent angezeigt. Bildunterschriften sowie abgerundete Ecken sind ebenfalls recht einfach umsetzbar, wie in Listing 2 zu sehen.

<div class="container">
  <div class="row">
    <div class="col">
      <h1>Bild (nicht responsive)</h1>
    </div>
  </div>

  <div class="row">
    <div class="col-6">
      <img src="http://via.placeholder.com/900x400" />
    </div>
  </div>

  <div class="row">
    <div class="col">
      <h1>Bild (responsive)</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-6">
      <img class="img-fluid" src="http://via.placeholder.com/900x400" />
    </div>
  </div>   

    <div class="row">
    <div class="col">
      <h1>Bild mit Ecken</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-6">
      <img class="img-fluid rounded" src="http://via.placeholder.com/400x400&text=.rounded" />
    </div>
  </div>
</div>

Möchte man große Datenmengen übersichtlich darstellen, werden oft Tabellen eingesetzt. Die Umsetzung der benötigen Klassen durch das Bootstrap-Team passierte mit viel Herzblut. Eine Tabelle wird mit der Klasse .table initiiert. Danach kann man die Tabelle mittels der CSS-Klassen aus Tabelle 2 formatieren. Die einzelnen Tabellentypen lassen sich kombinieren.

Beschreibung CSS-Klasse Wo einfügen
Gestreifte Tabelle .table-striped <table>
Tabelle mit Rand .table-bordered <table>
Tabelle mit Zeilenmarkierung beim Überfahren mit der Maus .table-hover <table>
Kompakte Tabelle .table-sm <table>
Farbige Zellen oder Spalten oder komplette Tabellen .table-active
.table-primary
.table-secondary
.table-success
.table-danger
.table-warning
.table-info
.table-light
.table-dark
<tr>, <td> oder <table>

Tabelle 2: Tabellenklassen in Bootstrap

Bei der Nutzung von farbreinen Tabellenzeilen und -spalten sollte man immer daran denken, die Informationen auch barrierefrei für Menschen mit Behinderung zur Verfügung zu stellen, z. B. in Textform mittels .sr-only. Ein Beispiel findet sich in Listing 3.

<style type="text/css">
  /*nur fuer Beispiel, um Hoehe des Containers zu simulieren*/
  .row {
    margin-top:1em;
    margin-bottom:1em;
  }
</style>
<div class="container">
  <div class="row justify-content-between">
    <div class="col-5">
      <table class="table">
        <caption>.table</caption>
        <tr>
          <th>Spalte 1</th>
          <th>Spalte 2</th>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
        </tr>
        <tr>
          <td>c</td>
          <td>d</td>
        </tr>
      </table>
    </div>

    <div class="col-5">
      <table class="table table-striped">
        <caption>.table .table-striped</caption>
        <tr>
          <th>Spalte 1</th>
          <th>Spalte 2</th>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
        </tr>
        <tr>
          <td>c</td>
          <td>d</td>
        </tr>
      </table>
    </div>
  </div> 

  <div class="row justify-content-between">
    <div class="col-5">
      <table class="table table-hover">
        <caption>.table .table-hover</caption>
        <tr>
          <th>Spalte 1</th>
          <th>Spalte 2</th>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
        </tr>
        <tr>
          <td>c</td>
          <td>d</td>
        </tr>
      </table>
    </div>

    <div class="col-5">
      <table class="table table-sm">
        <caption>.table .table-sm</caption>
        <tr>
          <th>Spalte 1</th>
          <th>Spalte 2</th>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
        </tr>
        <tr>
          <td>c</td>
          <td>d</td>
        </tr>
      </table>
    </div>
  </div>   

  <div class="row justify-content-between">
    <div class="col-5">
      <table class="table table-bordered">
        <caption>.table .table-bordered</caption>
        <tr>
          <th>Spalte 1</th>
          <th>Spalte 2</th>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
        </tr>
        <tr>
          <td>c</td>
          <td>d</td>
        </tr>
      </table>
    </div>

    <div class="col-5">
      <table class="table table-sm table-bordered table-striped table-primary">
        <caption>.table .table-bordered .table-striped .table-primary</caption>
        <tr>
          <th>Spalte 1</th>
          <th>Spalte 2</th>
        </tr>
        <tr>
          <td>a</td>
          <td>b</td>
        </tr>
        <tr>
          <td>c</td>
          <td>d</td>
        </tr>
      </table>
    </div>
  </div> 

  <div class="row">
    <div class="col">
      <table class="table table-bordered">
        <tr class="table-active">
          <td>.table-active</td>
        </tr>
        <tr class="table-primary">
          <td>.table-primary</td>
        </tr> 
        <tr class="table-secondary">
          <td>.table-secondary</td>
        </tr>  
        <tr class="table-success">
          <td>.table-success</td>
        </tr>  
        <tr class="table-danger">
          <td>.table-danger</td>
        </tr>  
        <tr class="table-warning">
          <td>.table-warning</td>
        </tr>  
        <tr class="table-info">
          <td>.table-info</td>
        </tr>  
        <tr class="table-light">
          <td>.table-light</td>
        </tr>  
        <tr class="table-dark">
          <td>.table-dark</td>
        </tr>  
      </table>
    </div>
  </div>
</div>

Mit den gezeigten Grundlagen von Bootstrap lassen sich bereits oft verwendete Websiteelemente schnell umsetzen. Das richtige Potenzial wird aber erst mit den Komponenten ausgeschöpft, die Bootstrap mitbringt. Im nächsten Kapitel erfahren Sie mehr darüber.

Komponenten

Das Herzstück von Bootstrap sind die Komponenten, die bei der Strukturierung der Website helfen. Die folgenden fünf Komponenten, die ich nun erläutern werde, sollten auf keiner Website fehlen. Schaltflächen bzw. Buttons werden eingesetzt, um die Aufmerksamkeit des Besuchers zu lenken. Sei es, um auf eine neue Seite zu verweisen oder eine „Call to Action“ auszulösen, wie das Ausfüllen eines Formulars. Buttons heben sich durch ihre Form und vor allem Farbgebung deutlich vom restlichen Inhalt der Website ab. Bootstrap erlaubt durch die Vergabe der .btn-Klasse eine simple Darstellung von Inhalten wie Links als Buttons. Die Größe lässt sich dabei ebenso einfach einstellen wie die Ausrichtung (links/rechts), wie in Listing 4 zu sehen.

<div class="container">
  <div class="row justify-content-between">
    <div class="col-5">
      <h1>Farbige Buttons</h1>
      <p><a href="#" class="btn btn-primary" >.btn .btn-primary</a></p>
      <p><a href="#" class="btn btn-secondary">.btn .btn-secondary</a></p>
      <p><a href="#" class="btn btn-success">.btn .btn-success</a></p>
      <p><a href="#" class="btn btn-danger">.btn .btn-danger</a></p>
      <p><a href="#" class="btn btn-warning">.btn .btn-warning</a></p>
      <p><a href="#" class="btn btn-info">.btn .btn-info</a></p>
      <p><a href="#" class="btn btn-light">.btn .btn-light</a></p>
      <p><a href="#" class="btn btn-dark">.btn .btn-dark</a></p>
      <p><a href="#" class="btn btn-link">.btn .btn-link</a></p>
  </div>

    <div class="col-5">
      <h1>Buttons ausrichten</h1>

      <div class="row">
        <div class="col">
          <p><a href="#" class="btn btn-primary btn-block" >.btn-block</a></p>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <p><a href="#" class="btn btn-primary float-right">.float-right</a></p>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <p><a href="#" class="btn btn-primary btn-lg">.btn-lg</a></p> 
          <p><a href="#" class="btn btn-primary btn-sm">.btn-sm</a></p> 
          <p><a href="#" class="btn btn-outline-primary">.btn-outline-primary</a></p> 
          <p class="text-center"><a href="#" class="btn btn-primary">.text-center (p-Element)</a></p> 
        </div>
      </div>

    </div>
  </div>
</div>´

Breadcrumb

Neben den Buttons ist ein Breadcrumb, als Anspielung auf die Geschichte von Hänsel und Gretel, bestens geeignet, um dem Besucher verständlich darzustellen, wo genau er sich aktuell auf der Website befindet. Im Prinzip ist ein Breadcrumb nichts anderes als eine einfache HTML-Liste mit Links, die mit einem Trennzeichen dargestellt werden.

Mit der richtigen Auszeichnung können Breadcrumbs auch von Screenreadern gelesen werden, was zum einen der Barrierefreiheit zu Gute kommt und zum anderen von den Suchmaschinen ausgewertet werden kann (Abb. 2, Listing 5).

Abb. 2: Breadcrumb,

Abb. 2: Breadcrumb/Quelle: Bootstrapworld

<div class="container">
  <div class="row">
    <div class="col">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Startseite</a></li>
            <li class="breadcrumb-item"><a href="#">Ebene 1</a></li>
            <li class="breadcrumb-item active" aria-current="page">Aktuelle Seite</li>
          </ol>
        </nav>
    </div>
  </div>
</div>

Navbar

Kommen wir nun zu einem Bestandteil, der auf keiner Website fehlen darf: zur Navigation. Bootstrap stellt uns hier eine recht einfache Lösung zur Verfügung, um sogenannten Navbars umzusetzen. Navbars sind standardmäßig responsive und werden stets über die ganze verfügbare Breite angezeigt (fluid). Sie können einfach farblich angepasst werden. Wichtig zu wissen ist, dass Navbars im Normalfall nicht mit ausgedruckt werden. Dies kann mittels der Klasse .d-print jedoch umgegangen werden. Eine Navbar kann folgende Bestandteile enthalten:

  • Firmenname als Link, Überschrift oder Bild (.navbar-brand)
  • Die eigentliche Navigation (.navbar-nav)
  • Hamburgermenü für Smartphoneansicht (.navbar-toggler)
  • Formulare (.form-inline)
  • Text (.navbar-text)

Navbars werden normalerweise auf einer Website ganz oben angezeigt und verschwinden beim Scrollen. Durch das Setzen von .fixed-top oder .fixed-bottom kann die Navbar beim Scrollen oben oder unten am Bildschirmrand fixiert werden (Listing 6).

<div class="container">
  <div class="row">
    <div class="col">
      <h1>Standard-Navigation</h1>
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">Navigation</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Navigation einblenden">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Startseite <span class="sr-only">(aktuell)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Standardlink</a>
            </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Dropdown Menü
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="#">Link 1</a>
                  <a class="dropdown-item" href="#">Link 2</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="#">Link 3</a>
                </div>
              </li>
            </ul>
            <form class="form-inline">
              <input class="form-control mr-sm-2" type="search" placeholder="Suchbegriff" aria-label="Suche">
              <button class="btn btn-outline-success" type="submit">Suchen</button>
            </form>
          </div>
      </nav>
    </div>
  </div>

  <div class="row">
    <div class="col">
      <h1>Firmenverlinkung</h1>
      <nav class="navbar navbar-light bg-light">
        <a class="navbar-brand" href="#">Firma (Link)</a>
      </nav>
    </div>
  </div>

  <div class="row">
    <div class="col">
      <nav class="navbar navbar-light bg-light">
        <span class="navbar-brand mb-0 h1">Firma (Überschrift)</span>
      </nav>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <nav class="navbar navbar-light bg-light">
        <a class="navbar-brand" href="#">
          <img src="http://via.placeholder.com/120x30&text=Firma" /> (Bild)
        </a>
      </nav>
    </div>
  </div>

  <div class="row">
    <div class="col">
      <h1>Farbige Navigation</h1>
      <nav class="navbar navbar-dark bg-dark">
        <p class="navbar-text">.navbar-dark .bg-dark</p>
      </nav>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <nav class="navbar navbar-dark bg-primary">
        <p class="navbar-text">.navbar-dark .bg-primary</p>
      </nav>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <nav class="navbar navbar-light bg-danger">
        <p class="navbar-text">.navbar-light .bg-danger</p>
      </nav>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <nav class="navbar navbar-dark" style="background-color: #ff66cc;">
        <p class="navbar-text">.navbar-dark (background-color: #ff66cc)</p>
      </nav>
    </div>
  </div>
</div>

Jumbotron

Oftmals ist es aus Marketingzwecken nützlich, bestimmte Inhalte auf der Website hervorzuheben. Sehr leicht ist das mit dem Jumbotron-Element umsetzbar, das mit der .jumbotron Klasse initialisiert wird. Als Inhalte können z. B. Überschriften, größere Texte (.lead) oder Buttons verwendet werden (Listing 7).

<div class="container">
  <div class="row">
    <div class="col">
      <div class="jumbotron">
        <h1 class="display-4">Überschrift</h1>
        <p class="lead">Die Texte mit einer .lead-Klasse werden größer angezeigt.</p>
        <hr class="my-4">
        <p class="lead">
          <a class="btn btn-success btn-lg" href="#" role="button">Call-to-Action Button</a>
        </p>
      </div>
    </div>
  </div>
</div>

Hilfsklassen

Neben den vorgenannten Komponenten stellt Bootstrap verschiedene Hilfsklassen zur Verfügung, die immer wieder beim Bau einer Website nützlich sind. Mithilfe der .border-Klasse können Ränder um ein Element mit oder ohne Farbe angezeigt werden (Listing 8).

<style type="text/css">
  /*nur als Beispiel, um Hoehe des Containers zu simulieren*/
  .row {
    margin-top:1em;
  }
  .col span {
    display: inline-block;
    width:5em;
    height:5em;
    margin-right: 5em;
  }
</style>
<div class="container">
  <div class="row">
    <div class="col">
      <h1>Ränder</h1>
      <span class="border"></span>
      <span class="border-top"></span>
      <span class="border-right"></span>
      <span class="border-bottom"></span>
      <span class="border-top border-left"></span>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <h1>Farbige Ränder</h1>
      <span class="border border-primary"></span>
      <span class="border-top border-secondary"></span>
      <span class="border-right border-success"></span>
      <span class="border-bottom border-danger"></span>
      <span class="border-top border-left border-warning"></span>
    </div>
  </div>
</div>

Außerdem gibt es in Bootstrap-Klassen, um die Farbe von Elementen anzupassen. Egal ob es sich um Buttons, Navigationsleisten, Texte oder Umrandungen handelt (Listing 9).

<div class="container">
  <div class="row justify-content-between">
    <div class="col-5">
      <h1>Textfarbe</h1>
      <p class="text-primary">.text-primary</p>
      <p class="text-secondary">.text-secondary</p>
      <p class="text-success">.text-success</p>
      <p class="text-danger">.text-danger</p>
      <p class="text-warning">.text-warning</p>
      <p class="text-info">.text-info</p>
      <p class="text-light bg-dark">.text-light</p>
      <p class="text-dark">.text-dark</p>
      <p class="text-muted">.text-muted</p>
      <p class="text-white bg-dark">.text-white</p>
    </div>
    <div class="col-5">
      <h1>Hintergrundfarbe</h1>
      <div class="p-2 mb-2 bg-primary text-white">.bg-primary</div>
      <div class="p-2 mb-2 bg-secondary text-white">.bg-secondary</div>
      <div class="p-2 mb-2 bg-success text-white">.bg-success</div>
      <div class="p-2 mb-2 bg-danger text-white">.bg-danger</div>
      <div class="p-2 mb-2 bg-warning text-dark">.bg-warning</div>
      <div class="p-2 mb-2 bg-info text-white">.bg-info</div>
      <div class="p-2 mb-2 bg-light text-dark">.bg-light</div>
      <div class="p-2 mb-2 bg-dark text-white">.bg-dark</div>
      <div class="p-2 mb-2 bg-white text-dark">.bg-white</div>
    </div>
  </div>
</div>

Manchmal kann es sinnvoll sein, Elemente zu verbergen. Für Screenreader sind die Inhalte dennoch erfassbar, weil das display-Attribut nicht verändert wird. Stattdessen werden die Inhalte lediglich visuell versteckt. Das kann insbesondere für die Anzeige auf kleinen Displays wie bei Smartphones sinnvoll sein (Listing 10).

<div class="container">
  <div class="row">
    <div class="col">
      <div class="d-sm-none"> Smartphone klein <576px </div>
      <div class="d-none d-sm-block d-md-none d-lg-none d-xl-none"> Smartphone groß >= 576px </div>
      <div class="d-none d-md-block d-lg-none d-xl-none"> Tablet => 768px </div>
      <div class="d-none d-lg-block d-xl-none"> Desktop => 992px </div>
      <div class="d-none d-xl-block"> großer Desktop => 1200px </div>
    </div>
  </div>
</div>
Bootstrap 3 Bootstrap 4
IE8, IE9, iOS 6 Nur noch IE10+ und iOS7+
Allgemeines
Float für Layout verwendet Flexbox ist standardmäßig aktiviert
14px Schriftgröße 16px Schriftrgröße
Less als CSS-Präprozessor Sass als CSS-Präprozessor
Neue Raster Breakpoint bei 576px (sm)
Entfernt Ersatz
Panel, Thumbnail, Well Card
Glyphicons
Affix jQuery-Plug-in
Pager
.page-header
.dl-horizontals
.radio-inline, .checkbox-inline
.push-*, .pull-* .order
.navbar-form
.hidden-*, .visible-*
.pull-left, .pull-right
Neues
.float-{sm,md,lg,xl}-{left,right,none} -> Ausrichtung
text-{sm,md,lg,xl}-{left,center,right} -> Ausrichtung
.d-{sm,md,lg,xl}-none -> Element ausblenden
.d-{sm,md,lg,xl}-block -> Element anzeigen
Allgemeines
.img-responsive .im-fluid
.img-rounded .rounded
.img-circle .rounded-circle
.table-condensed .table-sm
.control-label .col-form-label
.input-lg .form-control.lg
.input-sm .form-control.sm
.checkbox, .radio .form-check
.form-control-static .form-control-plaintext
.btn-default .btn-secondary
col-xs-* .col-*
.col-{breakpoint}-{modifier}-{size} .{modifier}-{breakpoint}-{size}
.navbar-default .navbar-light
.label .badge
.center-block .mx-auto

Tabelle 3: Bootstrap 3 und Bootstrap 4 im Vergleich

Fazit

Nachdem wir nun Bootstrap 4 kennen gelernt haben, sehen Sie in Tabelle 3 eine Gegenüberstellung der Unterschiede und Gemeinsamkeiten von Bootstrap 3 und Bootstrap 4.

Nach der langen Entwicklungszeit von Bootstrap 4 kann sich das Ergebnis wirklich sehen lassen. Gab es in der Vorgängerversion mit Panels, Wells und Thumbnails noch drei verschiedene Komponenten, um Inhaltsboxen strukturiert darzustellen, wurde durch die Einführung der Card-Komponente eine flexible Lösung geschaffen, die die Coderedundanz verringert. Auch das standardmäßige Nutzen der Flexbox ermöglicht nun einfache Ausrichtungen von Elemente in horizontaler und vertikaler Richtung, während das in Bootstrap 3 nur über Umwege möglich war.

Insgesamt versuchte man, viele Klassennamen zu vereinheitlichen und somit eine Konsistenz herzustellen, worunter allerdings teilweise die Verständlichkeit des HTML-Codes leidet. Vielen dürfte auch das Fehlen der .hidden– und .visible-Klassen negativ auffallen. Diese Klassen wurden verwendet, um Elemente auf bestimmten Bildschirmgrößen ein- oder auszublenden. Das wird zwar nach wie vor von Bootstrap unterstützt, aber aus der einfachen Anweisung .visible-md (Bootstrap 3) für die Anzeige auf normalen Desktop-PCs wird in der aktuellen Bootstrap-Version .d-none d.md-block. Dennoch muss sich Bootstrap 4 nicht verstecken, sondern punktet mit vielen sinnvollen Verbesserungen und neuen Klassen, die das Aufsetzen eines responsiven Websitedesigns stark vereinfachen.

Weiterführende Literatur

Entwickler Magazin

Entwickler Magazin abonnierenDieser Artikel ist im Entwickler Magazin erschienen.

Natürlich können Sie das Entwickler Magazin über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist das Entwickler Magazin ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -