Download

Bootstrap (derzeit v3.3.7) bietet einige einfache Möglichkeiten, um schnell loszulegen, wobei jede für ein anderes Qualifikationsniveau und einen anderen Anwendungsfall geeignet ist. Lesen Sie durch, um zu sehen, was Ihren speziellen Bedürfnissen entspricht.

Bootstrap-CDN

Die Leute von jsDelivr bieten freundlicherweise CDN-Unterstützung für CSS und JavaScript von Bootstrap. Verwenden Sie einfach diese Bootstrap-CDN- Links.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Mit Bower installieren

Sie können Bootstrap’s Less, CSS, JavaScript und Schriftarten auch mit Bower installieren und verwalten :

$ bower install bootstrap

Mit npm installieren

Sie können Bootstrap auch mit npm installieren :

$ npm install bootstrap@3

require('bootstrap')lädt alle jQuery-Plugins von Bootstrap in das jQuery-Objekt. Das bootstrapModul selbst exportiert nichts. Sie können die jQuery-Plugins von Bootstrap einzeln manuell laden, indem Sie die /js/*.jsDateien im Verzeichnis der obersten Ebene des Pakets laden.

Bootstrap package.jsonenthält einige zusätzliche Metadaten unter den folgenden Schlüsseln:

• less- Pfad zur wichtigsten Less - Quelldatei von Bootstrap
• style- Pfad zum nicht minimierten CSS von Bootstrap, das mit den Standardeinstellungen vorkompiliert wurde (keine Anpassung)

Mit Composer installieren

Sie können Bootstrap’s Less, CSS, JavaScript und Schriftarten auch mit Composer installieren und verwalten :

$ composer require twbs/bootstrap

Autoprefixer für Less/Sass erforderlich

Bootstrap verwendet Autoprefixer , um mit CSS-Anbieterpräfixen umzugehen . Wenn Sie Bootstrap aus seiner Less/Sass-Quelle kompilieren und nicht unser Gruntfile verwenden, müssen Sie Autoprefixer selbst in Ihren Build-Prozess integrieren. Wenn Sie vorkompilierten Bootstrap oder unser Gruntfile verwenden, müssen Sie sich darüber keine Gedanken machen, da Autoprefixer bereits in unserem Gruntfile integriert ist.

Was ist inbegriffen

Bootstrap kann in zwei Formen heruntergeladen werden, in denen Sie die folgenden Verzeichnisse und Dateien finden, die gemeinsame Ressourcen logisch gruppieren und sowohl kompilierte als auch minimierte Variationen bereitstellen.

Vorkompilierter Bootstrap

Entpacken Sie nach dem Herunterladen den komprimierten Ordner, um die Struktur von (dem kompilierten) Bootstrap anzuzeigen. Sie werden so etwas sehen:

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 grundlegendste Form von Bootstrap: vorkompilierte Dateien für die schnelle Drop-in-Nutzung in fast jedem Webprojekt. Wir bieten kompiliertes CSS und JS ( bootstrap.*) sowie kompiliertes und minimiertes CSS und JS ( bootstrap.min.*). CSS -Quellzuordnungen ( bootstrap.*.map) sind für die Verwendung mit den Entwicklertools bestimmter Browser verfügbar. Schriftarten von Glyphicons sind ebenso enthalten wie das optionale Bootstrap-Design.

Bootstrap-Quellcode

Der Download des Bootstrap-Quellcodes enthält die vorkompilierten CSS-, JavaScript- und Schriftart-Assets sowie Source Less, JavaScript und Dokumentation. Genauer gesagt umfasst es Folgendes und mehr:

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

Die less/, js/, und fonts/sind der Quellcode für unsere CSS-, JS- und Icon-Fonts (jeweils). Der dist/Ordner enthält alles, was oben im vorkompilierten Download-Bereich aufgeführt ist. Der docs/Ordner enthält den Quellcode für unsere Dokumentation und die examples/Verwendung von Bootstrap. Darüber hinaus bietet jede andere enthaltene Datei Unterstützung für Pakete, Lizenzinformationen und Entwicklung.

Kompilieren von CSS und JavaScript

Bootstrap verwendet Grunt für sein Build-System mit praktischen Methoden zum Arbeiten mit dem Framework. So kompilieren wir unseren Code, führen Tests durch und vieles mehr.

Grunt installieren

Um Grunt zu installieren, müssen Sie zunächst node.js (einschließlich npm) herunterladen und installieren . npm steht für Node Packaged Modules und ist eine Möglichkeit, Entwicklungsabhängigkeiten über node.js zu verwalten.

1. grunt-cliGlobal installieren mit npm install -g grunt-cli.
2. Navigieren Sie zum Stammverzeichnis /bootstrap/und führen Sie dann npm install. npm sieht sich die package.jsonDatei an und installiert automatisch die dort aufgeführten notwendigen lokalen Abhängigkeiten.

Wenn Sie fertig sind, können Sie die verschiedenen Grunt-Befehle ausführen, die über die Befehlszeile bereitgestellt werden.

Verfügbare Grunt-Befehle

grunt dist(Einfach CSS und JavaScript kompilieren)

Erneuert das /dist/Verzeichnis mit kompilierten und minimierten CSS- und JavaScript-Dateien. Als Bootstrap-Benutzer ist dies normalerweise der gewünschte Befehl.

grunt watch(Uhr)

Überwacht die Less-Quelldateien und kompiliert sie automatisch neu in CSS, wenn Sie eine Änderung speichern.

grunt test(Tests ausführen)

Führt JSHint aus und führt die QUnit - Tests kopflos in PhantomJS aus .

grunt docs(Dokument-Assets erstellen und testen)

Erstellt und testet CSS, JavaScript und andere Assets, die verwendet werden, wenn die Dokumentation lokal über bundle exec jekyll serve.

grunt(Absolut alles bauen und Tests durchführen)

Kompiliert und minimiert CSS und JavaScript, erstellt die Dokumentations-Website, führt den HTML5-Validator gegen die Dokumente aus, generiert die Customizer-Assets neu und vieles mehr. Benötigt Jekyll . Normalerweise nur notwendig, wenn Sie Bootstrap selbst hacken.

Fehlerbehebung

Sollten Sie Probleme beim Installieren von Abhängigkeiten oder beim Ausführen von Grunt-Befehlen haben, löschen Sie zunächst das /node_modules/von npm generierte Verzeichnis. Führen Sie dann erneut aus npm install.

Grundlegende Vorlage

Beginnen Sie mit dieser einfachen HTML-Vorlage oder ändern Sie diese Beispiele . Wir hoffen, dass Sie unsere Vorlagen und Beispiele anpassen und an Ihre Bedürfnisse anpassen.

Kopieren Sie den folgenden HTML-Code, um mit der Arbeit mit einem minimalen Bootstrap-Dokument zu beginnen.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Beispiele

Bauen Sie mit den vielen Komponenten von Bootstrap auf der obigen Basisvorlage auf. Wir empfehlen Ihnen, Bootstrap an die Anforderungen Ihres individuellen Projekts anzupassen und anzupassen.

Holen Sie sich den Quellcode für jedes Beispiel unten, indem Sie das Bootstrap-Repository herunterladen . Beispiele finden Sie im docs/examples/Verzeichnis.

Verwenden des Rahmens

Starter-Vorlage

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

Bootstrap-Thema

Laden Sie das optionale Bootstrap-Design für ein visuell verbessertes Erlebnis.

Gitter

Mehrere Beispiele für Rasterlayouts mit allen vier Ebenen, Verschachtelung und mehr.

Jumbotron

Bauen Sie mit einer Navigationsleiste und einigen einfachen Gittersäulen um das Jumbotron herum.

Schmales Jumbotron

Erstellen Sie eine benutzerdefiniertere Seite, indem Sie den Standardcontainer und Jumbotron einschränken.

Navigationsleisten in Aktion

Navigationsleiste

Super einfache Vorlage, die die Navigationsleiste zusammen mit einigen zusätzlichen Inhalten enthält.

Statische obere Navigationsleiste

Super einfache Vorlage mit einer statischen oberen Navigationsleiste und einigen zusätzlichen Inhalten.

Navigationsleiste behoben

Super einfache Vorlage mit einer festen oberen Navigationsleiste und einigen zusätzlichen Inhalten.

Benutzerdefinierte Komponenten

Abdeckung

Eine einseitige Vorlage zum Erstellen einfacher und schöner Homepages.

Karussell

Passen Sie die Navigationsleiste und das Karussell an und fügen Sie dann einige neue Komponenten hinzu.

Bloggen

Einfaches zweispaltiges Blog-Layout mit benutzerdefinierter Navigation, Kopfzeile und Typ.

Armaturenbrett

Grundstruktur für ein Admin-Dashboard mit fester Sidebar und Navbar.

Anmeldeseite

Benutzerdefiniertes Formularlayout und -design für ein einfaches Anmeldeformular.

Gerechtfertigte Navigation

Erstellen Sie eine benutzerdefinierte Navigationsleiste mit gerechtfertigten Links. Kopf hoch! Nicht zu Safari-freundlich.

Klebrige Fußzeile

Fügen Sie eine Fußzeile am unteren Rand des Ansichtsfensters hinzu, wenn der Inhalt kürzer ist.

Sticky Footer mit Navigationsleiste

Fügen Sie eine Fußzeile am unteren Rand des Ansichtsfensters mit einer festen Navigationsleiste oben an.

Experimente

Nicht reagierender Bootstrap

Deaktivieren Sie einfach die Reaktionsfähigkeit von Bootstrap gemäß unserer Dokumentation .

Off-Canvas

Erstellen Sie ein umschaltbares Off-Canvas-Navigationsmenü zur Verwendung mit Bootstrap.

Werkzeug

Bootlint

Bootlint ist das offizielle Bootstrap-HTML - Linter - Tool. Es sucht automatisch nach mehreren häufigen HTML-Fehlern in Webseiten, die Bootstrap auf ziemlich "Vanille"-Weise verwenden. Die Komponenten/Widgets von Vanilla Bootstrap erfordern, dass ihre Teile des DOM bestimmten Strukturen entsprechen. Bootlint überprüft, ob Instanzen von Bootstrap-Komponenten über korrekt strukturiertes HTML verfügen. Erwägen Sie, Bootlint zu Ihrer Bootstrap-Webentwicklungs-Toolchain hinzuzufügen, damit keiner der häufigsten Fehler die Entwicklung Ihres Projekts verlangsamt.

Gemeinschaft

Bleiben Sie über die Entwicklung von Bootstrap auf dem Laufenden und erreichen Sie die Community mit diesen hilfreichen Ressourcen.

• Lesen und abonnieren Sie den offiziellen Bootstrap-Blog .
• Chatten Sie mit anderen Bootstrappern über IRC auf dem irc.freenode.netServer im ##bootstrap-Kanal .
• Wenn Sie Hilfe bei der Verwendung von Bootstrap benötigen, fragen Sie auf StackOverflow mit dem Tagtwitter-bootstrap-3 .
• Entwickler sollten das Schlüsselwort bootstrapfür Pakete verwenden, die die Funktionalität von Bootstrap ändern oder erweitern, wenn sie über npm oder ähnliche Bereitstellungsmechanismen verteilt werden, um eine maximale Auffindbarkeit zu erreichen.
• Finden Sie auf der Bootstrap Expo inspirierende Beispiele für People Building mit Bootstrap .

Sie können auch @getbootstrap auf Twitter folgen, um den neuesten Klatsch und tolle Musikvideos zu erhalten.

Reaktionsfähigkeit deaktivieren

Bootstrap passt Ihre Seiten automatisch an verschiedene Bildschirmgrößen an. So deaktivieren Sie diese Funktion, damit Ihre Seite wie in diesem nicht reagierenden Beispiel funktioniert .

Schritte zum Deaktivieren der Seitenreaktion

1. Lassen Sie den in den CSS-Dokumenten<meta> erwähnten Viewport weg
2. Überschreiben Sie die widthfür .containerjede Rasterebene mit einer einzigen Breite, z. B. width: 970px !important;Stellen Sie sicher, dass dies nach dem Standard-Bootstrap-CSS kommt. Sie können dies optional !importantmit Medienabfragen oder einigen Selektor-Fu vermeiden.
3. Wenn Sie Navigationsleisten verwenden, entfernen Sie sämtliches Verhalten beim Einklappen und Erweitern der Navigationsleiste.
4. Verwenden Sie für Rasterlayouts .col-xs-*Klassen zusätzlich zu oder anstelle von mittleren/großen Klassen. Keine Sorge, das extra kleine Geräteraster lässt sich auf alle Auflösungen skalieren.

Sie benötigen weiterhin Respond.js für IE8 (da unsere Medienabfragen immer noch vorhanden sind und verarbeitet werden müssen). Dadurch werden die „Mobile Site“-Aspekte von Bootstrap deaktiviert.

Bootstrap-Vorlage mit deaktivierter Reaktionsfähigkeit

Wir haben diese Schritte auf ein Beispiel angewendet. Lesen Sie den Quellcode, um die spezifischen Änderungen zu sehen, die implementiert wurden.

Sehen Sie sich ein nicht reagierendes Beispiel an

Browser- und Geräteunterstützung

Bootstrap wurde entwickelt, um in den neuesten Desktop- und mobilen Browsern am besten zu funktionieren, was bedeutet, dass ältere Browser möglicherweise anders gestaltete, aber voll funktionsfähige Renderings bestimmter Komponenten anzeigen.

Unterstützte Browser

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

Alternative Browser, die die neueste Version von WebKit, Blink oder Gecko verwenden, ob direkt oder über die Webansichts-API der Plattform, werden nicht explizit unterstützt. Allerdings sollte Bootstrap (in den meisten Fällen) auch in diesen Browsern korrekt angezeigt und funktionieren. Genauere Support-Informationen finden Sie weiter unten.

Mobile Geräte

Im Allgemeinen unterstützt Bootstrap die neuesten Versionen der Standardbrowser jeder wichtigen Plattform. Beachten Sie, dass Proxy-Browser (wie Opera Mini, Turbo-Modus von Opera Mobile, UC Browser Mini, Amazon Silk) nicht unterstützt werden.

Desktop-Browser

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

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

Für Firefox unterstützen wir zusätzlich zur neuesten normalen stabilen Version auch die neueste Extended Support Release (ESR) -Version von Firefox.

Inoffiziell sollte Bootstrap in Chromium und Chrome für Linux, Firefox für Linux und Internet Explorer 7 sowie Microsoft Edge gut genug aussehen und sich gut verhalten, obwohl sie nicht offiziell unterstützt werden.

Eine Liste einiger Browserfehler, mit denen Bootstrap zu kämpfen hat, finden Sie in unserer Wall of browser bugs .

Internet-Explorer 8 und 9

Internet Explorer 8 und 9 werden ebenfalls unterstützt, beachten Sie jedoch, dass einige CSS3-Eigenschaften und HTML5-Elemente von diesen Browsern nicht vollständig unterstützt werden. Darüber hinaus erfordert Internet Explorer 8 die Verwendung von Respond.js , um die Unterstützung für Medienabfragen zu aktivieren.

Besuchen Sie Kann ich verwenden... für Details zur Browserunterstützung von CSS3- und HTML5-Funktionen.

Internet Explorer 8 und Respond.js

Beachten Sie die folgenden Einschränkungen, wenn Sie Respond.js in Ihren Entwicklungs- und Produktionsumgebungen für Internet Explorer 8 verwenden.

Respond.js und domänenübergreifendes CSS

Die Verwendung von Respond.js mit CSS, das auf einer anderen (Sub-)Domain (z. B. auf einem CDN) gehostet wird, erfordert einige zusätzliche Einstellungen. Einzelheiten finden Sie in der Respond.js-Dokumentation .

Respond.js undfile://

Aufgrund von Browser-Sicherheitsregeln funktioniert Respond.js nicht mit Seiten, die über das file://Protokoll angezeigt werden (z. B. beim Öffnen einer lokalen HTML-Datei). Um reaktionsschnelle Funktionen in IE8 zu testen, zeigen Sie Ihre Seiten über HTTP(S) an. Einzelheiten finden Sie in der Respond.js-Dokumentation .

Respond.js und@import

Respond.js funktioniert nicht mit CSS, auf das über verwiesen wird @import. Insbesondere sind einige Drupal-Konfigurationen dafür bekannt, @import. Einzelheiten finden Sie in der Respond.js-Dokumentation .

Internet Explorer 8 und Box-Sizing

box-sizing: border-box;IE8 wird in Kombination mit min-width, max-width, min-heightoder nicht vollständig unterstützt max-height. Aus diesem Grund verwenden wir ab v3.0.1 max-widthon .containers nicht mehr.

Internet Explorer 8 und @font-face

IE8 hat einige Probleme @font-facein Kombination mit :before. Bootstrap verwendet diese Kombination mit seinen Glyphicons. Wenn eine Seite zwischengespeichert und geladen wird, ohne dass sich die Maus über dem Fenster befindet (dh auf die Schaltfläche „Aktualisieren“ klicken oder etwas in einen Iframe laden), wird die Seite gerendert, bevor die Schriftart geladen wird. Wenn Sie den Mauszeiger über die Seite (Body) bewegen, werden einige der Symbole angezeigt, und wenn Sie den Mauszeiger über die verbleibenden Symbole bewegen, werden diese ebenfalls angezeigt. Einzelheiten finden Sie in Ausgabe Nr. 13863 .

IE-Kompatibilitätsmodi

Bootstrap wird in den alten Internet Explorer-Kompatibilitätsmodi nicht unterstützt. Um sicherzustellen, dass Sie den neuesten Rendering-Modus für IE verwenden, sollten Sie das entsprechende <meta>Tag in Ihre Seiten einfügen:

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

Bestätigen Sie den Dokumentmodus, indem Sie die Debugging-Tools öffnen: Drücken F12Sie und aktivieren Sie den "Dokumentmodus".

Dieses Tag ist in der gesamten Dokumentation und den Beispielen von Bootstrap enthalten, um die bestmögliche Wiedergabe in jeder unterstützten Version von Internet Explorer sicherzustellen.

Weitere Informationen finden Sie in dieser StackOverflow-Frage .

Internet Explorer 10 unter Windows 8 und Windows Phone 8

Internet Explorer 10 unterscheidet die Gerätebreite nicht von der Breite des Darstellungsbereichs und wendet daher die Medienabfragen im CSS von Bootstrap nicht richtig an. Normalerweise fügen Sie einfach ein kurzes CSS-Snippet hinzu, um dies zu beheben:

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

Dies funktioniert jedoch nicht für Geräte mit Windows Phone 8-Versionen, die älter als Update 3 (alias GDR3) sind, da es dazu führt, dass solche Geräte hauptsächlich eine Desktop-Ansicht anstelle einer schmalen „Telefon“-Ansicht anzeigen. Um dies zu beheben, müssen Sie das folgende CSS und JavaScript einbinden, um den Fehler zu umgehen .

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

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/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)
}

Weitere Informationen und Nutzungsrichtlinien finden Sie unter Windows Phone 8 und Gerätebreite .

Als Vorwarnung nehmen wir dies als Demonstration in alle Dokumentationen und Beispiele von Bootstrap auf.

Safari-Prozentrundung

Die Rendering-Engine von Safari-Versionen vor v7.1 für OS X und Safari für iOS v8.0 hatte einige Probleme mit der Anzahl der in unseren Rasterklassen verwendeten Dezimalstellen .col-*-1. Wenn Sie also 12 einzelne Rasterspalten hätten, würden Sie feststellen, dass sie im Vergleich zu anderen Spaltenreihen zu kurz kommen. Neben dem Upgrade von Safari/iOS haben Sie einige Optionen für Problemumgehungen:

• Fügen Sie .pull-rightzu Ihrer letzten Rasterspalte hinzu, um die Ausrichtung ganz nach rechts zu erhalten
• Passen Sie Ihre Prozentsätze manuell an, um die perfekte Rundung für Safari zu erhalten (schwieriger als die erste Option).

Modals, Navigationsleisten und virtuelle Tastaturen

Überlauf und Scrollen

Die Unterstützung für overflow: hiddendas <body>Element ist in iOS und Android ziemlich begrenzt. Wenn Sie zu diesem Zweck in einem der Browser dieser Geräte über den oberen oder unteren Rand eines Modals hinausscrollen, <body>beginnt der Inhalt zu scrollen. Siehe Chrome-Fehler #175502 (behoben in Chrome v40) und WebKit-Fehler #153852 .

iOS-Textfelder und Scrollen

Ab iOS 9.3 wird, während ein Modal geöffnet ist , der Inhalt unter dem Modal gescrollt , wenn die anfängliche Berührung einer Scroll-Geste innerhalb der Grenzen eines Texts <input>oder eines liegt, und nicht das Modal selbst. Siehe WebKit-Fehler Nr. 153856 .<textarea><body>

Virtuelle Tastaturen

Beachten Sie außerdem, dass bei Verwendung einer festen Navigationsleiste oder Eingaben innerhalb eines Modals iOS einen Rendering-Fehler aufweist, der die Position fester Elemente nicht aktualisiert, wenn die virtuelle Tastatur ausgelöst wird. Einige Problemumgehungen hierfür umfassen das Transformieren Ihrer Elemente in position: absoluteoder das Aufrufen eines Timers im Fokus, um zu versuchen, die Positionierung manuell zu korrigieren. Dies wird nicht von Bootstrap gehandhabt, daher liegt es an Ihnen, zu entscheiden, welche Lösung für Ihre Anwendung am besten geeignet ist.

Navigationsleisten-Dropdowns

Aufgrund der Komplexität der Z-Indizierung wird das .dropdown-backdropElement unter iOS im Navi nicht verwendet. Um Dropdowns in Navigationsleisten zu schließen, müssen Sie also direkt auf das Dropdown-Element (oder jedes andere Element, das ein Klickereignis in iOS auslöst ) klicken.

Browser-Zoom

Das Zoomen von Seiten führt zwangsläufig zu Rendering-Artefakten in einigen Komponenten, sowohl in Bootstrap als auch im Rest des Webs. Je nach Problem können wir es möglicherweise beheben (zuerst suchen und dann ggf. ein Problem öffnen). Wir neigen jedoch dazu, diese zu ignorieren, da sie oft keine direkte Lösung außer hackigen Workarounds haben.

Sticky :hover/ :focusauf dem Handy

Obwohl echtes Schweben auf den meisten Touchscreens nicht möglich ist, emulieren die meisten mobilen Browser die Unterstützung des Schwebens und machen :hover"sticky". Mit anderen Worten, :hoverStile beginnen mit der Anwendung, nachdem auf ein Element getippt wurde, und hören erst mit der Anwendung auf, nachdem der Benutzer auf ein anderes Element getippt hat. Dies kann dazu führen, dass Bootstrap- :hoverZustände in solchen Browsern unerwünscht "stecken bleiben". Einige mobile Browser machen auch :focusähnlich klebrig. Derzeit gibt es keine einfache Problemumgehung für diese Probleme, außer solche Stile vollständig zu entfernen.

Drucken

Selbst in einigen modernen Browsern kann das Drucken skurril sein.

Insbesondere ab Chrome v32 und unabhängig von den Randeinstellungen verwendet Chrome beim Auflösen von Medienabfragen beim Drucken einer Webseite eine Darstellungsbereichsbreite, die deutlich schmaler ist als das physische Papierformat. Dies kann dazu führen, dass das extra kleine Raster von Bootstrap beim Drucken unerwartet aktiviert wird. Siehe Problem Nr. 12078 und Chrome-Fehler Nr. 273306 für einige Details. Vorgeschlagene Problemumgehungen:

• Nehmen Sie das extra kleine Raster an und stellen Sie sicher, dass Ihre Seite darunter akzeptabel aussieht.
• Passen Sie die Werte der @screen-*Less-Variablen so an, dass Ihr Druckerpapier größer als extra-klein betrachtet wird.
• Fügen Sie benutzerdefinierte Medienabfragen hinzu, um die Haltepunkte der Rastergröße nur für Druckmedien zu ändern.

Seit Safari v8.0 .containerkönnen s mit fester Breite dazu führen, dass Safari beim Drucken eine ungewöhnlich kleine Schriftgröße verwendet. Siehe #14868 und WebKit-Fehler #138192 für weitere Details. Eine mögliche Problemumgehung hierfür ist das Hinzufügen des folgenden CSS:

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

Aktienbrowser für Android

Standardmäßig wird Android 4.1 (und anscheinend sogar einige neuere Versionen) mit der Browser-App als Standard-Webbrowser der Wahl (im Gegensatz zu Chrome) ausgeliefert. Leider hat die Browser-App im Allgemeinen viele Fehler und Inkonsistenzen mit CSS.

Menüs auswählen

Bei <select>Elementen zeigt der Android Stock Browser die seitlichen Steuerelemente nicht an, wenn ein border-radiusund/oder borderangewendet wird. (Weitere Informationen finden Sie in dieser StackOverflow-Frage .) Verwenden Sie das Code-Snippet unten, um das anstößige CSS zu entfernen, und rendern Sie <select>es als nicht formatiertes Element im Stock-Browser von Android. Das User-Agent-Sniffing vermeidet Interferenzen mit Chrome-, Safari- und Mozilla-Browsern.

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

Möchten Sie ein Beispiel sehen? Schauen Sie sich diese JS Bin-Demo an.

Validatoren

Um alten und fehlerhaften Browsern das bestmögliche Erlebnis zu bieten, verwendet Bootstrap an mehreren Stellen CSS-Browser-Hacks , um spezielles CSS auf bestimmte Browserversionen auszurichten, um Fehler in den Browsern selbst zu umgehen. Diese Hacks führen verständlicherweise dazu, dass sich CSS-Validierer darüber beschweren, dass sie ungültig sind. An einigen Stellen verwenden wir auch modernste CSS-Funktionen, die noch nicht vollständig standardisiert sind, aber diese dienen ausschließlich der progressiven Verbesserung.

Diese Validierungswarnungen spielen in der Praxis keine Rolle, da der Nicht-Hacky-Teil unseres CSS vollständig validiert und die Hacky-Teile das ordnungsgemäße Funktionieren des Nicht-Hacky-Teils nicht beeinträchtigen, weshalb wir diese speziellen Warnungen absichtlich ignorieren.

Unsere HTML-Dokumente enthalten ebenfalls einige triviale und belanglose HTML-Validierungswarnungen, da wir eine Problemumgehung für einen bestimmten Firefox-Fehler enthalten .

Unterstützung durch Drittanbieter

Obwohl wir keine Plugins oder Add-Ons von Drittanbietern offiziell unterstützen, bieten wir einige nützliche Ratschläge, um potenzielle Probleme in Ihren Projekten zu vermeiden.

Box-Größe

Einige Software von Drittanbietern, einschließlich Google Maps und der benutzerdefinierten Suchmaschine von Google, steht aufgrund * { box-sizing: border-box; }einer Regel in Konflikt mit Bootstrap, die dafür sorgt, dass paddingdie endgültig berechnete Breite eines Elements nicht beeinflusst wird. Erfahren Sie mehr über das Box-Modell und die Größe unter CSS Tricks .

Je nach Kontext können Sie bei Bedarf überschreiben (Option 1) oder die Box-Größe für ganze Regionen zurücksetzen (Option 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.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: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

Barrierefreiheit

Bootstrap folgt gängigen Webstandards und kann – mit minimalem zusätzlichen Aufwand – verwendet werden, um Websites zu erstellen, die für diejenigen zugänglich sind, die AT verwenden .

Navigation überspringen

Wenn Ihre Navigation viele Links enthält und vor dem Hauptinhalt im DOM steht, fügen Sie einen Skip to main contentLink vor der Navigation hinzu (eine einfache Erklärung finden Sie in diesem A11Y-Projekt-Artikel zum Überspringen von Navigationslinks ). Durch die Verwendung der .sr-onlyKlasse wird der Skip-Link visuell ausgeblendet, und die .sr-only-focusableKlasse stellt sicher, dass der Link sichtbar wird, sobald er fokussiert ist (für sehende Tastaturbenutzer).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

Verschachtelte Überschriften

Wenn Sie Überschriften ( <h1>- <h6>) verschachteln, sollte Ihre primäre Dokumentkopfzeile eine sein <h1>. Nachfolgende Überschriften sollten logisch verwendet werden <h2>, <h6>damit Screenreader ein Inhaltsverzeichnis für Ihre Seiten erstellen können.

Erfahren Sie mehr unter HTML CodeSniffer und AccessAbility von Penn State .

Farbkontrast

Derzeit sind einige der Standard-Farbkombinationen, die in Bootstrap verfügbar sind (z. B. die verschiedenen gestylten Schaltflächenklassen , einige der Code-Hervorhebungsfarben, die für grundlegende Codeblöcke verwendet werden , die .bg-primary kontextabhängige Hintergrund -Helferklasse und die Standard-Link-Farbe bei Verwendung auf einem weißen Hintergrund) ein niedriges Kontrastverhältnis haben (unterhalb des empfohlenen Verhältnisses von 4,5:1 ). Dies kann Benutzern mit Sehbehinderung oder Farbenblindheit Probleme bereiten. Diese Standardfarben müssen möglicherweise geändert werden, um ihren Kontrast und ihre Lesbarkeit zu verbessern.

Zusätzliche Ressourcen

• „HTML Codesniffer“-Lesezeichen zum Identifizieren von Zugänglichkeitsproblemen
• Chromes Accessibility Developer Tools-Erweiterung
• Farbkontrastanalysator
• Das A11Y-Projekt
• Dokumentation zur MDN-Zugänglichkeit

Häufig gestellte Fragen zu Lizenzen

Bootstrap wird unter der MIT-Lizenz veröffentlicht und unterliegt dem Urheberrecht von 2016 Twitter. Auf kleinere Brocken heruntergekocht, lässt es sich mit folgenden Zuständen beschreiben.

Es erfordert Folgendes:

• Bewahren Sie die in den CSS- und JavaScript-Dateien von Bootstrap enthaltenen Lizenz- und Urheberrechtshinweise auf, wenn Sie sie in Ihren Werken verwenden

Es erlaubt Ihnen:

• Laden Sie Bootstrap ganz oder teilweise kostenlos herunter und verwenden Sie es für persönliche, private, firmeninterne oder kommerzielle Zwecke
• Verwenden Sie Bootstrap in von Ihnen erstellten Paketen oder Distributionen
• Ändern Sie den Quellcode
• Gewähren Sie eine Unterlizenz zum Modifizieren und Verteilen von Bootstrap an Dritte, die nicht in der Lizenz enthalten sind

Es verbietet Ihnen:

• Halten Sie die Autoren und Lizenzinhaber für Schäden haftbar, da Bootstrap ohne Gewährleistung bereitgestellt wird
• Machen Sie die Urheber oder Urheberrechtsinhaber von Bootstrap haftbar
• Verteilen Sie jedes Stück Bootstrap ohne ordnungsgemäße Zuordnung
• Verwenden Sie alle Marken, die Twitter gehören, in einer Weise, die aussagen oder implizieren könnte, dass Twitter Ihre Verbreitung unterstützt
• Verwenden Sie alle Marken, die Twitter gehören, in einer Weise, die aussagen oder implizieren könnte, dass Sie die betreffende Twitter-Software erstellt haben

Folgendes ist nicht erforderlich:

• Schließen Sie die Quelle von Bootstrap selbst oder von Änderungen, die Sie möglicherweise daran vorgenommen haben, in jede Weiterverteilung ein, die Sie möglicherweise zusammenstellen und die Bootstrap enthält
• Senden Sie Änderungen, die Sie an Bootstrap vornehmen, an das Bootstrap-Projekt zurück (obwohl ein solches Feedback erwünscht ist).

Die vollständige Bootstrap-Lizenz befindet sich im Projekt-Repository für weitere Informationen.

Übersetzungen

Community-Mitglieder haben die Bootstrap-Dokumentation in verschiedene Sprachen übersetzt. Keine wird offiziell unterstützt und sie sind möglicherweise nicht immer auf dem neuesten Stand.

• Bootstrap 中文文档 (Chinesisch)
• Bootstrap 3 中文手冊 (Chinesisch (traditionell))
• Bootstrap på Dansk (Dänisch)
• Bootstrap en Français (Französisch)
• Bootstrap auf Deutsch (Deutsch)
• Bootstrap in Italiano (Italienisch)
• Bootstrap 한국어 (Koreanisch)
• Bootstrap em Português do Brasil (brasilianisches Portugiesisch)
• Bootstrap по-русски (Russisch)
• Bootstrap en Español (Spanisch)
• Türkçe Bootstrap (Türkisch)
• Bootstrap українською (Ukrainisch)
• Bootstrap bằng tiếng Việt (vietnamesisch)

Wir helfen nicht beim Organisieren oder Hosten von Übersetzungen, wir verlinken nur zu ihnen.

Eine neue oder bessere Übersetzung fertiggestellt? Öffnen Sie eine Pull-Anfrage, um sie unserer Liste hinzuzufügen.