Upstream-Änderungen

Nächster Stapel: twbs/bootstrap@c2f4e5f...master
juthilo · Jul 26, 2014 · 6093bdb · 6093bdb
1 parent 836af3d
commit 6093bdb
Show file tree

Hide file tree

Showing 40 changed files with 340 additions and 288 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -63,7 +63,7 @@ hilfreich, also vielen Dank an dieser Stelle!
 
 3. **Isoliere das Problem** &mdash; am besten ist ein [reduzierter Musterfall](http://css-tricks.com/6263-reduced-test-cases/)
    und ein Live-Beispiel.
-   [Dieser JS Bin](http://jsbin.com/EBAwOkOK/1) ist eine hilfreiche Vorlage.
+   [Dieser JS Bin](http://jsbin.com/lefey/1/edit?html,output) ist eine hilfreiche Vorlage.
 
 
 Eine gute Fehlermeldung sollte nicht dazu führen, dass Andere nach mehr
@@ -179,36 +179,17 @@ Projekteigentümern, deine Arbeit unter den Bedingungen der
 
 ### HTML
 
-- Zwei Leerzeichen für Einrückung, niemals Tabs.
-- Immer doppelte Anführungszeichen (`"`), niemals einzelne (`'`).
-- Verwende immer vernünftige Einrückung.
+[Befolge die Regeln aus dem Code Guide.](http://codeguide.co/#html)
+
 - Verwende Tags und Elemente für einen HTML5-Doctype (z.B. selbst-schließende Tags)
-- Nutze CDNs und HTTPS für JS von Dritten, wenn möglich. Wir nutzen keine
-  protokoll-unabhängigen URLs in diesem Fall, da diese nicht funktionieren,
-  wenn die Seite lokal über `file://` angezeigt wird.
+- Nutze CDNs und HTTPS für JS von Dritten, wenn möglich. Wir nutzen keine protokoll-unabhängigen URLs in diesem Fall, da diese nicht funktionieren, wenn die Seite lokal über `file://` angezeigt wird.
+- Verwende Attribute entsprechend [WAI-ARIA](https://developer.mozilla.org/de/docs/Web/Barrierefreiheit/ARIA) in Beispielen in der Dokumentation, um beim Thema Barrierefreiheit mit gutem Beispiel voranzugehen.
 
 ### CSS
 
-- CSS-Änderungen müssen zuerst in den `.less`-Dateien gemacht werden,
-  nie einfach nur in den kompilierten `.css`-Dateien.
-- Befolge die [CSS-Eigenschaften-Reihenfolge](http://markdotto.com/2011/11/29/css-property-order/).
-- Immer nur eine Eigenschaft und ein Wert pro Zeile.
-- Immer ein Leerzeichen nach dem Doppelpunkt einer Eigenschaft (z.B. `display: block;` und nicht `display:block;`).
-- Beende alle Zeilen mit einem Semikolon.
-- Für mehrere, durch Kommas getrennte Selektoren, platziere jeden Selektor auf einer neuen Zeile.
-- Füge keine Vendor-Präfix-Eigenschaften zu ihren Gegenstücken ohne Präfix hinzu (z.B. nur `box-sizing` und nicht zusätzlich `-webkit-box-sizing`), da diese automatisch generiert werden.
-- Attribut-Selektoren, wie `input[type="text"]`, sollten den Wert des Attributs
-  immer in doppelten Anführungszeichen verpacken, der Einheitlichkeit und
-  Sicherheit wegen
-  (siehe diesen [Blogpost über unverpackte Attribut-Werte](http://mathiasbynens.be/notes/unquoted-attribute-values), die zu XSS-Angriffen führen können).
-- Attribut-Selektoren sollten nur in Fällen ohne gute Alternative verwendet
-  werden (z.B. Formularfelder) und bei eigenen Komponenten aus Gründen der
-  Performance und Genauigkeit vermieden werden.
-- Eine Reihe von Klassen für eine Komponente sollte eine Grundklasse
-  (z.B. `.component`) enthalten und die Grundklasse als Präfix für
-  Änderungsklassen und Unterkomponenten verwenden (z.B. `.component-lg`).
-- Vermeide Vererbung und zu viele Verschachtelungen—verwende einzelne,
-  explizite Klassen, wann immer möglich.
+[Befolge die Regeln aus dem Code Guide.](http://codeguide.co/#html)
+
+- Wenn es nicht all zu umständlich ist, sollten Standard-Farbpaletten den [WCAG-Richtlinien für Farbkontrast](http://www.w3.org/TR/WCAG20/#visual-audio-contrast) folgen.
 - Abgesehen von seltenen Einzelfällen, solltest du die Standard-Stile für `:focus` (also z.B. `outline: none;`) nicht entfernen ohne sinnvolle Alternativen bereitzustellen. Lies [diesen Artikel des A11Y Projects](http://a11yproject.com/posts/never-remove-css-outlines/) für mehr Informationen.
 
 ### JS

diff --git a/_config.yml b/_config.yml
@@ -33,6 +33,6 @@ blog:             http://blog.getbootstrap.com
 expo:             http://expo.getbootstrap.com
 
 cdn:
-  css:            //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
-  css_theme:      //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css
-  js:             //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js
+  css:            https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css
+  css_theme:      https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css
+  js:             https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js
diff --git a/_includes/components/alerts.html b/_includes/components/alerts.html
@@ -1,7 +1,7 @@
 <div class="bs-docs-section">
   <h1 id="alerts" class="page-header">Warnhinweise</h1>
 
-  <p class="lead">Stelle mit den verschiedenen flexiblen Warnhinweisen Rückmeldungen mit Kontext für typische Benutzeraktionen zur Verfügung. Um sie an Ort und Stelle wegklicken zu lassen, brauchst du das <a href="../javascript/#alerts">Warnhinweise-jQuery-Plugin</a>.</p>
+  <p class="lead">Stelle mit den verschiedenen flexiblen Warnhinweisen Rückmeldungen mit Kontext für typische Benutzeraktionen zur Verfügung.</p>
 
   <h2 id="alerts-examples">Beispiele</h2>
   <p>Verpacke Text und einen optionalen Schließen-Button in <code>.alert</code> und einer der vier Kontext-Klassen (z.B. <code>.alert-success</code>) für ganz einfache Warnhinweise.</p>
@@ -34,6 +34,10 @@ <h4>Keine Standard-Klasse</h4>
 
   <h2 id="alerts-dismissible">Ausblendbare Variante</h2>
   <p>Baue einen Warnhinweis aus, indem du optional <code>.alert-dismissible</code> und einen Schließen-Button hinzufügst.</p>
+  <div class="bs-callout bs-callout-info">
+    <h4>Erfordert das JavaScript-Plugin für Warnhinweise</h4>
+    <p>Damit Warnhinweise ihren ganzen Funktionsumfang, inkl. der Möglichkeit, sie zu schließen, erhalten, musst du das <a href="../javascript/#alerts">JavaScript-Plugin für Warnhinweise</a> verwenden.</p>
+  </div>
   <div class="bs-example">
     <div class="alert alert-warning alert-dismissible" role="alert">
       <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Schließen</span></button>

diff --git a/_includes/components/badges.html b/_includes/components/badges.html
@@ -22,20 +22,20 @@ <h4>Passt sich der aktiven Ansicht in Navs an</h4>
   <p>Da passende Stile eingebaut sind, kannst du Badges ohne Probleme zusammen mit der aktiven Ansicht in Pills-Navs verwenden.</p>
   <div class="bs-example">
     <ul class="nav nav-pills" role="tablist">
-      <li class="active"><a href="#">Start <span class="badge">42</span></a></li>
-      <li><a href="#">Profil</a></li>
-      <li><a href="#">Nachrichten <span class="badge">3</span></a></li>
+      <li role="presentation" class="active"><a href="#">Start <span class="badge">42</span></a></li>
+      <li role="presentation"><a href="#">Profil</a></li>
+      <li role="presentation"><a href="#">Nachrichten <span class="badge">3</span></a></li>
     </ul>
     <br>
     <ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 260px;">
-      <li class="active">
+      <li role="presentation" class="active">
         <a href="#">
           <span class="badge pull-right">42</span>
           Start
         </a>
       </li>
-      <li><a href="#">Profil</a></li>
-      <li>
+      <li role="presentation"><a href="#">Profil</a></li>
+      <li role="presentation">
         <a href="#">
           <span class="badge pull-right">3</span>
           Nachrichten
@@ -49,7 +49,7 @@ <h4>Passt sich der aktiven Ansicht in Navs an</h4>
   </div>
 {% highlight html %}
 <ul class="nav nav-pills nav-stacked" role="tablist">
-  <li class="active">
+  <li role="presentation" class="active">
     <a href="#">
       <span class="badge pull-right">42</span>
       Start

diff --git a/_includes/components/glyphicons.html b/_includes/components/glyphicons.html
@@ -45,10 +45,10 @@ <h2 id="glyphicons-examples">Beispiele</h2>
   <div class="bs-example">
     <div class="btn-toolbar" role="toolbar">
       <div class="btn-group">
-        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
-        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
-        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
-        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
+        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span> <span class="sr-only">Links ausrichten</span></button>
+        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span> <span class="sr-only">Zentrieren</span></button>
+        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span> <span class="sr-only">Rechts ausrichten</span></button>
+        <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span> <span class="sr-only">Blocksatz</span></button>
       </div>
     </div>
     <div class="btn-toolbar" role="toolbar">

diff --git a/_includes/components/navs.html b/_includes/components/navs.html
@@ -7,16 +7,16 @@ <h2 id="nav-tabs">Tabs</h2>
   <p>Beachte, dass die <code>.nav-tabs</code>-Klasse nur zusammen mit der <code>.nav</code>-Grund-Klasse funktioniert.</p>
   <div class="bs-example">
     <ul class="nav nav-tabs" role="tablist">
-      <li class="active"><a href="#">Start</a></li>
-      <li><a href="#">Profil</a></li>
-      <li><a href="#">Nachrichten</a></li>
+      <li role="presentation" class="active"><a href="#">Start</a></li>
+      <li role="presentation"><a href="#">Profil</a></li>
+      <li role="presentation"><a href="#">Nachrichten</a></li>
     </ul>
   </div>
 {% highlight html %}
 <ul class="nav nav-tabs" role="tablist">
-  <li class="active"><a href="#">Start</a></li>
-  <li><a href="#">Profil</a></li>
-  <li><a href="#">Nachrichten</a></li>
+  <li role="presentation" class="active"><a href="#">Start</a></li>
+  <li role="presentation"><a href="#">Profil</a></li>
+  <li role="presentation"><a href="#">Nachrichten</a></li>
 </ul>
 {% endhighlight %}
   <div class="bs-callout bs-callout-info">
@@ -28,24 +28,24 @@ <h2 id="nav-pills">Pills</h2>
   <p>Nimm den gleichen HTML-Code aber verwende stattdessen <code>.nav-pills</code>:</p>
   <div class="bs-example">
     <ul class="nav nav-pills" role="tablist">
-      <li class="active"><a href="#">Start</a></li>
-      <li><a href="#">Profil</a></li>
-      <li><a href="#">Nachrichten</a></li>
+      <li role="presentation" class="active"><a href="#">Start</a></li>
+      <li role="presentation"><a href="#">Profil</a></li>
+      <li role="presentation"><a href="#">Nachrichten</a></li>
     </ul>
   </div>
 {% highlight html %}
 <ul class="nav nav-pills" role="tablist">
-  <li class="active"><a href="#">Start</a></li>
-  <li><a href="#">Profil</a></li>
-  <li><a href="#">Nachrichten</a></li>
+  <li role="presentation" class="active"><a href="#">Start</a></li>
+  <li role="presentation"><a href="#">Profil</a></li>
+  <li role="presentation"><a href="#">Nachrichten</a></li>
 </ul>
 {% endhighlight %}
   <p>Pills können auch übereinander angeordnet werden. Füge einfach <code>.nav-stacked</code> hinzu.</p>
   <div class="bs-example">
     <ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 300px;">
-      <li class="active"><a href="#">Start</a></li>
-      <li><a href="#">Profil</a></li>
-      <li><a href="#">Nachrichten</a></li>
+      <li role="presentation" class="active"><a href="#">Start</a></li>
+      <li role="presentation"><a href="#">Profil</a></li>
+      <li role="presentation"><a href="#">Nachrichten</a></li>
     </ul>
   </div>
 {% highlight html %}
@@ -63,15 +63,15 @@ <h4>Safari und responsive Gleichsatz-Navs</h4>
   </div>
   <div class="bs-example">
     <ul class="nav nav-tabs nav-justified" role="tablist">
-      <li class="active"><a href="#">Start</a></li>
-      <li><a href="#">Profil</a></li>
-      <li><a href="#">Nachrichten</a></li>
+      <li role="presentation" class="active"><a href="#">Start</a></li>
+      <li role="presentation"><a href="#">Profil</a></li>
+      <li role="presentation"><a href="#">Nachrichten</a></li>
     </ul>
     <br>
     <ul class="nav nav-pills nav-justified" role="tablist">
-      <li class="active"><a href="#">Start</a></li>
-      <li><a href="#">Profil</a></li>
-      <li><a href="#">Nachrichten</a></li>
+      <li role="presentation" class="active"><a href="#">Start</a></li>
+      <li role="presentation"><a href="#">Profil</a></li>
+      <li role="presentation"><a href="#">Nachrichten</a></li>
     </ul>
   </div>
 {% highlight html %}
@@ -94,15 +94,15 @@ <h4>Link-Funktionalität nicht beeinträchtigt</h4>
 
   <div class="bs-example">
     <ul class="nav nav-pills" role="tablist">
-      <li><a href="#">Klick-barer Link</a></li>
-      <li><a href="#">Klick-barer Link</a></li>
-      <li class="disabled"><a href="#">Deaktivierter Link</a></li>
+      <li role="presentation"><a href="#">Klick-barer Link</a></li>
+      <li role="presentation"><a href="#">Klick-barer Link</a></li>
+      <li role="presentation" class="disabled"><a href="#">Deaktivierter Link</a></li>
     </ul>
   </div>
 {% highlight html %}
 <ul class="nav nav-pills" role="tablist">
   ...
-  <li class="disabled"><a href="#">Deaktivierter Link</a></li>
+  <li role="presentation" class="disabled"><a href="#">Deaktivierter Link</a></li>
   ...
 </ul>
 {% endhighlight %}
@@ -114,9 +114,9 @@ <h2 id="nav-dropdowns">Mit Dropdowns</h2>
   <h3>Tabs mit Dropdowns</h3>
   <div class="bs-example">
     <ul class="nav nav-tabs" role="tablist">
-      <li class="active"><a href="#">Start</a></li>
-      <li><a href="#">Hilfe</a></li>
-      <li class="dropdown">
+      <li role="presentation" class="active"><a href="#">Start</a></li>
+      <li role="presentation"><a href="#">Hilfe</a></li>
+      <li role="presentation" class="dropdown">
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">
           Dropdown-Menü <span class="caret"></span>
         </a>
@@ -133,7 +133,7 @@ <h3>Tabs mit Dropdowns</h3>
 {% highlight html %}
 <ul class="nav nav-tabs" role="tablist">
   ...
-  <li class="dropdown">
+  <li role="presentation" class="dropdown">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">
       Dropdown-Menü <span class="caret"></span>
     </a>
@@ -148,9 +148,9 @@ <h3>Tabs mit Dropdowns</h3>
   <h3>Pills mit Dropdowns</h3>
   <div class="bs-example">
     <ul class="nav nav-pills" role="tablist">
-      <li class="active"><a href="#">Start</a></li>
-      <li><a href="#">Hilfe</a></li>
-      <li class="dropdown">
+      <li role="presentation" class="active"><a href="#">Start</a></li>
+      <li role="presentation"><a href="#">Hilfe</a></li>
+      <li role="presentation"class="dropdown">
         <a class="dropdown-toggle" data-toggle="dropdown" href="#">
           Dropdown-Menü <span class="caret"></span>
         </a>
@@ -167,7 +167,7 @@ <h3>Pills mit Dropdowns</h3>
 {% highlight html %}
 <ul class="nav nav-pills" role="tablist">
   ...
-  <li class="dropdown">
+  <li role="presentation" class="dropdown">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">
       Dropdown-Menü <span class="caret"></span>
     </a>

diff --git a/_includes/components/progress-bars.html b/_includes/components/progress-bars.html
@@ -90,7 +90,7 @@ <h3 id="progress-alternatives">Kontext-Varianten</h3>
     </div>
     <div class="progress">
       <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
-        <span class="sr-only">80% abgeschlossen (Gefahr/Fehler)</span>
+        <span class="sr-only">80% abgeschlossen (Gefahr)</span>
       </div>
     </div>
   </div>
@@ -112,7 +112,7 @@ <h3 id="progress-alternatives">Kontext-Varianten</h3>
 </div>
 <div class="progress">
   <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
-    <span class="sr-only">80% abgeschlossen (Gefahr/Fehler)</span>
+    <span class="sr-only">80% abgeschlossen (Gefahr)</span>
   </div>
 </div>
 {% endhighlight %}
@@ -137,7 +137,7 @@ <h3 id="progress-striped">Gestreifte Variante</h3>
     </div>
     <div class="progress">
       <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
-        <span class="sr-only">80% abgeschlossen (Gefahr/Fehler)</span>
+        <span class="sr-only">80% abgeschlossen (Gefahr)</span>
       </div>
     </div>
   </div>
@@ -159,7 +159,7 @@ <h3 id="progress-striped">Gestreifte Variante</h3>
 </div>
 <div class="progress">
   <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
-    <span class="sr-only">80% abgeschlossen (Gefahr/Fehler)</span>
+    <span class="sr-only">80% abgeschlossen (Gefahr)</span>
   </div>
 </div>
 {% endhighlight %}
@@ -190,7 +190,7 @@ <h3 id="progress-stacked">Reihung</h3>
         <span class="sr-only">20% abgeschlossen (Warnung)</span>
       </div>
       <div class="progress-bar progress-bar-danger" style="width: 10%">
-        <span class="sr-only">10% abgeschlossen (Gefahr/Fehler)</span>
+        <span class="sr-only">10% abgeschlossen (Gefahr)</span>
       </div>
     </div>
   </div>
@@ -203,7 +203,7 @@ <h3 id="progress-stacked">Reihung</h3>
     <span class="sr-only">20% abgeschlossen (Warnung)</span>
   </div>
   <div class="progress-bar progress-bar-danger" style="width: 10%">
-    <span class="sr-only">10% abgeschlossen (Gefahr/Fehler)</span>
+    <span class="sr-only">10% abgeschlossen (Gefahr)</span>
   </div>
 </div>
 {% endhighlight %}

diff --git a/_includes/css/forms.html b/_includes/css/forms.html
@@ -588,6 +588,7 @@ <h2 id="forms-control-validation">Formular-Überprüfung</h2>
 
   <h3>Mit optionalen Icons</h3>
   <p>Du kannst optional außerdem passende Icons hinzufügen, indem du die Klasse <code>.has-feedback</code> und das richtige Icon ergänzt.</p>
+  <p><strong class="text-danger">Feedback-Icons funktionieren nur mit <code>&lt;input class="form-control"&gt;</code>-Elementen, in die man Text eingeben kann.</strong></p>
   <div class="bs-callout bs-callout-warning">
     <h4>Icons, Labels und Input-Gruppen</h4>
     <p>Die Feedback-Icons müssen manuell positioniert werden, wenn du sie mit Feldern ohne Label oder mit <a href="../komponenten#input-groups">Input-Gruppen</a> mit einem Add-on auf der rechten Seite verwendest. Es wird aus Gründen der Barrierefreiheit dringend empfohlen, Labels für alle Felder anzugeben. Falls du die Anzeige von Labels verhindern möchtest, verberge sie mit der Klasse <code>sr-only</code>. Falls du wirklich keine Labels einfügen kannst, musst du den Wert für <code>top</code> beim Feedback-Icon anpassen. Ändere bei Input-Grupen den Standard <code>right: 0;</code> zu einem sinnvollen Pixel-Wert, abhängig von der Breite deines Add-ons.</p>

diff --git a/_includes/getting-started/browser-device-support.html b/_includes/getting-started/browser-device-support.html
@@ -188,5 +188,5 @@ <h4>Auswahlmenüs</h4>
 })
 </script>
 {% endhighlight %}
-  <p>Willst du ein Beispiel sehen? <a href="http://jsbin.com/OyaqoDO/2">Sieh dir diese Demonstration in einem JS Bin an.</a></p>
+  <p>Willst du ein Beispiel sehen? <a href="http://jsbin.com/kuvoz/1">Sieh dir diese Demonstration in einem JS Bin an.</a></p>
 </div>
diff --git a/_includes/js/affix.html b/_includes/js/affix.html
@@ -31,14 +31,14 @@ <h3>Über Data-Attribute</h3>
   <h3>Über JavaScript</h3>
   <p>Ruf das Affix-Plugin über JavaScript auf:</p>
 {% highlight js %}
-  $('#mein-affix').affix({
-    offset: {
-      top: 100,
-      bottom: function () {
-        return (this.bottom = $('.footer').outerHeight(true))
-      }
+$('#mein-affix').affix({
+  offset: {
+    top: 100,
+    bottom: function () {
+      return (this.bottom = $('.footer').outerHeight(true))
     }
-  })
+  }
+})
 {% endhighlight %}
 
 
@@ -74,7 +74,7 @@ <h3>Optionen</h3>
 
 
   <h3>Ereignisse</h3>
-  <p>Bootstraps Affix-Klassen legen einige Ereignisse offen, über die du dich in Affix-Funktionen einklinken kannst.</p>
+  <p>Bootstraps Affix-Plugin legt einige Ereignisse offen, über die du dich in Affix-Funktionen einklinken kannst.</p>
   <div class="table-responsive">
     <table class="table table-bordered table-striped">
       <thead>