Bootstrap

kurz & gut

Jörg Krause

Jörg Krause

Lektorat: Ariane Hesse

Fachgutachter: Jørgen W. Lang, Jens Meiert

Korrektorat: Sibylle Feldmann, www.richtiger-text.de

Herstellung: Stefanie Weidner

Umschlaggestaltung: Michael Oréal, www.oreal.de

Satz: III-satz, www.drei-satz.de

Bibliografische Information Der Deutschen Nationalbibliothek

Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.d-nb.de abrufbar.

ISBN:

Print     978-3-96009-087-8

PDF      978-3-96010-231-1

ePub     978-3-96010-232-8

mobi     978-3-96010-233-5

Dieses Buch erscheint in Kooperation mit O’Reilly Media, Inc. unter dem Imprint »O’REILLY«. O’REILLY ist ein Markenzeichen und eine eingetragene Marke von O’Reilly Media, Inc. und wird mit Einwilligung des Eigentümers verwendet.

1. Auflage

Copyright © 2018 dpunkt.verlag GmbH

Wieblinger Weg 17

69123 Heidelberg

Die vorliegende Publikation ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne die schriftliche Zustimmung des Verlags urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder die Verwendung in elektronischen Systemen.

Es wird darauf hingewiesen, dass die im Buch verwendeten Soft- und Hardware-Bezeichnungen sowie Markennamen und Produktbezeichnungen der jeweiligen Firmen im Allgemeinen warenzeichen-, marken- oder patentrechtlichem Schutz unterliegen.

Die Informationen in diesem Buch wurden mit größter Sorgfalt erarbeitet. Dennoch können Fehler nicht vollständig ausgeschlossen werden. Verlag, Autoren und Übersetzer übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene Fehler und deren Folgen.

5 4 3 2 1 0

Inhalt

Vorwort

1Einführung in Bootstrap

Grundlegendes zu Bootstrap 4

Installation

Struktur der CSS-Dateien

Seitenaufbau

Browserunterstützung

ARIA

Optimierung

Hilfsklassen

Reboot

2Struktur der Seite

Einführung

Das Rastersystem

Das Flex-Raster

3Typografie

Überschriften

Text und Textelemente

Listen

Tabellen

Hilfsklassen

4Formulare

Struktur eines Formulars

Eingabeelemente

Schaltflächen

5Weitere Bausteine

Symbole

Responsive Bilder

Eingebettete Quellen

Farben und Hintergründe

Ausrichtung von Elementen im Dokumentenfluss

Inhalte anzeigen und verstecken

6Komponenten

Aufklappmenüs (dropdown)

Werkzeugleisten (toolbar)

Schaltfläche mit Menü (button group)

Navigation (nav, navbar)

Pfadnavigation (breadcrumb)

Seitenweises Blättern (pagination)

Kennzeichnungen (tags)

Jumbotron (jumbotron)

Seitenüberschriften (page header)

Meldungen (alert)

Fortschrittsbalken (progress)

Medien (media)

Allgemeine Listen (list group)

Karten (cards)

7Aktive Komponenten

Einrichtung und Aktivierung

Die Programmierschnittstelle

Übergänge (transition)

Modale Dialoge (modals)

Aufklappmenü (dropdown)

Scrollbar-Überwachung (scrollspy)

Umschaltbare Tabs (tab)

Tooltipps (tooltip)

Popover (popover)

Meldungen (alert)

Interaktive Schaltflächen (button)

Inhaltseinblendung (collapse)

Bilderkarussell (carousel)

Index

Über den Autor

Vorwort

Dieses Buch beschreibt kompakt und übersichtlich das CSS-Framework Bootstrap 4. Bootstrap entstand ca. 2010 ursprünglich bei Twitter und war von vornherein mit dem Gedanken »mobile first« – zuerst für mobile Geräte – entwickelt worden. Es hat sich seitdem zu einem der besten und bekanntesten Frameworks für die Gestaltung von Websites entwickelt. Begleitet von einer Vielzahl auf Bootstrap aufsetzenden Gestaltungsvorlagen – sogenannten Themes –, bietet es sichere und robuste Stildefinitionen für Alltagsaufgaben.

Schreibweisen

Skripte sind häufig recht umfangreich. Um sie optisch besser lesbar zu gestalten, habe ich oft zusätzliche Zeilenumbrüche eingebaut, die im Editor Ihrer Entwicklungsumgebung aber nichts zu suchen haben.

Generell wird Programmcode mit einer nicht proportionalen Codeschrift gesetzt.

Wenn Sie etwas auf der Kommandozeile oder in einem Dialogfenster eingeben müssen, ist dieser Teil der Anweisung fett gesetzt:

Das erste Zeichen ist der Prompt, der nicht mit eingegeben wird. Ich verwende im Buch den Linux-Prompt der Bash-Shell. Die Kommandos funktionieren ausnahmslos unverändert auch in Windows, nur steht dann C:> oder etwas Ähnliches am Anfang der Zeile.

Ausdrücke und Befehlszeilen sind häufig mit allen Arten von Zeichen gespickt, und in fast allen Fällen kommt es auf jedes Zeichen an. Oft werde ich die Verwendung bestimmter Zeichen in einem solchen Ausdruck genau erläutern. Wichtige Zeichen werden durch zusätzliche Zeilenumbrüche hervorgehoben.

Im folgenden Beispiel möchte ich etwa das :-Zeichen hervorheben und füge deshalb einen Zeilenumbruch nach der ersten öffnenden geschweiften Klammer hinzu, der nicht zwingend ist.

Beispiele

Sie finden das Beispielprojekt zu diesem Buch auf GitHub:

• https://github.com/joergkrause/bootstrap4-kurz-und-gut

Das Projekt nutzt Musterdateien, die pures HTML enthalten. Zur Nutzung ist es empfehlenswert, die Inhalte mit einem Browser abzurufen. Dazu muss im Stammordner ein Webserver gestartet werden.

Beispiele optimal nutzen

Gehen Sie folgendermaßen vor (für Anfänger ohne Vorkenntnisse):

1. Installieren Sie NodeJs (https://nodejs.org).
2. Installieren Sie einen Git-Client passend zum Betriebssystem.
3. Öffnen Sie jetzt eine Konsole (Windows) oder ein Terminal (Linux).
4. Klonen Sie das Git-Verzeichnis (siehe oben) in einen Ordner.
5. Navigieren Sie in diesem Verzeichnis in den neuen Ordner, in dem sich der Klon befindet.
6. Geben Sie npm install ein und warten Sie die Installation ab.
7. Geben Sie npm start ein. Der Webserver startet auf Port 3000.
8. Öffnen Sie einen Browser und navigieren Sie zu http://localhost:3000.
9. Folgen Sie den Anweisungen auf der Website, die nun erscheint.

KAPITEL 1

Einführung in Bootstrap

In diesem Kapitel finden Sie einige grundlegende Informationen zu Bootstrap 4 und zu seiner Installation.

Grundlegendes zu Bootstrap 4

Ein erster Überblick über die wichtigsten Eigenschaften von Bootstrap dient als Grundlage für alle folgenden Kapitel.

Das Einheitensystem

Das Einheitensystem nutzt die Einheit rem (CSS) bzw. em (Media Queries). Der globale Font, der als Ausgangspunkt dient, wurde von 14 auf 16 Pixel hochgesetzt. Diese Änderung wurde vor allem mit Blick auf die höher auflösenden Displays mobiler Geräte vorgenommen. Die Einheiten rem bzw. em nutzen die Breite des Buchstaben M als Basis der Berechnung und definieren ein relatives Größenverhältnis der Elemente, was gerade auch für responsives Webdesign wichtig ist. Es bietet Vorteile beim Entwickeln eines gefälligen Schriftbilds.

Das Rastersystem

Es gibt folgende Rastervarianten für die verschiedenen Displaygrößen vom Smartphone bis zum Displaybildschirm: Extra Small xs, Small sm, Medium md, Large lg und Extra Large xl. Das letzte, xl, dient der Unterstützung besonders hochauflösender Displays (3.000 × 2.000 Pixel und mehr).

Panels

Die in früheren Versionen benutzten Anzeigeformen Wells, Panels und Thumbnails sind entfallen und werden durch eine neue Komponente mit dem Namen Card ersetzt.

Installation

Bootstrap 4 kann über die eigene Website (http://getbootstrap.com) und npm (Node Package Manager) heruntergeladen werden. Darüber hinaus können Sie Bootstrap aus den SASS-Quellen auch selbst erstellen und dazu den Quellcode direkt von GitHub (https://github.com/twbs/bootstrap) beziehen. Bootstrap nutzt außerdem für die Rohdateien der Cascading Style Sheets die Sprache SASS, ein Präprozessor, der in CSS übersetzt. Die primäre Sprache in Bootstrap 4 zur Erstellung der Stile ist SASS.

CDN

Bootstrap ist via MaxCDN verfügbar. Ein CDN (Content Delivery Network) erlaubt einer Website, häufig benötigte öffentliche Dateien von weltweit verteilten Servern abzurufen. Wenn ein Nutzer aus den USA Ihre in Deutschland gehostete Website aufruft, wird das CDN dafür sorgen, dass die Bootstrap-Dateien von einem Server in den USA abgerufen werden. Dies entlastet Ihren Server, die Leitungen des Providers, das Internet insgesamt, und der Benutzer erlebt einen schnelleren Ladevorgang. Im Grunde gewinnen dabei alle. Wenn Sie im Intranet programmieren, sind CDNs dagegen eher ungünstig. Erwarten Sie nur lokale Nutzer in Deutschland, bringt ein CDN keinen Vorteil.

Die Bootstrap-Dateien werden bei der Nutzung des CDN folgendermaßen eingebunden:

Repository für lokale Installation

Um eine lokale Kopie zu erhalten, nutzen Sie npm (https://www.npmjs.com/). Wenn Sie in Ruby on Rails entwickeln, sollten Sie sich »Bootstrap for SASS« (https://github.com/twbs/bootstrap-rubygem) anschauen.

Mit npm installieren

Mithilfe von npm wird Bootstrap folgendermaßen installiert:

Wenn Sie npm benutzen, werden Sie möglicherweise NodeJs einsetzen. Binden Sie Bootstrap dann folgendermaßen ein:

require('bootstrap')

Dieser Befehl lädt Bootstraps jQuery-Plug-ins in das jQuery-Objekt. Das Modul bootstrap selbst exportiert nichts. Sie können die jQuery-Plug-ins individuell laden, indem Sie */js/.js*-Dateien im obersten Verzeichnis des Pakets laden.

Bootstraps package.json enthält einige zusätzliche Metadaten unter den folgenden Abschnitten:

• sass: Pfad zu Bootstraps SASS-Quelldateien
• style: Pfad zu Bootstraps nicht minimiertem CSS, das mit den Standardeinstellungen vorkompiliert wurde (ohne Anpassungsmöglichkeit)

Bootstrap kann in zwei Arten von Paketen heruntergeladen werden – in der kompilierten Version und zusätzlich in minimierten Varianten. Bootstrap benötigt jQuery als Grundlage der Komponenten.

Struktur der CSS-Dateien

Die vollständige Liste der Dateien einer Umgebung, die Bootstrap verwendet, sieht folgendermaßen aus:

Zu Bootstrap gibt es zwei abhängige Bibliotheken, die zur Nutzung aller Funktionen erforderlich sind:

• jQuery
• Popper

Davon wird freilich immer nur ein Teil genutzt. Die Darstellung gibt lediglich die Dateien wieder, die bei der Installation via npm bereitgestellt werden.

Es gibt die vier großen Bereiche Layout, Content, Components und Utilities in Bootstrap, die in verschiedenen Dateien definiert sind:

• bootstrap.css: Layout, Content, Components, Utlities
• bootstrap-grid.css: nur Grid des Teils Layout, nur Flex-Unterstützung in Utlities
• bootstrap-reboot.css: nur Reboot in Content (siehe Abschnitt Reboot am Ende dieses Kapitels)

Vorkompilierte Dateien sind die einfachste Methode, Bootstrap zu nutzen. Die min-Versionen sind zusätzlich minimiert (verdichtet). Die map-Dateien dienen dazu, die minimierten Versionen im Browser debuggen zu können – sie verbinden die vollständige Version mit der minimierten.

Wenn man die Tooltipps und Popover nutzen will, wird die Zusatzbibliothek Popper benötigt. Information zu Popper gibt unter https://popper.js.org/.

Fonts

Neben CSS und JavaScript enthält die Distribution keine Fonts, die die Icons liefern. Icon Fonts sind eine besonders kompakte und einfache Methode, um einfarbige Symbole in Websites einzubinden.

Empfehlenswert ist die Bibliothek Font-Awesome.

Font-Awesome gehört nicht zu Bootstrap 4. Es wird aber oft ergänzend für Symbole benutzt. Bis Bootstrap 3 wurden Icons (Glyphicons) mit ausgeliefert, wegen der großen Vielfalt an derartigen Schriftbibliotheken wurde die Wahl jetzt dem Entwickler überlassen. Font-Awesome ist eine der wichtigsten und umfassendsten derartigen Fonts. Näheres hierzu finden Sie in Kapitel 5 im Abschnitt Symbole.

Seitenaufbau

Ist alles vorbereitet, können Sie die erste Seite erstellen. Diese Seite sollte das Basislayout der gesamten Applikation liefern. Eine erste Version könnte folgendermaßen aussehen:

Die drei ersten Metatags müssen am Anfang des <head>-Blocks stehen. Die in früheren Versionen üblichen Kompatibilitätseinträge für ältere IE-Versionen gibt es nicht mehr. Browser älter als IE10 werden nicht unterstützt. Beim Betriebssystem ist die Unterstützung für iOS6 oder älter nicht mehr gegeben.

Beachten Sie, dass Bootstrap selbst nach jQuery geladen werden muss, wenn die JavaScript-Komponenten benutzt werden.

Browserunterstützung

Auch bei Bootstrap ist die Browserunterstützung ein Thema. Es wurde viel Aufwand getrieben, um möglichst viele Browser und Plattformen zu unterstützen. Aktuell sieht dies folgendermaßen aus:

Tabelle 1-1: Browserunterstützung

Chromium und Chrome für Linux, Firefox für Linux und Internet Explorer 7 sollten funktionieren, werden aber nicht offiziell unterstützt. Die breiteste Abdeckung von Browsern haben Sie derzeit auf macOS und auf Windows. Opera wird auf macOS und Windows unterstützt. Andere Browser nutzen meist eine der Render-Engines der oben gezeigten Stammversionen und verhalten sich dann entsprechend.

ARIA

Die Unterstützung von barrierefreien Anwendungen (Accessible Rich Internet Applications Suite = ARIA (http://www.w3.org/TR/wai-aria/)) ist eigentlich ein HTML-Thema. Einige Beispiele im Text sind darauf bereits ausgerichtet und tragen diese Attribute. Es folgt eine Übersicht darüber, wie das funktioniert. Bootstrap unterstützt ARIA implizit und umfassend.

HTML5 – das role-Attribut

Die role-Attribute werden in die relevanten HTML-Tags gesetzt. Sie verbessern die semantische Auszeichnung und helfen damit Screenreadern und anderen für den barrierefreien Zugang eingesetzten Geräten bei der korrekten Ausgabe:

• banner: das Element ist ein Banner
• complementary: das Element ergänzt einen Bereich, steht meist anstatt eines <aside>
• content: regulärer Inhalt
• info: Zusatzinformationen
• form: Formular
• main: Hauptbereich
• navigation: Navigationsbereich
• search: Suchformular

Die folgenden role-Attribute beschreiben die Struktur der Seite:

• article: Artikel (Text)
• columnheader: Spaltenkopf
• definition: Definition
• directory: Verzeichnis
• document: Dokument
• group: Gruppe
• heading: Kopfbereich
• img: Bilder
• list: Liste
• listitem: Listenelement
• math: mathematische Formel
• note: Notiz oder Ergänzung
• presentation: Präsentation, Anzeigeunterstützung
• region: Bereich
• row: Zeile
• rowheader: Kopf einer Zeile (links der Zeile)
• separator: Trennlinie in Menüs oder Listen
• toolbar: Werkzeugleiste

Ein Anwendungsbeispiel:

<hr role="separator" />

In Tags wie <nav> oder <aside> ist das role-Attribut redundant. Folgendes ist also nicht erforderlich:

Optimierung

Korrekt erstellte Bootstrap-Seiten können um einiges umfangreicher ausfallen als klassische HTML-Seiten. Die Stabilität der Seiten hat ihren Preis. Sie sollten daher sorgfältig abwägen, wie Elemente erstellt werden. Ein typisches Beispiel sind lange Listen mit vielen Optionen. Hier kommen neben den Listenelementen auch diverse Schaltflächen oder Menüs zum Einsatz. Vor allem bei serverseitig generiertem Code erscheint das unkritisch und verursacht wenig Aufwand. Hier ein Beispiel:

Diese Liste benötigt ca. 530 Zeichen, in UTF-16 ist das mehr als 1 KByte (bei UTF-8 werden nur die Zeichen außerhalb von ASCII mit mehreren Zeichen belegt). Wenn Sie 40 Elemente auf der Seite anzeigen, was aufgrund des Drop-downs optisch kein Problem ist, sind das 40 KByte HTML bei einer Nutzlast von grob geschätzt 2 KByte (40-mal Text pro Eintrag mit 50 Byte). Hier lohnt es sich, JavaScript einzusetzen.

Das folgende Skript definiert einmal eine Vorlage mit dem Code, und das JavaScript im folgenden Listing fügt ihn dann zur Laufzeit an jedes Listenelement an. Zur Steuerung werden HTML5-Attribute benutzt.

Nun wird mittels JavaScript der durch data-list-template adressierte Code ausgelesen und dann geklont an die durch data-list-target erreichbare Liste angehängt. Benutzt wird hier jQuery: