Bootstrap kurz & gut

Jörg Krause

• Verlag: O'Reilly
• Jahr: 2018
• eBook-ISBN: 9783960102328
• Auflage: 1
• Thema: Design
• Thema: Web Programming

Das CSS-Framework Bootstrap ist für viele Designer und Webentwickler inzwischen das Framework der Wahl, um attraktive Oberflächen – gerade auch für mobile Geräte – zu gestalten. Bootstrap bietet hierfür robuste Stildefinitionen für typische
Alltagsaufgaben und ein umfassendes Ökosystem mit zahlreichen nützlichen Vorlagen und Erweiterungen.
Bootstrap – kurz & gut beschreibt kompakt die Installation des Frameworks, geht auf das Rastersystem, Typografieaspekte und Formulare, die Ausrichtung von Elementen im Dokumentenfluss u.v.a.m. ein.
Abschließend werden alle Komponenten aus der Bootstrap-Bibliothek vorgestellt: von Aufklappmenüs, Navigationselementen und Listen bis hin zu aktiven Komponenten wie modalen Dialogen, Inhaltseinblendungen und interaktiven Schaltflächen.
Das Buch bietet:

• Installation und Grundlegendes zum Framework
• Alle Bootstrap-Komponenten im Überblick
• Zahlreiche Tricks und Praxistipps

Die Beispielcodes zum Buch sind auf GitHub abrufbar.

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...

Inhaltsverzeichnis

• Cover
• Titel
• Impressum
• Inhalt
• Vorwort
• 1 Einführung in Bootstrap
• 2 Struktur der Seite
• 3 Typografie
• 4 Formulare
• 5 Weitere Bausteine
• 6 Komponenten
• 7 Aktive Komponenten
• Fußnoten
• Index
• Über den Autor