Sie sind hier: Lexikon/Glossar
Logo der Firma www.IT-Visions.de
MENU

Erklärung des Begriffs: Twitter Bootstrap

Werbung
 Zur Stichwortliste unseres Lexikons

Was ist Twitter Bootstrap ?

Bootstrap ist ein von der Firma Twitter entwickeltes CSS-Framework. Es liefert zahlreiche CSS-Klassen, die die Handhabung von CSS vereinfachen, inbesondere die Entwicklung von Webseiten nach dem Prinzip des Responsive Web Design (RWD). Es umfasst Gestaltungsvorlagen für Formulare und Tabellen, die eine einheitliche Gestaltung über alle Browser hinweg ermöglicht. Außerdem bietet Twitter aktive Komponenten wie Menüs, Werkzeugleisten und Dialoge. Die Bootstrap-Komponenten erfordern auch JavaScript, wobei hier im Hintergrund jQuery zum Einsatz kommt.
Die Bootstrap-Klassen wurden nicht in CSS selbst geschrieben, sondern in Syntactically Awesome Style Sheets (SASS).

Die aktuelle Version ist Bootstrap 4.

Bootstrap 4 steht über die Website [http://getbootstrap.com/] ] sowie die Repositories Bower [https://bower.io/] und npm (Node Package Manager) [https://www.npmjs.com/ zur Verfügung.

Schnellüberblick

Web-Frontend Toolset
Open Source
Von Twitter-Entwicklern
CSS, optional auch JavaScript
Kleine CSS-Klassen, die zusammengeführt werden
Mobile First (ab v3.0)
Bootstrap.js hat Abhängigkeit von jQuery
http://getbootstrap.com/getting-started/
V3.0 ist radikaler Bruch mit 2.3.2

Was ist neu in Bootstrap 4?

Dieser Abschnitt gibt einen Überblick über die Änderungen gegenüber Bootstrap 3.

Globale Änderungen
Das Einheitensystem wurde nun von Pixel (px) auf rem (CSS) bzw. em (Media Queries) umgestellt. Der globale Font, der als Ausgangspunkt dient, wurde von 14 Pixel auf 16 Pixel erhöht. Dies ist vor allem eine Referenz an höher auflösende Displays mobiler Geräte.

Raster-System
Es gibt folgende Rasterebenen: xs, sm, md, lg und xl. Dies dient der Unterstützung extrem großer Displays (3000x2000 Pixel und mehr).
Tabellen
Tabellen verfügen über neue Optionen:
 .table-inverse invertiert die Tabelle farblich
 .thead-default und .thead-inverse formatieren den Kopfbereich
 .table-sm erstellt kleinere Tabellen
 Alle Kontextklassen haben den Präfix .table-
 .responsive-table kann direkt dem Table-Element zugewiesen werden, der Container wird nicht mehr benötigt
 .table-reflow unterstützt Reflow-Tabellen (pivotierte Tabellen)

Formulare
Statt der speziellen Klasse .form-horizontal kann nun .row benutzt werden. Alle .control-- und .input--Klassen wurden zu .form-control- vereinheitlicht. Damit entfallen auch die speziellen Klassen .has-feedback und .help-block.

Schaltflächen
Die Klassen .btn-default und .btn-info entfallen zugunsten von .btn-secondary. Neu ist .btn-xx-outline – eine umrahmte Schaltfläche. Die Klasse .btn-xs entfällt.

Klappmenüs
Statt <ul><li>-Strukturen lassen sich nun <div><a>-Blöcke direkt formatieren. Dazu dienen die Klassen .dropdown-item und .dropdown-menu. Die Klasse .dropdown-header lässt sich nun direkt auf <h1> usw. anwenden. Abständen werden mit </div class="dropdown-divider"> erstellt anstatt dem bisherigen Verfahren mit <li>-Tags.

Panele
Die Anzeigeformen Wells, Panels und Thumbnails entfallen und werden durch eine neue Komponenten mit dem Namen Card ersetzt.

Sonstiges
Fortschrittsbalken können nun mit dem HTML-Element <progress> erstellt werden. Zitate benötigen die Klasse .blockquote.

Beratung & Support

Schulungen

  Anfrage für eine individuelle Schulung zum Thema TWITTER BOOTSTRAP   Gesamter Schulungsthemenkatalog

Fachbücher

  Alle unsere aktuellen Fachbücher   E-Book-Abo für ab 99 Euro im Jahr