Herunterladen

Bootstrap (zurzeit v3.4.1) bietet einige einfache Wege, um schnell loszulegen. Jeder davon passt zu anderen Kenntnissen und Anwendungen. Lies weiter, um herauszufinden, was zu dir passt.

Aktuell v3.4.1.

BootstrapCDN

Unsere Freunde bei StackPath haben großzügigerweise CDN-Unterstützung für Bootstraps CSS und JavaScript zur Verfügung gestellt. Verwende einfach diese Links zum BootstrapCDN.

<!-- Das neueste kompilierte und minimierte CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optionales Theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Das neueste kompilierte und minimierte JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

Mit Bower installieren

Du kannst Bootstraps Less, CSS, JavaScript und Schriften auch mit Hilfe von Bower installieren und verwalten.

bower install bootstrap

Mit npm installieren

Du kannst Bootstrap auch mit Hilfe von npm installieren:

npm install bootstrap@3

require('bootstrap') lädt Bootstraps jQuery-Plugins in das jQuery-Objekt. Das Modul bootstrap selbst exportiert nichts. Du kannst Bootstraps jQuery-Plugins individuell laden, indem du die /js/*.js-Dateien im obersten Verzeichnis des Pakets lädst.

Bootstraps package.json enthält einige zusätzliche Metadaten unter den folgenden Schlüsseln:

• less - Pfad zu Bootstraps Haupt-Less-Quelldateien
• style - Pfad zu Bootstraps nicht-minimiertem CSS, das mit den Standardeinstellungen vorkompiliert wurde (ohne Anpassungsmöglichkeit)

Mit Composer installieren

Du kannst Bootstraps Less, CSS, JavaScript und Schriften auch mit Composer installieren und verwalten:

composer require twbs/bootstrap

Autoprefixer für Less/Sass benötigt

Bootstrap verwendet Autoprefixer, um mit den CSS Vendor Präfixen klarzukommen. Falls du Bootstrap von der Less/Sass-Quelle kompilieren möchtest und nicht unser Gruntfile verwendest, musst du Autoprefixer selbst in deinen Build-Vorgang integrieren. Falls du vorkompilierte Bootstrap-Dateien oder unser Gruntfile verwendest, musst du dir darüber keine Sorgen machen, da Autoprefixer dort bereits eingebunden ist.

Was zur Verfügung steht

Bootstrap kann in zwei Arten von Paketen heruntergeladen werden. Darin findest du jeweils die folgenden Verzeichnisse und Dateien, die nützliche Ressourcen logisch gruppieren und sowohl kompilierte als auch zusätzlich minimierte Varianten bereitstellen.

Bootstrap, vorkompiliert

Sobald du es heruntergeladen hast, öffne das komprimierte Verzeichnis, um die Struktur des (kompilierten) Bootstraps zu sehen. Du wirst etwas in dieser Art vorfinden:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

Dies ist die einfachste Form von Bootstrap: vorkompilierte Dateien, die du einfach in fast jedem Web-Projekt einbauen kannst. Wir stellen sowohl kompiliertes CSS und JS (bootstrap.*), als auch kompiliertes und dann zusätzlich minimiertes CSS und JS (bootstrap.min.*) zur Verfügung. CSS Source Maps (`bootstrap.*.map`) sind für die Verwendung mit bestimmten Browser-Entwicklertools verfügbar. Schriften von Glyphicons sind auch dabei, sowie das optionale Bootstrap-Theme.

Bootstrap-Quelltext

Wenn du den Bootstrap-Quelltext herunterlädst, erhältst du vorkompiliertes CSS, JavaScript und Schriftdateien, zusammen mit Less-, JavaScript- und Dokumentations-Quelldateien. Etwas genauer enthält es die folgende Dateistruktur und noch einiges mehr:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

Die Ordner less/, js/ und fonts/ enthalten jeweils den Quelltext für unser CSS, JS und unsere Icon-Schriftarten. Der Ordner dist/ enthält alles, was du auch in der Liste der vorkompilierten Dateien oben findest. Der Ordner docs/ enthält den Quelltext für unsere Dokumentation (auf Englisch), sowie Beispiele für die Verwendung von Bootstrap in examples/. Alle anderen enthaltenen Dateien haben mit Paketen, Lizenzen oder Entwicklungsumgebungen zu tun.

CSS und JavaScript kompilieren

Bootstrap verwendet Grunt mit praktischen Methoden zur Arbeit mit dem Framework als Build-System. Wir kompilieren damit unseren Code, lassen Tests laufen und mehr.

Grunt installieren

Um Grunt zu installieren, musst du zuerst node.js herunterladen und installieren (inklusive npm). npm steht für node packaged modules und dient dazu, benötigte Pakete für die Entwicklung über node.js zu verwalten.

1. grunt-cli mit npm install -g grunt-cli global installieren.
2. Zum Wurzelverzeichnis /bootstrap/ navigieren und npm install ausführen. npm sieht sich die Datei package.json an und installiert automatisch die dort aufgeführten lokal benötigten Pakete.

Wenn das abgeschlossen ist, kannst du die verschiedenen angebotenen Grunt-Befehle von der Kommandozeile aus ausführen.

Verfügbare Grunt-Befehle

grunt dist (CSS und JavaScript kompilieren und mehr nicht)

Befüllt das Verzeichnis /dist/ mit neu kompilierten und minimierten CSS- und JavaScript-Dateien. Als Bootstrap-Benutzer ist dies am häufigsten der Befehl, der dich interessiert.

grunt watch (Beobachten)

Beobachtet die Less-Quelldateien und rekompiliert sie automatisch als CSS wenn du eine Änderung speicherst.

grunt test (Tests ausführen)

Führt JSHint und die QUnit-Tests dank Karma in echten Browsern aus.

grunt docs (Assets für die Dokumentation generieren & testen)

Generiert und testet CSS-, JavaScript- und andere Dateien, die verwendet werden, wenn die Dokumentation über bundle exec jekyll serve lokal gestartet wird.

grunt (Absolut alles generieren und testen)

Kompiliert und minimiert CSS und JavaScript, generiert die Dokumentations-Webseite, prüft diese mit dem HTML5-Validator, regeneriert die Hilfsdateien für den Customizer und mehr. Erfordert Jekyll. Üblicherweise nur notwendig, wenn du an Bootstrap selbst arbeitest und mitentwickelst.

Fehlerbehebung

Falls du beim Installieren von benötigten Paketen oder beim Ausführen von Grunt-Befehlen auf Probleme stößt, lösche zunächst das Verzeichnis /node_modules/, das npm erstellt hat. Führe npm install dann einfach nochmal aus.

Basis-Vorlage

Fang mit dieser grundlegenden HTML-Vorlage an oder bastel mit diesen Beispielen. Wir hoffen darauf, dass du unsere Vorlagen und Beispiele so anpasst, dass sie genau zu dir passen.

Kopiere das HTML unten, um mit einem minimalen Bootstrap-Dokument loszulegen.

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Die 3 Meta-Tags oben *müssen* zuerst im head stehen; jeglicher sonstiger head-Inhalt muss *nach* diesen Tags kommen -->
    <title>Bootstrap-Basis-Vorlage</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- Unterstützung für Media Queries und HTML5-Elemente in IE8 über HTML5 shim und Respond.js -->
    <!-- ACHTUNG: Respond.js funktioniert nicht, wenn du die Seite über file:// aufrufst -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (wird für Bootstrap JavaScript-Plugins benötigt) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"  integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Binde alle kompilierten Plugins zusammen ein (wie hier unten) oder such dir einzelne Dateien nach Bedarf aus -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

Beispiele

Erweitere die Basis-Vorlage oben mit Bootstraps zahlreichen Komponenten. Wir ermutigen dich dazu, Bootstrap anzupassen, so dass es bestens zu deinem jeweiligen Projekt passt.

Hol dir den Quellcode von allen Beispielen, die du unten siehst, indem du das Bootstrap-Repository herunterlädst. Die Beispiele sind im Ordner docs/examples/.

Framework-Verwendung

Basis-Vorlage

Nichts als Grundlagen: kompiliertes CSS und JavaScript mit einem Container.

Bootstrap-Theme

Lade das optionale Bootstrap-Theme für erweiterte visuelle Effekte.

Raster

Mehrere Beispiele von Raster-Layouts mit allen vier Raster-Gliedern, Verschachtelung und mehr.

Jumbotron

Das Jumbotron mit einer Navbar und einigen einfachen Raster-Spalten.

Schmales Jumbotron

Eine angepasstere Seite mit einem schmaleren Container und Jumbotron.

Navbars in Aktion

Navbar

Super-einfache Vorlage mit einer Navbar und etwas Zusatz-Inhalt.

Oben statische Navbar

Super-einfache Vorlage mit einer oben statischen Navbar und etwas Zusatz-Inhalt.

Fixierte Navbar

Super-einfache Vorlage mit einer oben fixierten Navbar und etwas Zusatz-Inhalt.

Eigene Komponenten

Cover

Eine einseitige Vorlage für die Erstellung von einfachen und schönen Startseiten.

Karussell

Navbar und Karussell mit Anpassungen und neuen Komponenten.

Blog

Einfaches Zwei-Spalten-Blog-Layout mit eigener Navigation, Kopf und Schrift.

Dashboard

Einfache Struktur für ein Admin-Dashboard mit fixierter Seitenleiste und Navbar.

Anmelde-Seite

Eigenes Formular-Layout und Design für ein einfaches Anmelde-Formular.

Bündige Navbar

Eigene Navbar mit gleichmäßigen Links. Achtung! Verträgt sich nicht gut mit Safari.

Fixierter Footer

Einfache Seite mit fixiertem Footer unten im Anzeigefenster.

Fixierter Footer mit Navbar

Einfache Seite mit fixiertem Footer unten und Navbar oben im Anzeigefenster.

Experimente

Nicht-responsives Bootstrap

Deaktiviere die Responsivität von Bootstrap wie hier beschrieben.

Off-canvas

Entwerfe eine Navigation, die sich außerhalb der sichtbaren Seite befindet.

Tools

Bootlint

Bootlint ist das offizielle Tool zum Linten von Bootstrap-HTML. Es sucht automatisch nach einigen häufigen HTML-Fehlern in Webseiten, die Bootstrap einigermaßen "pur" verwenden. Die Komponenten/Widgets in Bootstraps Original erfordern, dass ihr Markup sich im DOM an bestimmte Strukturen hält. Bootlint überprüft, dass Bootstrap-Komponenten in der Seite korrekt strukturiertes HTML haben. Füge Bootlint zu deinen Web-Entwicklungswerkzeugen hinzu, wenn du verhindern möchtest, dass häufige Fehler die Entwicklung deines Projekts verlangsamen.

Community

Bleib immer auf dem Laufenden, was die Entwicklung von Bootstrap angeht und verbinde dich über diese hilfreichen Ressourcen mit der Community.

• Lies und abonniere Das Offizielle Bootstrap Blog.
• Chatte mit anderen Bootstrappern über IRC auf dem irc.freenode.net-Server, im Kanal ##twitter-bootstrap.
• Hilfe bei der Umsetzung deiner Projekte findest du z.B. auf Stack Overflow (markiert mit twitter-bootstrap-3).
• Entwickler sollten das Stichwort bootstrap bei Paketen verwenden, die die Funktionen von Bootstrap anpassen oder erweitern, wenn die Pakete über npm oder ähnliche Mechanismen verbreitet werden, um bestmöglich gefunden werden zu können.
• Lass dich davon inspirieren, was andere Leute mit Bootstrap entwerfen, in der Bootstrap Expo.

Du kannst außerdem @getbootstrap auf Twitter für die neuesten Gerüchte und großartige Musikvideos folgen.

Responsivität deaktivieren

Bootstrap passt deine Seiten automatisch verschiedenen Bildschirmgrößen an. Hier erfährst du, wie du diese Funktion deaktivieren kannst, so dass deine Seite wie dieses nicht-responsive Beispiel funktioniert.

Schritte zur Deaktivierung der Responsivität

1. Entferne das Viewport-<meta>-Tag, das in der CSS-Doku erläutert wird
2. Überschreibe die Breite (width) beim .container für jeden Umbruchpunkt des Rasters, z.B. mit width: 970px !important;. Diesen Schnipsel musst du unbedingt nach Bootstraps CSS einfügen. Du kannst optional statt !important verschiedene Media-Queries oder komplizierte Selektoren verwenden.
3. Falls du Navbars verwendest, musst du alle Funktionen zum Verbergen und Ausklappen der Navbar entfernen.
4. Für Rasterlayouts solltest du zusätzlich zu oder statt den mittleren/großen die .col-xs-*-Klassen verwenden. Keine Sorge, das extra-kleine Raster skaliert sich auf alle Bildschirmgrößen.

Du brauchst für IE8 nach wie vor Respond.js (da unsere Media-Queries weiterhin vorhanden sind und umgesetzt werden müssen). Durch all diese Schritte werden die Aspekte der "mobilen Seite" von Bootstrap deaktiviert.

Bootstrap-Vorlage mit deaktivierter Responsivität

Wir haben diese Schritte auf ein Beispiel angewandt. Lies dessen Quelltext, um die genauen Änderungen zu verstehen.

Nicht-responsives Beispiel anzeigen

Browser- und Geräte-Support

Bootstrap ist so gebaut, dass es mit den neuesten Desktop- und mobilen Browsern funktioniert. Das bedeutet, dass ältere Browser unter Umständen anders gestaltete Komponenten anzeigen, die aber trotzdem voll funktionsfähig sind.

Unterstützte Browser

Explizit unterstützen wir die neuesten Versionen der folgenden Browser und Plattformen.

Andere Browser, die die neueste Version von WebKit, Blink oder Gecko verwenden (entweder direkt oder über die Web View API der Plattform) werden nicht explizit unterstützt. Bootstrap sollte in den meisten Fällen aber dennoch auch in diesen Browsern gut aussehen und funktionieren. Genauere Informationen gibt es unten.

Mobile Geräte

Ganz allgemein unterstützt Bootstrap die neuesten Versionen der Standardbrowser auf den bekanntesten Plattformen. Beachte aber, dass Proxy-Browser (wie Opera Mini, Opera Mobile Turbo, UC Browser Mini, Amazon Silk) nicht unterstützt werden.

Desktop-Browser

Genauso werden die neuesten Versionen der meisten Desktop-Browser unterstützt.

Auf Windows unterstützen wir Internet Explorer 8-11.

Bei Firefox unterstützen wir zusätzlich zum normalen Stable Release auch die neueste Extended Support Release (ESR)-Version.

Inoffiziell sollte Bootstrap in Chromium und Chrome für Linux, Firefox für Linux und Internet Explorer 7 in Ordnung aussehen und funktionieren, aber wir unterstützen diese Browser nicht offiziell.

Auf unserer Pinnwand für Browser-Bugs findest du einige der Browser-Bugs, mit denen Bootstrap zu kämpfen hat.

Internet Explorer 8 und 9

Internet Explorer 8 und 9 werden auch unterstützt, aber denk bitte daran, dass einige CSS3-Eigenschaften und HTML5-Elemente in diesen Browsern nicht vollständig unterstützt werden. Außerdem benötigt Internet Explorer 8 Respond.js, um Media-Queries zu verarbeiten.

Besuche Can I use... für Details zum Browser-Support für CSS3- und HTML5-Funktionen.

Internet Explorer 8 und Respond.js

Pass auf die folgenden Tücken auf, wenn du Respond.js in deinen Entwicklungs- und Produktions-Umgebungen für Internet Explorer 8 verwendest.

Respond.js und domainübergreifendes CSS

Die Verwendung von Respond.js mit CSS auf anderen (Sub-)Domains (z.B. einem CDN) erfordert zusätzliche Konfiguration. Lies die Respond.js-Doku für Details dazu.

Respond.js und file://

Wegen Browser-Sicherheitsregeln funktioniert Respond.js nicht mit Seiten, die über das Protokoll file:// aufgerufen werden (z.B. wenn du eine lokale HTML-Datei öffnest). Um responsive Funktionen im IE8 zu testen, zeig deine Seiten über HTTP(S) an. Lies die Respond.js-Doku für Details dazu.

Respond.js und @import

Respond.js funktioniert nicht mit CSS, dass über @import eingebunden wird. Drupal-Konfigurationen sind insbesondere dafür bekannt, @import zu verwenden. Lies die Respond.js-Doku für Details dazu.

Internet Explorer 8 und box-sizing

IE8 bietet keine vollständige Untestützung für box-sizing: border-box; wenn es mit min-width, max-width, min-height oder max-height kombiniert wird. Seit v3.0.1 verwenden wir daher keine max-width bei .containern mehr.

Internet Explorer 8 und @font-face

IE8 hat einige Probleme mit der Kombination aus @font-face und :before. Bootstrap verwendet diese Kombination für die Glyphicons. Falls eine Seite im Cache (Zwischenspeicher des Browsers) gespeichert und danach geladen wird, ohne dass sich der Mauszeiger über der Seite selbst befindet (z.B. durch Drücken der Neu laden-Taste oder wenn etwas in einem iframe geladen wird), wird das Layout der Seite erzeugt, bevor die Schriftart geladen wird. Wird der Mauszeiger dann über der Seite positioniert, werden zumindest einige Icons nachträglich geladen und die restlichen können ebenfalls geladen werden, indem der Mauszeiger genau über ihnen platziert wird. Siehe #13863 für Details.

IE Compatibility View

Bootstrap wird in den alten Internet Explorer Compatibility Views nicht unterstützt. Um sicherzugehen, dass du den neuesten Anzeigemodus für IE verwendest, denk darüber nach, das passende <meta>-Tag auf deinen Seiten anzugeben:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Sieh nach, welchen Dokumentenmodus dein IE verwendet, indem du die Entwicklerhilfen öffnest: drücke F12 und sieh dann nach dem "Dokumentenmodus".

Dieses Tag ist überall in Bootstraps Dokumentation und Beispielen eingebunden, damit die bestmögliche Anzeige in jeder unterstützten Version von Internet Explorer erreicht wird.

Sieh dir diese StackOverflow-Frage für mehr Informationen an.

Internet Explorer 10 auf Windows 8 und Windows Phone 8

Internet Explorer 10 unterscheidet nicht zwischen Gerätebreite und Breite der tatsächlichen Anzeige und wendet Media-Queries aus Bootstraps CSS daher nicht korrekt an. Normalerweise würdest du einfach diesen CSS-Block einfügen, um das zu beheben:

@-ms-viewport       { width: device-width; }

Leider funktioniert das nicht, da auf Windows Phone 8-Geräten dann eine eher Desktop-mäßige Ansicht statt der schmalen "Smartphone"-Ansicht generiert wird. Um das zu umgehen musst du das folgende CSS und JavaScript verwenden, bis Microsoft dieses Problem behebt.

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2022 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

Für mehr Informationen und Hilfe bei der Umsetzung, lies Windows Phone 8 and Device-Width.

Hinweis: wir verwenden diese Technik in der Bootstraps Dokumentation und Vorlagen als Beispiel.

Safari-Prozent-Rundung

Die Rendering-Engine in Versionen von Safari vor v7.1 für OS X und Safari für iOS v8.0 hat Probleme mit der Anzahl der Dezimalstellen in unseren .col-*-1-Rasterklassen. Falls du also 12 einzelne Rasterspalten hättest, würdest du bemerken, dass diese weniger breit als andere Spaltenreihen erscheinen. Außer dem Updaten von Safari/iOS hast du einige Workaround-Optionen:

• Füge .pull-right zur letzten Spalte hinzu, um diese hart rechts auszurichten
• Verändere deine Prozentwerte manuell, um die Abrundungen in Safari perfekt auszubalancieren (schwieriger als die erste Option)

Modals, Navbars und virtuelle Tastaturen

Overflow und Scrolling

Unterstützung für overflow: hidden beim <body> ist eher limitiert auf iOS und Android. Aufgrund dessen wird der <body> anfangen zu scrollen, wenn du über den Anfang oder das Ende eines Modals in einem Browser auf diesen Geräten hinausscrollst. Siehe dazu auch Chrome Bug #175502 (behoben in Chrome v40) und WebKit Bug #153852.

Textfelder und Scrollen auf iOS

Mit Stand von iOS 9.3 wird der Seiteninhalt unter einem Modal gescrollt, wenn der erste Touch einer Scrollgeste innerhalb der Grenzen eines <input>s mit Text oder einer <textarea> ist. Normalerweise soll in diesem Fall nur der Inhalt des Modals selbst gescrollt werden. Siehe dazu auch WebKit Bug #153856.

Virtuelle Tastaturen

Wenn du Eingabefelder in einem Modal oder einer fixierten Navbar verwendest, solltest du beachten, dass iOS einen Anzeigefehler hat, wegen dem die Position von fixierten Elementen nicht aktualisiert wird, wenn sich die virtuelle Tastatur öffnet. Dies kannst du z.B. umgehen, indem du deine Elemente zu position: absolute änderst oder einen Timer auslöst, wenn ein Feld fokussiert wird, um die Position manuell zu korrigieren. Dies wird nicht von Bootstrap geregelt, sondern du musst selbst entscheiden, welche Lösung die beste für deine Anwendung ist.

Navbar-Dropdown-Menüs

Das .dropdown-backdrop-Element wird auf iOS im Nav nicht verwendet, da z-indexing zu komplex ist. Um Dropdowns in Navbars zu schließen, musst du daher direkt auf das Dropdown-Element (oder ein anderes Element, das ein click-Ereignis in iOS auslöst) klicken.

Browser-Zooming

Zoomen auf Seiten kann in manchen Komponenten Anzeigefehler hervorbringen und das in Bootstrap genau so wie im restlichen Web. Abhängig vom Problem können wir es vielleicht beheben (suche zunächst und öffne dann ggf. einen Fehlerbericht auf GitHub). Im Zweifelsfall ignorieren wir diese Fehler aber häufig, weil sie oft keine einfache Lösung haben, sondern nur mit umständlichen Workarounds zu beheben sind.

:hover/:focus auf mobilen Geräten

Obwohl echtes "Hovering" auf den meisten Touchscreens nicht möglich ist, simulieren die meisten mobilen Browser Hovering-Support und machen :hover "klebrig". Anders gesagt, :hover-Stile werden angewendet, nachdem ein Element angetippt wird und erst wieder entfernt, nachdem der Nutzer auf ein anderes Element tippt. Das kann dazu führen, dass Bootstraps :hover-Status in solchen Browsern unerwünschterweise "steckenbleibt". Einige mobile Browser behandeln :focus auf ähnliche Weise. Es gibt zurzeit keinen einfachen Workaround für diese Probleme, abgesehen vom gänzlichen Entfernen dieser Stile.

Drucken

Sogar in eigenen modernen Browsern kann es Probleme beim Drucken geben.

Insbesondere verwendet Chrome (ab v32 und unabhängig von Randeinstellungen) eine Anzeigefensterbreite, die weit unter der tatsächlichen Größe des Papiers liegt, wenn es beim Drucken darum geht, die Media-Queries zu aufzuschlüsseln. Dies kann dazu führen, dass beim Druck unerwartet Bootstraps extra-kleines Raster aktiviert wird. Siehe #12078 und Chrome Bug #273306 für mehr Details. Vorschläge für den Umgang mit diesem Problem:

• Lass dich auf das XS-Raster ein und stelle sicher, dass deine Seite darauf in Ordnung aussieht.
• Verändere die Werte der @screen-*-Less-Variablen, damit dein Druckerpapier größer als extra-klein eingeschätzt wird.
• Füge eigene Media-Queries hinzu, die die Umbruchpunkte des Rasters nur für den Druck verändern.

Außerdem veranlassen .container mit fester Breite Safari (Stand: v8.0) dazu, eine ungewöhnlich kleine Schriftgröße beim Drucken zu verwenden. Siehe #14868 und WebKit Bug #138192 für mehr Details. Ein potentieller Workaround hierfür ist, das folgende CSS hinzuzufügen:

@media print {
  .container {
    width: auto;
  }
}

Android Stock Browser

Statt Chrome zu verwenden, kommt bis Android 4.1 (und anscheinend auch bei einigen neueren Versionen) die sogenannte Internet-App als Standard-Browser auf Android-Geräten. Leider ist dieser Browser von Fehlern und Unstimmigkeiten in Bezug auf CSS allgemein behaftet.

Auswahlmenüs

Der Android Stock Browser wird bei <select>-Elementen die Symbole an der Seite nicht richtig anzeigen, wenn ein border-radius und/oder border vorhanden ist. (Siehe diese Frage auf StackOverflow für Details.) Verwende den Code-Schnipsel unten, um diese CSS-Eigenschaften im Android Stock Browser zu entfernen und das <select>-Element ohne Stile darzustellen. Der Code analysiert den User Agent, damit Chrome, Safari und Mozilla-Browser nicht beeinträchtigt werden.

<script>
&(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Willst du ein Beispiel sehen? Sieh dir diese Demonstration in einem JS Bin an.

Validatoren

Um das bestmögliche Ergebnis in alten und fehlerbehafteten Browsern zu bieten, verwendet Bootstrap an mehreren Orten CSS-Browser-Hacks, um in bestimmten Browser-Versionen besonderes CSS anzuwenden und so Bugs in den Browsern selbst zu umgehen. Diese Hacks führen verständlicherweise dazu, dass CSS-Validatoren sich darüber beschweren, dass sie ungültig sind. An einigen Stellen verwenden wir außerdem ganz neue CSS-Funktionen, die noch nicht vollständig standardisiert wurden. Dies geschieht ausschließlich zur progressiven Verbesserung.

Diese Warnungen bei der Validierung spielen in der Praxis keine Rolle, da der Teil unseres CSS ohne Hacks vollständig validiert werden kann und der Teil mit Hacks den anderen Teil in keiner Weise beeinträchtigt. Wir ignorieren diese Warnungen daher mit Absicht.

Auch unsere HTML-Dokumentation hat einige triviale HTML-Validierungswarnungen ohne Auswirkung, da wir einen bestimmten Firefox-Bug umgehen.

Drittanbieter-Support

Während wir nicht offiziell Unterstützung für irgendwelche Plugins oder Add-ons von Dritten bieten, findest du hier einige hilfreiche Tipps, um potentielle Probleme in deinen Projekten zu vermeiden.

Box-sizing

Einige Drittanbieter-Software, inklusive Google Maps und Google Custom Search Engine, sind nicht mit Bootstrap kompatibel, da wir * { box-sizing: border-box; } verwenden, eine Regel, die dafür sorgt, dass padding sich nicht auf die schlussendlich generierte Breite eines ELements auswirkt. Lerne mehr über das Box-Model und box-sizing bei CSS Tricks.

Abhängig vom Zusammenhang musst du diese Regel nach Bedarf überschreiben (Option 1) oder box-sizing für einen gesamten Bereich zurücksetzen (Option 2).

/* Box-sizing zurücksetzen
 *
 * Individuelle Elemente oder ganze Bereiche zurücksetzen, damit Konflikte wegen
 * Bootstraps globalem Box-Model vermieden werden. 2 Optionen, individuelle Überschreibungen
 * und Zurücksetzungen von Bereichen, sind als pures CSS und unkompiliertes Less verfügbar.
 */

/* Option 1A: Das Box-Model eines einzelnen Elements über CSS zurücksetzen */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Das Box-Model eines einzelnen Element über ein Bootstrap-Less-Mixin zurücksetzen */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Eine gesamte Region über CSS zurücksetzen */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Eine gesamte Region über ein eigenes Less-Mixin zurücksetzen */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Barrierefreiheit

Bootstrap folgt üblichen Web-Standards und kann—mit minimaler zusätzlicher Anstrengung—dazu verwendet werden, Seiten so zu gestalten, dass sie barrierefrei zugänglich für Personen sind, die AT verwenden.

Navigation überspringen

Falls deine Navigation viele Links enthält und im DOM vor dem Hauptinhalt kommt, kannst du einen Zum Hauptinhalt springen-Link vor der Navigation einfügen (eine einfache Erklärung findest du in diesem A11Y Project-Artikel über Skip-Navigation-Links). Die Klasse .sr-only wird den Link zum Überspringen verbergen und die Klasse .sr-only-focusable stellt sicher, dass der Link sichtbar wird, sobald der Fokus darauf liegt (für sehende Tastatur-Nutzer).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Zum Hauptinhalt springen</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- Der Hauptinhalt der Seite. -->
  </div>
</body>

Verschachtelte Überschriften

Wenn du verschiedene Überschriften (<h1> - <h6>) nacheinander und nebeneinander anordnest, sollte die Hauptüberschrift deines Dokuments eine <h1> sein. Nachfolgende Überschriften sollten dann logisch aus <h2> - <h6> bestehen, damit Screenreader ein Inhaltsverzeichnis für deine Seiten konstruieren können.

Lerne mehr darüber bei HTML CodeSniffer und Penn State's AccessAbility.

Farbkontrast

Einige der Farbkombinationen, die zurzeit in Bootstrap verfügbar sind (wie die verschiedenen Klassen für gestaltete Buttons, einige der Code-Highlighting-Farben, die für einfache Code-Blöcke verwendet werden, die Hilfsklasse .bg-primary für Kontext-Hintergründe, und die Standard-Linkfarbe auf einem weißen Hintergrund) haben ein niedriges Kontrastverhältnis (unter dem empfohlenen Verhältnis von 4.5:1). Dies kann Probleme für Nutzer verursachen, die eingeschränkte Sehkraft haben oder farbenblind sind. Diese Standardfarben müssen evtl. angepasst werden, um ihren Kontrast und ihre Lesbarkeit zu erhöhen.

Zusätzliche Ressourcen

• "HTML Codesniffer"-Bookmarklet, um Probleme mit Barrierefreiheit zu identifizieren
• Barrierefreiheit-Erweiterung für Chromes Entwickler-Tools
• Colour Contrast Analyser
• The A11Y Project
• MDN Barrierefreiheit-Dokumentation

Lizenz-FAQs

Bootstrap wird unter der MIT-Lizenz freigegeben und ist Copyright 2022 Twitter. Kurz zusammengefasst, lässt sich dies mit den folgenden Bedingungen beschreiben.

Du musst:

• Die Lizenz und Copyright-Informationen, die in Bootstraps CSS- und JavaScript-Dateien enthalten sind, beibehalten, wenn du sie in deinen Werken verwendest

Du darfst:

• Bootstrap frei und gratis herunterladen und verwenden, und zwar ganz oder in Teilen, für persönliche, private, interne Unternehmens- und kommerzielle Zwecke
• Bootstrap in Paketen und Distributionen verwenden, die du erstellst
• Den Quelltext verändern
• Eine Unterlizenz zur Bearbeitung und Verbreitung von Bootstrap an Dritte vergeben, die in dieser Lizenz nicht erwähnt werden

Du darfst auf keinen Fall:

• Die Autoren oder Lizenzgeber für Schäden haften lassen bzw. verantwortlich machen, da Bootstrap ohne Gewähr zur Verfügung gestellt wird
• Die Ersteller und Copyright-Eigentümer von Bootstrap haftbar machen
• Einen Teil von Bootstrap ohne vernünftige Attribution weiterverbreiten
• Markenzeichen im Besitz von Twitter in einer Weise nutzen, die aussagen oder implizieren könnte, dass Twitter deine Distribution befürwortet
• Markenzeichen im Besitz von Twitter in einer Weise nutzen, die aussagen oder implizieren könnte, dass du diese Twitter-Software erstellt hast

Du musst nicht unbedingt:

• Die Quelle von Bootstrap selbst, oder von irgendwelchen Modifizierungen, die du evtl. vorgenommen hast, in einer von dir möglicherweise erstellten Redistribution, die Bootstrap oder Teile davon enthält, einbeziehen
• Änderungen, die du an Bootstrap vornimmst, zurück an das Bootstrap-Projekt leiten (obwohl wir uns darüber sehr freuen würden)

Die eigentliche vollständige Lizenz von Bootstrap findest du im Repository des Projekts auf GitHub für mehr Informationen.

Übersetzungen

Mitglieder der Community haben Bootstraps Dokumentation in verschiedene Sprachen übersetzt. Keine davon sind offiziell unterstützt (auch diese nicht) und die Übersetzungen sind unter Umständen nicht immer aktuell.

• Bootstrap 中文文档 (Chinese)
• Bootstrap på Dansk (Danish)
• Bootstrap en Français (French)
• Bootstrap in Italiano (Italian)
• Bootstrap 한국어 (Korean)
• Bootstrap em Português do Brasil (Brazilian Portuguese)
• Bootstrap по-русски (Russian)
• Bootstrap en Español (Spanish)
• Türkçe Bootstrap (Turkish)
• Bootstrap українською (Ukrainian)
• Bootstrap bằng tiếng Việt (Vietnamese)

Wir helfen nicht bei Organisation und Hosting von Übersetzungen, sondern verlinken nur auf diese.

Du hast eine neue oder bessere Übersetzung erstellt? Öffne einen Pull Request, um sie zu unserer Liste hinzuzufügen.

Du möchtest lieber die in jedem Fall aktuellste und zuverlässigste, offizielle Dokumentation auf Englisch lesen? Hier entlang bitte.