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:
<!-- Das neueste kompilierte und minimierte CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/
bootstrap/4.0.0/css/bootstrap.min.css">
<!-- Das neueste kompilierte und minimierte JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/
js/bootstrap.min.js"></script>
| Bootstrap 4 Final Dieses Buch wurde für die Version 4.1.0 überarbeitet, wie sie im April 2018 verfügbar war. Die Versionsangaben im Buch lauten dagegen 4.0.0. Wenn Sie Version 4.1.0 benutzen, ersetzen Sie alle Versionsangaben entsprechend. Benutzen Sie eine spätere Version, passen Sie die Angaben an. Während der Lebensdauer dieses Buchs wird es neue Versionen geben, sodass »4.0.0« hier als Platzhalter aufgefasst werden kann. |
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:
$ npm install bootstrap@latest --save
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 Standardei...