Upstream-Änderungen und Korrekturen

Nächster Stapel: twbs/bootstrap@7f35966...master

Korrigiert einige Tippfehler, bei denen Elemente falsch oder zu häufig geschlossen wurden.

README.md

@@ -66,9 +66,10 @@ Bootstraps Dokumentation, die du in diesem Repository als Übersetzung findest,
 ### Dokumentation lokal ausführen
 
 1. Falls notwendig, [installiere Jekyll](http://jekyllrb.com/docs/installation) (benötigt wird v2.1.x).
-  - **Windows-Nutzer:** Lies [diesen unoffiziellen Ratgeber](https://github.com/juthilo/run-jekyll-on-windows/), um Jekyll ohne Probleme zum Laufen zu kriegen. Wir verwenden Pygments, um Code-Schnipsel zu gestalten und hervorzuheben, lies also unbedingt auch die Abschnitte zur Installation von Python und Pygments.
-2. Öffne eine Befehlszeile im Wurzelverzeichnis `/bootstrap` und führe `jekyll serve` aus.
-3. Öffne die Dokumentation in deinem Browser über <http://localhost:10006> (Übersetzung) bzw. <http://localhost:9001> (Original) und fertig!
+  - **Windows-Nutzer:** Lies [diesen unoffiziellen Ratgeber](https://github.com/juthilo/run-jekyll-on-windows/), um Jekyll ohne Probleme zum Laufen zu kriegen.
+2. Installiere das Ruby-basierte [Rouge](https://github.com/jneen/rouge), das wir zum Hervorheben und Gestalten von Code-Schnipseln verwenden, mit `gem install rouge`.
+3. Öffne eine Befehlszeile im Wurzelverzeichnis `/bootstrap` und führe `jekyll serve` aus.
+4. Öffne die Dokumentation in deinem Browser über <http://localhost:10006> (Übersetzung) bzw. <http://localhost:9001> (Original) und fertig!
 
 Erfahre mehr über den Umgang mit Jekyll, indem du dessen [Dokumentation](http://jekyllrb.com/docs/home/) liest.
 

_config.yml

@@ -1,6 +1,6 @@
 # Dependencies
 markdown:         kramdown
-highlighter:      pygments
+highlighter:      rouge
 
 # Permalinks
 permalink:        pretty

_includes/components/badges.html

@@ -21,13 +21,13 @@ <h4>Browser-Kompatibilität</h4>
   <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">
+    <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>
     </ul>
     <br>
-    <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
+    <ul class="nav nav-pills nav-stacked" role="tablist" style="max-width: 260px;">
       <li class="active">
         <a href="#">
           <span class="badge pull-right">42</span>
@@ -48,7 +48,7 @@ <h4>Passt sich der aktiven Ansicht in Navs an</h4>
     </button>
   </div>
 {% highlight html %}
-<ul class="nav nav-pills nav-stacked">
+<ul class="nav nav-pills nav-stacked" role="tablist">
   <li class="active">
     <a href="#">
       <span class="badge pull-right">42</span>

_includes/components/navs.html

@@ -27,29 +27,29 @@ <h4>Benötigt das JavaScript-Tabs-Plugin</h4>
   <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">
+    <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>
     </ul>
   </div>
 {% highlight html %}
-<ul class="nav nav-pills">
+<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>
 </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" style="max-width: 300px;">
+    <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>
     </ul>
   </div>
 {% highlight html %}
-<ul class="nav nav-pills nav-stacked">
+<ul class="nav nav-pills nav-stacked" role="tablist">
   ...
 </ul>
 {% endhighlight %}
@@ -68,7 +68,7 @@ <h4>Safari und responsive Gleichsatz-Navs</h4>
       <li><a href="#">Nachrichten</a></li>
     </ul>
     <br>
-    <ul class="nav nav-pills nav-justified">
+    <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>
@@ -78,7 +78,7 @@ <h4>Safari und responsive Gleichsatz-Navs</h4>
 <ul class="nav nav-tabs nav-justified" role="tablist">
   ...
 </ul>
-<ul class="nav nav-pills nav-justified">
+<ul class="nav nav-pills nav-justified" role="tablist">
   ...
 </ul>
 {% endhighlight %}
@@ -93,14 +93,14 @@ <h4>Link-Funktionalität nicht beeinträchtigt</h4>
   </div>
 
   <div class="bs-example">
-    <ul class="nav nav-pills">
+    <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>
     </ul>
   </div>
 {% highlight html %}
-<ul class="nav nav-pills">
+<ul class="nav nav-pills" role="tablist">
   ...
   <li class="disabled"><a href="#">Deaktivierter Link</a></li>
   ...
@@ -147,7 +147,7 @@ <h3>Tabs mit Dropdowns</h3>
 
   <h3>Pills mit Dropdowns</h3>
   <div class="bs-example">
-    <ul class="nav nav-pills">
+    <ul class="nav nav-pills" role="tablist">
       <li class="active"><a href="#">Start</a></li>
       <li><a href="#">Hilfe</a></li>
       <li class="dropdown">
@@ -165,7 +165,7 @@ <h3>Pills mit Dropdowns</h3>
     </ul>
   </div><!-- /example -->
 {% highlight html %}
-<ul class="nav nav-pills">
+<ul class="nav nav-pills" role="tablist">
   ...
   <li class="dropdown">
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">

_includes/css/forms.html

@@ -49,17 +49,17 @@ <h2 id="forms-example">Einfaches Beispiel</h2>
   <button type="submit" class="btn btn-default">Abschicken</button>
 </form>
 {% endhighlight %}
-    <div class="bs-callout bs-callout-warning">
-      <h4>Vermische niemals Formular-Gruppen mit Input-Gruppen</h4>
-      <p>Du solltest Formular-Gruppen (<code>.form-group</code>) nicht direkt mit <a href="/komponenten/#input-groups">Input-Gruppen</a> kombinieren. Ordne die Input-Gruppe stattdessen der Formular-Gruppe unter.</p>
-    </div>
+  <div class="bs-callout bs-callout-warning">
+    <h4>Vermische niemals Formular-Gruppen mit Input-Gruppen</h4>
+    <p>Du solltest Formular-Gruppen (<code>.form-group</code>) nicht direkt mit <a href="/komponenten/#input-groups">Input-Gruppen</a> kombinieren. Ordne die Input-Gruppe stattdessen der Formular-Gruppe unter.</p>
+  </div>
 
 
   <h2 id="forms-inline">Formular in einer Zeile</h2>
   <p>Füge <code>.form-inline</code> zu deinem <code>&lt;form&gt;</code> hinzu, um die Felder links in einer Reihe auszurichten (inline-block). <strong>Dies hat nur Auswirkungen auf Formular auf Anzeigefenstern, die mindestens 768px breit sind.</strong></p>
   <div class="bs-callout bs-callout-danger">
     <h4>Benötigt manuelle Breiten</h4>
-    <p>Eingabefelder, Auswahlfelder und Text-Flächen sind in Bootstrap standardmäßig 100% breit. Um das Inline-Formular zu verwenden, musst du daher manuell eine feste Breite für die darin enthaltenen Formularfelder definieren.</p>
+    <p>Eingabefelder und Auswahlfelder sind in Bootstrap standardmäßig mit <code>width: 100%</code> versehen. In Inline-Formularen setzen wir das auf <code>width: auto</code> zurück, damit mehrere Felder in der gleichen Zeile sein können. Abhängig von deinem Layout sind eventuell zusätzliche, manuelle Breiten notwendig.</p>
   </div>
   <div class="bs-callout bs-callout-warning">
     <h4>Füge immer Labels hinzu</h4>

_includes/css/helpers.html

@@ -51,7 +51,7 @@ <h3 id="helper-classes-close">Schließen-Symbol</h3>
     <p><button type="button" class="close" aria-hidden="true"><span aria-hidden="true">&times;</span><span class="sr-only">Schließen</span></button></p>
   </div>
 {% highlight html %}
-<button type="button" class="close" aria-hidden="true"><span aria-hidden="true">&times;</span><span class="sr-only">Schließen</span></button></p>
+<button type="button" class="close" aria-hidden="true"><span aria-hidden="true">&times;</span><span class="sr-only">Schließen</span></button>
 {% endhighlight %}
 
 

_includes/css/images.html

@@ -1,8 +1,12 @@
 <div class="bs-docs-section">
   <h1 id="images" class="page-header">Bilder</h1>
 
-  <h2 id="images-responsive">Responsive Bilder</h3>
+  <h2 id="images-responsive">Responsive Bilder</h2>
   <p>Bilder in Bootstrap 3 können sich automatisch dem Bildschirm anpassen, wenn du die Klasse <code>.img-responsive</code> hinzufügst. Diese wendet <code>max-width: 100%;</code> und <code>height: auto;</code> auf das Bild an, so dass es sich wunderbar dem übergeordneten Element anpasst.</p>
+  <div class="bs-callout bs-callout-warning">
+    <h4>SVG-Bilder und IE 8-10</h4>
+    <p>In Internet Explorer 8-10 werden SVG-Bilder mit <code>.img-responsive</code> in einem falschen Seitenverhältnis angezeigt. Um dies zu beheben, kannst du bei Bedarf <code>width: 100% \9;</code> verwenden. Bootstrap wendet dies nicht automatisch an, da es Komplikationen bei anderen Bild-Formaten verursacht.</p>
+  </div>
 {% highlight html %}
 <img src="..." class="img-responsive" alt="Responsives Bild">
 {% endhighlight %}

_includes/footer.html

@@ -42,8 +42,18 @@
 ================================================== -->
 <!-- Am Ende des Dokuments platziert, damit Seiten schneller laden -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+{% if site.github %}
 <script src="../dist/js/bootstrap.min.js"></script>
-<script src="../assets/js/docs.min.js"></script>
+{% else %}
+<script src="../dist/js/bootstrap.js"></script>
+{% endif %}
+{% if site.github %}
+  <script src="../assets/js/docs.min.js"></script>
+{% else %}
+<script src="../assets/js/vendor/holder.js"></script>
+<script src="../assets/js/vendor/ZeroClipboard.min.js"></script>
+<script src="../assets/js/src/application.js"></script>
+{% endif %}
 
 {% comment %}
   Twitter-Widgets asynchron einbinden. Code von Twitters

_includes/header.html

@@ -12,22 +12,35 @@
 {% endif %}
 
 <title>
-  {% if page.title == "Bootstrap" %}
-    {{ page.title }} (deutsch)
+  {% if page.url == site.baseurl %}
+    {{ page.title }}
   {% else %}
     {{ page.title }} &middot; Bootstrap (deutsch)
   {% endif %}
 </title>
 
 <!-- Bootstrap CSS -->
+{% if site.github %}
 <link href="../dist/css/bootstrap.min.css" rel="stylesheet">
+{% else %}
+<link href="../dist/css/bootstrap.css" rel="stylesheet">
+{% endif %}
 {% if page.slug == "css" or page.slug == "components" or page.slug == "js" %}
   <!-- Optionales Bootstrap-Theme -->
+{% if site.github %}
   <link href="data:text/css;charset=utf-8," data-href="../dist/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">
+{% else %}
+  <link href="data:text/css;charset=utf-8," data-href="../dist/css/bootstrap-theme.css" rel="stylesheet" id="bs-theme-stylesheet">
+{% endif %}
 {% endif %}
 
 <!-- Stile für die Dokumentation -->
+{% if site.github %}
 <link href="../assets/css/docs.min.css" rel="stylesheet">
+{% else %}
+<link href="../assets/css/src/docs.css" rel="stylesheet">
+<link href="../assets/css/src/pygments-manni.css" rel="stylesheet">
+{% endif %}
 <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
 <!-- IE10-Anzeigefenster-Hack für Fehler auf Surface und Desktop-Windows-8 -->
 <script src="../assets/js/ie10-viewport-bug-workaround.js"></script>

_includes/js/carousel.html

@@ -10,7 +10,7 @@ <h2 id="carousel-examples">Beispiele</h2>
         <li data-target="#carousel-example-generic" data-slide-to="1"></li>
         <li data-target="#carousel-example-generic" data-slide-to="2"></li>
       </ol>
-      <div class="carousel-inner">
+      <div class="carousel-inner" role="listbox">
         <div class="item active">
           <img data-src="holder.js/900x500/auto/#777:#555/text:Erste Folie" alt="First Folie">
         </div>
@@ -23,9 +23,11 @@ <h2 id="carousel-examples">Beispiele</h2>
       </div>
       <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
         <span class="glyphicon glyphicon-chevron-left"></span>
+        <span class="sr-only">Zurück</span>
       </a>
       <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
         <span class="glyphicon glyphicon-chevron-right"></span>
+        <span class="sr-only">Weiter</span>
       </a>
     </div>
   </div><!-- /example -->
@@ -39,7 +41,7 @@ <h2 id="carousel-examples">Beispiele</h2>
   </ol>
 
   <!-- Verpackung für die Elemente -->
-  <div class="carousel-inner">
+  <div class="carousel-inner" role="listbox">
     <div class="item active">
       <img src="..." alt="...">
       <div class="carousel-caption">
@@ -58,9 +60,11 @@ <h2 id="carousel-examples">Beispiele</h2>
   <!-- Schalter -->
   <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
     <span class="glyphicon glyphicon-chevron-left"></span>
+    <span class="sr-only">Zurück</span>
   </a>
   <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
     <span class="glyphicon glyphicon-chevron-right"></span>
+    <span class="sr-only">Weiter</span>
   </a>
 </div>
 {% endhighlight %}
@@ -79,7 +83,7 @@ <h3>Optionale Untertitel</h3>
         <li data-target="#carousel-example-captions" data-slide-to="1"></li>
         <li data-target="#carousel-example-captions" data-slide-to="2"></li>
       </ol>
-      <div class="carousel-inner">
+      <div class="carousel-inner" role="listbox">
         <div class="item active">
           <img data-src="holder.js/900x500/auto/#777:#777" alt="Bild für erste Folie">
           <div class="carousel-caption">
@@ -104,9 +108,11 @@ <h3>Titel für dritte Folie</h3>
       </div>
       <a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev">
         <span class="glyphicon glyphicon-chevron-left"></span>
+        <span class="sr-only">Zurück</span>
       </a>
       <a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next">
         <span class="glyphicon glyphicon-chevron-right"></span>
+        <span class="sr-only">Weiter</span>
       </a>
     </div>
   </div><!-- /example -->

_includes/js/dropdowns.html

@@ -59,7 +59,7 @@ <h3>In einer Navbar</h3>
 
   <h3>In Pills-Navs</h3>
   <div class="bs-example">
-    <ul class="nav nav-pills">
+    <ul class="nav nav-pills" role="tablist">
       <li class="active"><a href="#">Regulärer Link</a></li>
       <li class="dropdown">
         <a id="drop4" role="button" data-toggle="dropdown" href="#">Dropdown-Menü <span class="caret"></span></a>

_includes/js/modal.html

@@ -180,7 +180,7 @@ <h2 id="modals-sizes">Größen</h2>
 
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Schließen</span></button>
-          <h4 class="modal-title" id="meinLargeModalLabel">Großes Modal</h4>
+          <h4 class="modal-title" id="meinGroßesModalLabel">Großes Modal</h4>
         </div>
         <div class="modal-body">
           ...
@@ -194,7 +194,7 @@ <h4 class="modal-title" id="meinLargeModalLabel">Großes Modal</h4>
 
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Schließen</span></button>
-          <h4 class="modal-title" id="meinSmallModalLabel">Kleines Modal</h4>
+          <h4 class="modal-title" id="meinKleinesModalLabel">Kleines Modal</h4>
         </div>
         <div class="modal-body">
           ...

_includes/js/popovers.html

@@ -66,7 +66,7 @@ <h3 class="popover-title">Popover links</h3>
 
   <h3>Live-Ansicht</h3>
   <div class="bs-example" style="padding-bottom: 24px;">
-    <button type="button" class="btn btn-lg btn-danger bs-docs-popover" data-toggle="popover" title="Popover-Titel" data-content="Und ein bisschen Inhalt. Ganz schön faszinierend, oder?">Popover anzeigen</a>
+    <button type="button" class="btn btn-lg btn-danger bs-docs-popover" data-toggle="popover" title="Popover-Titel" data-content="Und ein bisschen Inhalt. Ganz schön faszinierend, oder?">Popover anzeigen</button>
   </div>
 {% highlight html %}
 <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover-Titel" data-content="Und ein bisschen Inhalt. Ganz schön faszinierend, oder?">Popover anzeigen</button>

_includes/nav/main.html

@@ -31,7 +31,7 @@
         <li><a href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'click', 'Expo')">Expo</a></li>
         <li><a href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'click', 'Blog')">Blog</a></li>
         <li class="visible-sm"><a href="../impressum" onclick="ga('send', 'event', 'Navbar', 'click', 'Umschlag')" title="Kontakt / Impressum"><span class="glyphicon glyphicon-envelope"></span></a></li>
-        <li class="hidden-sm"><a href="../impressum" onclick="ga('send', 'event', 'Navbar', 'click', 'Kontakt / Impressum')">Kontakt / Impressum</span></a></li>
+        <li class="hidden-sm"><a href="../impressum" onclick="ga('send', 'event', 'Navbar', 'click', 'Kontakt / Impressum')">Kontakt / Impressum</a></li>
       </ul>
     </nav>
   </div>