Remaining updates for v3.4.1

New version

.gitignore

@@ -29,8 +29,6 @@ _site
 nbproject
 Thumbs.db
 
-*.lock
-
 # Komodo
 .komodotools
 *.komodoproject

CONTRIBUTING.md

@@ -265,7 +265,7 @@ Projekteigentümern, deine Arbeit unter den Bedingungen der
 [Befolge die Regeln aus dem Code Guide.](https://codeguide.co/#html)
 
 - Wenn es nicht all zu umständlich ist, sollten Standard-Farbpaletten den [WCAG-Richtlinien für Farbkontrast](https://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](https://a11yproject.com/posts/never-remove-css-outlines/) für mehr Informationen.
+- 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](https://a11yproject.com/posts/never-remove-css-outlines) für mehr Informationen.
 
 ### JS
 

Gemfile.lock

@@ -0,0 +1,69 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.8.0)
+      public_suffix (>= 2.0.2, < 5.0)
+    colorator (1.1.0)
+    concurrent-ruby (1.1.10)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    eventmachine (1.2.7-x64-mingw32)
+    ffi (1.15.5-x64-mingw32)
+    forwardable-extended (2.6.0)
+    http_parser.rb (0.8.0)
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    jekyll (3.8.7)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 0.7)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 1.14)
+      liquid (~> 4.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (>= 1.7, < 4)
+      safe_yaml (~> 1.0)
+    jekyll-redirect-from (0.14.0)
+      jekyll (~> 3.3)
+    jekyll-sass-converter (1.5.2)
+      sass (~> 3.4)
+    jekyll-sitemap (1.2.0)
+      jekyll (~> 3.3)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (1.17.0)
+    liquid (4.0.3)
+    listen (3.7.1)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    mercenary (0.3.6)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (4.0.6)
+    rb-fsevent (0.11.1)
+    rb-inotify (0.10.1)
+      ffi (~> 1.0)
+    rouge (3.28.0)
+    safe_yaml (1.0.5)
+    sass (3.7.4)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+    wdm (0.1.1)
+
+PLATFORMS
+  x64-mingw32
+
+DEPENDENCIES
+  jekyll (~> 3.8.5)
+  jekyll-redirect-from (~> 0.14.0)
+  jekyll-sitemap (~> 1.2.0)
+  wdm (~> 0.1.1)
+
+BUNDLED WITH
+   1.17.3

README.md

@@ -17,6 +17,7 @@ Um direkt loszulegen, geh auf <https://holdirbootstrap.de/>!
 * [Mitmachen](#mitmachen)
 * [Community](#community)
 * [Versionen](#versionen)
+* [Dank](#dank)
 * [Erfinder](#erfinder)
 * [Copyright und Lizenz](#copyright-und-lizenz)
 
@@ -27,7 +28,7 @@ Es sind einige Optionen verfügbar, um direkt loszulegen:
 * [Neueste Version herunterladen](https://github.com/twbs/bootstrap/archive/v3.4.1.zip).
 * Repository klonen: `git clone https://github.com/twbs/bootstrap.git`.
 * Mit [Bower](https://bower.io) installieren: `bower install bootstrap`.
-* Mit [npm](https://www.npmjs.com) installieren: `npm install bootstrap`.
+* Mit [npm](https://www.npmjs.com) installieren: `npm install bootstrap@3`.
 * Mit [Meteor](https://www.meteor.com/) installieren: `meteor add twbs:bootstrap`.
 * Mit [Composer](https://getcomposer.org) installieren: `composer require twbs/bootstrap`.
 
@@ -43,9 +44,11 @@ bootstrap/
 │   ├── 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
+│   └── bootstrap-theme.min.css.map
 ├── js/
 │   ├── bootstrap.js
 │   └── bootstrap.min.js
@@ -140,4 +143,4 @@ Danke an [BrowserStack](https://www.browserstack.com/) für die Bereitstellung d
 
 ## Copyright und Lizenz
 
-Code und Dokumentation Copyright 2011-2019 Twitter, Inc. Code freigegeben unter [der MIT-Lizenz](https://github.com/twbs/bootstrap/blob/master/LICENSE). Dokumentation freigegeben unter den Bedingungen von [Creative Commons](LICENSE).
+Code und Dokumentation Copyright 2011-2022 Twitter, Inc. Code freigegeben unter [der MIT-Lizenz](https://github.com/twbs/bootstrap/blob/master/LICENSE). Dokumentation freigegeben unter den Bedingungen von [Creative Commons](LICENSE).

_includes/components/button-groups.html

@@ -25,7 +25,7 @@ <h2 id="btn-groups-single">Einfaches Beispiel</h2>
     </div>
   </div>
 {% highlight html %}
-<div class="btn-group">
+<div class="btn-group" role="group" aria-label="...">
   <button type="button" class="btn btn-default">Links</button>
   <button type="button" class="btn btn-default">Mitte</button>
   <button type="button" class="btn btn-default">Rechts</button>

_includes/components/glyphicons.html

@@ -2,7 +2,7 @@
   <h1 id="glyphicons" class="page-header">Glyphicons</h1>
 
   <h2 id="glyphicons-glyphs">Verfügbare Icons</h2>
-  <p>Dabei sind mehr als 250 Icons in Form einer Schriftart aus den Glyphicons Halflings. <a href="https://glyphicons.com/">Glyphicons</a> Halflings sind normalerweise nicht kostenlos erhältlich, aber ihr Erfinder hat sie für Bootstrap gratis verfügbar gemacht. Als Dankeschön bitten wir dich nur, wo immer möglich einen Link zu den <a href="https://glyphicons.com/">Glyphicons</a> einzubinden.</p>
+  <p>Dabei sind mehr als 250 Icons in Form einer Schriftart aus den Glyphicons Halflings. <a href="https://www.glyphicons.com/">Glyphicons</a> Halflings sind normalerweise nicht kostenlos erhältlich, aber ihr Erfinder hat sie für Bootstrap gratis verfügbar gemacht. Als Dankeschön bitten wir dich nur, wo immer möglich einen Link zu den <a href="https://www.glyphicons.com/">Glyphicons</a> einzubinden.</p>
   <div class="bs-glyphicons">
     <ul class="bs-glyphicons-list">
       {% for iconClassName in site.data.glyphicons %}

_includes/components/media.html

@@ -104,7 +104,7 @@ <h4 class="media-heading">Oben ausgerichtet</h4>
         </a>
       </div>
       <div class="media-body">
-        <h4 class="media-heading">Mittig ausgerichtet</h4>
+        <h4 class="media-heading">Mittig ausgerichtet (media-middle)</h4>
         <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
         <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
       </div>
@@ -116,7 +116,7 @@ <h4 class="media-heading">Mittig ausgerichtet</h4>
         </a>
       </div>
       <div class="media-body">
-        <h4 class="media-heading">Unten ausgerichtet</h4>
+        <h4 class="media-heading">Unten ausgerichtet (media-bottom)</h4>
         <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
         <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
       </div>

_includes/components/page-header.html

@@ -1,7 +1,7 @@
 <div class="bs-docs-section">
   <h1 id="page-header" class="page-header">Seiten-Überschrift</h1>
 
-  <p>Eine einfache Hülle, um ein <code>h1</code> für angemessenen Abstand zwischen Abschnitten auf einer Seite zu verwenden. Sie kann das normale <code>small</code>-Element des <code>h1</code>, sowie die meisten anderen Komponenten (mit zusätzlichen Stilen) enthalten.</p>
+  <p>Eine einfache Hülle, um ein <code>h1</code> für angemessenen Abstand zwischen Abschnitten auf einer Seite zu verwenden. Sie kann das normale <code>small</code>-Element des <code>h1</code> sowie die meisten anderen Komponenten (mit zusätzlichen Stilen) enthalten.</p>
   <div class="bs-example" data-example-id="simple-page-header">
     <div class="page-header">
       <h1>Beispiel-Seiten-Überschrift <small>Untertitel</small></h1>

_includes/components/panels.html

@@ -128,8 +128,8 @@ <h3 class="panel-title">Panel-Titel</h3>
 <div class="panel panel-danger">...</div>
 {% endhighlight %}
 
-  <h2 id="panels-tables">Mit Tabellen</h3>
-  <p>Füge irgendeine <code>.table</code> ohne Rahmen direkt in ein Panel ein und sie wird nahtlos eingebunden. Falls einen <code>.panel-body</code> gibt, fügen wir eine zusätzliche Rahmengrenze oben an der Tabelle hinzu, damit die verschiedenen Teile gut voneinander zu unterscheiden sind.</p>
+  <h2 id="panels-tables">Mit Tabellen</h2>
+  <p>Füge irgendeine <code>.table</code> ohne Rahmen direkt in ein Panel ein und sie wird nahtlos eingebunden. Falls es einen <code>.panel-body</code> gibt, fügen wir eine zusätzliche Rahmengrenze oben an der Tabelle hinzu, damit die verschiedenen Teile gut voneinander zu unterscheiden sind.</p>
   <div class="bs-example" data-example-id="table-within-panel">
     <div class="panel panel-default">
       <!-- Standard-Panel-Inhalt -->

_includes/css/buttons.html

@@ -32,7 +32,6 @@ <h4>Cross-Browser-Kompatibilität</h4>
     <p>Unter anderem gibt es <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">einen Bug in Firefox &lt;30</a>, der uns daran hindert, die <code>line-height</code> von Buttons, die auf <code>&lt;input&gt;</code> basieren, zu setzen, was dazu führt, dass sie nicht die exakt gleiche Höhe wie andere Buttons in Firefox haben.</p>
   </div>
 
-
   <h2 id="buttons-options">Optionen</h2>
   <p>Verwende irgendwelche der verfügbaren Button-Klassen, um ganz schnell einen schön gestalteten Button zu erstellen.</p>
   <div class="bs-example" data-example-id="btn-variants">

_includes/css/forms.html

@@ -256,7 +256,7 @@ <h3>Text-Fläche</h3>
 
   <h3>Optionsfelder</h3>
   <p>Felder zum Ankreuzen (checkbox) sind dazu da, eine oder mehr Optionen aus einer Liste auszuwählen, während man mit runden Optionsfeldern (radio) eine von mehrere Optionen auswählt.</p>
-  <p>Eine Checkbox oder ein Radio-Button mit dem Attribut <code>disabled</code> wird als deaktiviert gestaltet. Damit auch beim <code>&lt;label&gt;</code> für das entsprechende Feld ein "not-allowed"-Cursor angezeigt wird, wenn der Nutzer den Mauszeiger darüber hält, füge die Klasse <code>.disabled</code> zu deinen Elementen mit den Klassen <code>.radio</code>, <code>.radio-inline</code>, <code>.checkbox</code> oder <code>.checkbox-inline</code> oder zu einem <code>&lt;fieldset&gt;</code> hinzu.</p>
+  <p>Deaktivierte Checkboxes und Radios werden unterstützt, aber um einen "not-allowed"-Cursor anzuzeigen, wenn der Mauszeiger über dem <code>&lt;label&gt;</code> ist, musst du die Klasse <code>disabled</code> zu dem übergeordneten Element <code>.radio</code>, <code>.radio-inline</code>, <code>.checkbox</code> oder <code>.checkbox-inline</code> hinzufügen.</p>
   <h4>Standard (übereinander)</h4>
   <div class="bs-example" data-example-id="block-checkboxes-radios">
     <form>
@@ -609,6 +609,29 @@ <h2 id="forms-control-readonly">Nur-Lesen-Ansicht</h2>
 {% endhighlight %}
 
 
+  <h2 id="forms-help-text">Hilfe-Text</h2>
+  <p>Füge Textblöcke mit Hilfetexten für Formularfelder hinzu.</p>
+  <div class="bs-callout bs-callout-info" id="callout-help-text-accessibility">
+    <h4>Hilfe-Text mit Formularelementen assoziieren</h4>
+    <p>Hilfe-Text sollte mit dem Attribut <code>aria-describedby</code> ausdrücklich mit dem Formularelement assoziiert werden, auf das er sich bezieht. Dies stellt sicher, dass assistive Technologien wie Screenreader den Hilfe-Text vorlesen, wenn Nutzer das Element fokussieren oder hineingehen.</p>
+  </div>
+  <div class="bs-example" data-example-id="simple-help-text">
+    <form>
+      <div class="form-group">
+        <label for="eingabefeldHilfeText">Eingabefeld mit Hilfe-Text</label>
+        <input type="text" id="eingabefeldHilfeText" class="form-control" aria-describedby="hilfeText">
+      </div>
+      <span id="hilfeText" class="help-block">Ein Block mit hilfreichem Text, der mehr als eine Zeile lang sein darf und bei Bedarf umbricht.</span>
+    </form>
+  </div><!-- /.bs-example -->
+{% highlight html %}
+<label for="eingabefeldHilfeText">Eingabefeld mit Hilfe-Text</label>
+<input type="text" id="eingabefeldHilfeText" class="form-control" aria-describedby="hilfeText">
+...
+<span id="hilfeText" class="help-block">Ein Block mit hilfreichem Text, der mehr als eine Zeile lang sein darf und bei Bedarf umbricht.</span>
+{% endhighlight %}
+
+
     <h2 id="forms-control-validation">Formular-Überprüfung</h2>
   <p>Bootstrap beinhaltet Stile für Fehler-, Warnung- und Erfolg-Rückmeldungen bei Formularfeldern. Um sie zu verwenden, füge <code>.has-warning</code>, <code>.has-error</code> oder <code>.has-success</code> zum übergeordneten Element hinzu. Alle <code>.control-label</code>, <code>.form-control</code> und <code>.help-block</code> in diesem Element werden dann die Rückmeldungs-Stile erhalten.</p>
 
@@ -622,7 +645,8 @@ <h4>Validierungsstatus an assistive Technologien und farbenblinde Nutzer vermitt
     <form>
       <div class="form-group has-success">
         <label class="control-label" for="eingabefeldErfolg1">Feld mit Erfolg</label>
-        <input type="text" class="form-control" id="eingabefeldErfolg1">
+        <input type="text" class="form-control" id="eingabefeldErfolg1" aria-describedby="hilfeBlock2">
+        <span id="hilfeBlock2" class="help-block">Ein Block mit hilfreichem Text, der mehr als eine Zeile lang sein darf und bei Bedarf umbricht.</span>
       </div>
       <div class="form-group has-warning">
         <label class="control-label" for="eingabefeldWarnung1">Feld mit Warnung</label>
@@ -661,7 +685,8 @@ <h4>Validierungsstatus an assistive Technologien und farbenblinde Nutzer vermitt
 {% highlight html %}
 <div class="form-group has-success">
   <label class="control-label" for="eingabefeldErfolg1">Feld mit Erfolg</label>
-  <input type="text" class="form-control" id="eingabefeldErfolg1">
+  <input type="text" class="form-control" id="eingabefeldErfolg1" aria-describedby="hilfeBlock2">
+  <span id="hilfeBlock2" class="help-block">Ein Block mit hilfreichem Text, der mehr als eine Zeile lang sein darf und bei Bedarf umbricht.</span>
 </div>
 <div class="form-group has-warning">
   <label class="control-label" for="eingabefeldWarnung1">Feld mit Warnung</label>
@@ -999,27 +1024,5 @@ <h3>Breitenveränderung mit Spalten</h3>
     <input type="text" class="form-control" placeholder=".col-xs-4">
   </div>
 </div>
-{% endhighlight %}
-
-  <h2 id="forms-help-text">Hilfe-Text</h2>
-  <p>Füge Textblöcke mit Hilfetexten für Formularfelder hinzu.</p>
-  <div class="bs-callout bs-callout-info" id="callout-help-text-accessibility">
-    <h4>Hilfe-Text mit Formularelementen assoziieren</h4>
-    <p>Hilfe-Text sollte mit dem Attribut <code>aria-describedby</code> ausdrücklich mit dem Formularelement assoziiert werden, auf das er sich bezieht. Dies stellt sicher, dass assistive Technologien wie Screenreader den Hilfe-Text vorlesen, wenn Nutzer das Element fokussieren oder hineingehen.</p>
-  </div>
-  <div class="bs-example" data-example-id="simple-help-text">
-    <form>
-      <div class="form-group">
-        <label for="eingabefeldHilfeText">Eingabefeld mit Hilfe-Text</label>
-        <input type="text" id="eingabefeldHilfeText" class="form-control" aria-describedby="hilfeText">
-      </div>
-      <span id="hilfeText" class="help-block">Ein Block mit hilfreichem Text, der mehr als eine Zeile lang sein darf und bei Bedarf umbricht.</span>
-    </form>
-  </div><!-- /.bs-example -->
-{% highlight html %}
-<label class="sr-only" for="eingabefeldHilfeText">Eingabefeld mit Hilfe-Text</label>
-<input type="text" id="eingabefeldHilfeText" class="form-control" aria-describedby="hilfeText">
-...
-<span id="hilfeText" class="help-block">Ein Block mit hilfreichem Text, der mehr als eine Zeile lang sein darf und bei Bedarf umbricht.</span>
 {% endhighlight %}
 </div>