Permalink
Browse files

Upstream-Änderungen

  • Loading branch information...
1 parent 7b0584c commit 41116b7a3f2943fb74e4e46d4ef7a9e866c6329d @juthilo committed Oct 28, 2014
@@ -3,6 +3,11 @@
description: Bootstrap 中文文档
url: http://v3.bootcss.com/
+- name: Dänisch
+ code: da
+ description: Bootstrap på Dansk
+ url: http://getbootstrap.dk/
+
- name: Französisch
code: fr
description: Bootstrap en Français
@@ -15,7 +15,6 @@ <h3 id="dropdowns-example">Beispiel</h3>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Aktion</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Andere Aktion</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Irgendwas anderes</a></li>
- <li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Abgetrennter Link</a></li>
</ul>
</div>
@@ -30,7 +29,6 @@ <h3 id="dropdowns-example">Beispiel</h3>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Aktion</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Andere Aktion</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Irgendwas anderes</a></li>
- <li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Abgetrennter Link</a></li>
</ul>
</div>
@@ -65,18 +63,40 @@ <h3 id="dropdowns-headers">Überschriften</h3>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Aktion</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Andere Aktion</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Irgendwas anderes</a></li>
- <li role="presentation" class="divider"></li>
<li role="presentation" class="dropdown-header">Dropdown-Überschrift</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Abgetrennter Link</a></li>
</ul>
</div>
</div><!-- /example -->
{% highlight html %}
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
+ ...
<li role="presentation" class="dropdown-header">Dropdown-Überschrift</li>
...
+</ul>
+{% endhighlight %}
+
+ <h3 id="dropdowns-divider">Trennstrich</h3>
+ <p>Füge einen Trennstrich hinzu, um eine Reihe von Links in einem Dropdown-Menü abzutrennen.</p>
+ <div class="bs-example">
+ <div class="dropdown clearfix">
+ <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenuDivider" data-toggle="dropdown">
+ Dropdown-Menü
+ <span class="caret"></span>
+ </button>
+ <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Aktion</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Andere Aktion</a></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Irgendwas anderes</a></li>
+ <li role="presentation" class="divider"></li>
+ <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Abgetrennter Link</a></li>
+ </ul>
+ </div>
+ </div><!-- /example -->
+{% highlight html %}
+<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuDivider">
+ ...
<li role="presentation" class="divider"></li>
- <li role="presentation" class="dropdown-header">Dropdown-Überschrift</li>
...
</ul>
{% endhighlight %}
@@ -4,27 +4,27 @@ <h1 id="media" class="page-header">Medien-Objekt</h1>
<p class="lead">Abstrakte Stile für Objekte, mit denen du verschiedene Komponenten (wie Blog-Kommentare, Tweets, usw.) erstellen kannst, die ein links oder rechts ausgerichtetes Bild neben Text-Inhalt enthalten.</p>
<h3 id="media-default">Standard-Medien-Objekte</h3>
- <p>Die normalen Medien-Objekte erlauben es dir, ein Medienobjekt (Bilder, Video, Ton) links oder rechts vom Inhalt zu floaten.</p>
+ <p>Die normalen Medien-Objekte zeigen ein Medienobjekt (Bilder, Video, Ton) links oder rechts vom Inhalt an.</p>
<div class="bs-example">
<div class="media">
- <a class="pull-left" href="#">
- <img class="media-object" data-src="holder.js/64x64" alt="Generisches Platzhalter-Bild">
+ <a class="media-left" href="#">
+ <img data-src="holder.js/64x64" alt="Generisches Platzhalter-Bild">
</a>
<div class="media-body">
<h4 class="media-heading">Medien-Überschrift</h4>
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.
</div>
</div>
<div class="media">
- <a class="pull-left" href="#">
- <img class="media-object" data-src="holder.js/64x64" alt="Generisches Platzhalter-Bild">
+ <a class="media-left" href="#">
+ <img data-src="holder.js/64x64" alt="Generisches Platzhalter-Bild">
</a>
<div class="media-body">
<h4 class="media-heading">Medien-Überschrift</h4>
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.
<div class="media">
- <a class="pull-left" href="#">
- <img class="media-object" data-src="holder.js/64x64" alt="Generisches Platzhalter-Bild">
+ <a class="media-left" href="#">
+ <img data-src="holder.js/64x64" alt="Generisches Platzhalter-Bild">
</a>
<div class="media-body">
<h4 class="media-heading">Verschachtelte Medien-Überschrift</h4>
@@ -33,11 +33,32 @@ <h4 class="media-heading">Verschachtelte Medien-Überschrift</h4>
</div>
</div>
</div>
+ <div class="media">
+ <div class="media-body">
+ <h4 class="media-heading">Medien-Überschrift</h4>
+ 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.
+ </div>
+ <a class="media-right" href="#">
+ <img data-src="holder.js/64x64" alt="Generisches Platzhalter-Bild">
+ </a>
+ </div>
+ <div class="media">
+ <a class="pull-right" href="#">
+ <img data-src="holder.js/64x64" alt="Generisches Platzhalter-Bild">
+ </a>
+ <a class="pull-left" href="#">
+ <img data-src="holder.js/64x64" alt="Generisches Platzhalter-Bild">
+ </a>
+ <div class="media-body">
+ <h4 class="media-heading">Veraltetes Beispiel mit pull-right und pull-left</h4>
+ 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.
+ </div>
+ </div>
</div><!-- /.bs-example -->
{% highlight html %}
<div class="media">
- <a class="pull-left" href="#">
- <img class="media-object" src="..." alt="...">
+ <a class="media-left" href="#">
+ <img src="..." alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Medien-Überschrift</h4>
@@ -46,29 +67,77 @@ <h4 class="media-heading">Medien-Überschrift</h4>
</div>
{% endhighlight %}
+ <p>Die Klassen <code>.pull-left</code> and <code>.pull-right</code> gibt es ebenfalls und sie wurden zuvor als Teil der Medien-Komponente verwendet, sind aber für diese Art der Verwendung ab v3.3.0 als veraltet markiert. Sie haben ungefähre Gegenstücke in <code>.media-left</code> und <code>.media-right</code>, abgesehen davon, dass <code>.media-right</code> im HTML nach dem <code>.media-body</code> platziert werden sollte.</p>
+ <h3 id="media-alignment">Medien-Ausrichtung</h3>
+ <p>Die Bilder oder anderen Medien können oben, mittig oder unten ausgerichtet werden. Der Standard ist eine Ausrichtung oben.</p>
+ <div class="bs-example">
+ <div class="media">
+ <a class="media-left" href="#">
+ <img data-src="holder.js/64x64" alt="Generisches Platzhalter-Bild">
+ </a>
+ <div class="media-body">
+ <h4 class="media-heading">Oben ausgerichtet</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>
+ </div>
+ <div class="media">
+ <a class="media-left media-middle" href="#">
+ <img data-src="holder.js/64x64" alt="Generisches Platzhalter-Bild">
+ </a>
+ <div class="media-body">
+ <h4 class="media-heading">Mittig ausgerichtet</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>
+ </div>
+ <div class="media">
+ <a class="media-left media-bottom" href="#">
+ <img data-src="holder.js/64x64" alt="Generisches Platzhalter-Bild">
+ </a>
+ <div class="media-body">
+ <h4 class="media-heading">Unten ausgerichtet</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>
+ </div>
+ </div>
+{% highlight html %}
+<div class="media">
+ <a class="media-left media-middle" href="#">
+ <img data-src="..." alt="...">
+ </a>
+ <div class="media-body">
+ <h4 class="media-heading">Mittig ausgerichtet</h4>
+ ...
+ </div>
+</div>
+{% endhighlight %}
+
+
<h3 id="media-list">Medien-Liste</h3>
<p>Mit etwas mehr Markup kannst du Medien-Objekte in einer Liste verwenden (hilfreich für Kommentar-Threads oder Artikellisten).</p>
<div class="bs-example">
<ul class="media-list">
<li class="media">
- <a class="pull-left" href="#">
- <img class="media-object" data-src="holder.js/64x64" alt="Generisches Platzhalter-Bild">
+ <a class="media-left" href="#">
+ <img data-src="holder.js/64x64" alt="Generisches Platzhalter-Bild">
</a>
<div class="media-body">
<h4 class="media-heading">Medien-Überschrift</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.</p>
<!-- Verschachteltes Medien-Objekt -->
<div class="media">
- <a class="pull-left" href="#">
- <img class="media-object" data-src="holder.js/64x64" alt="Generisches Platzhalter-Bild">
+ <a class="media-left" href="#">
+ <img data-src="holder.js/64x64" alt="Generisches Platzhalter-Bild">
</a>
<div class="media-body">
<h4 class="media-heading">Verschachtelte Medien-Überschrift</h4>
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.
<!-- Nested media object -->
<div class="media">
- <a class="pull-left" href="#">
- <img class="media-object" data-src="holder.js/64x64" alt="Generisches Platzhalter-Bild">
+ <a class="media-left" href="#">
+ <img data-src="holder.js/64x64" alt="Generisches Platzhalter-Bild">
</a>
<div class="media-body">
<h4 class="media-heading">Verschachtelte Medien-Überschrift</h4>
@@ -79,8 +148,8 @@ <h4 class="media-heading">Verschachtelte Medien-Überschrift</h4>
</div>
<!-- Nested media object -->
<div class="media">
- <a class="pull-left" href="#">
- <img class="media-object" data-src="holder.js/64x64" alt="Generisches Platzhalter-Bild">
+ <a class="media-left" href="#">
+ <img data-src="holder.js/64x64" alt="Generisches Platzhalter-Bild">
</a>
<div class="media-body">
<h4 class="media-heading">Verschachtelte Medien-Überschrift</h4>
@@ -89,22 +158,13 @@ <h4 class="media-heading">Verschachtelte Medien-Überschrift</h4>
</div>
</div>
</li>
- <li class="media">
- <a class="pull-right" href="#">
- <img class="media-object" data-src="holder.js/64x64" alt="Generisches Platzhalter-Bild">
- </a>
- <div class="media-body">
- <h4 class="media-heading">Medien-Überschrift</h4>
- 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.
- </div>
- </li>
</ul>
</div>
{% highlight html %}
<ul class="media-list">
<li class="media">
- <a class="pull-left" href="#">
- <img class="media-object" src="..." alt="...">
+ <a class="media-left" href="#">
+ <img src="..." alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Medien-Überschrift</h4>
@@ -168,8 +168,9 @@ <h3 id="progress-animated">Animierte Variante</h3>
<p>Füge <code>.active</code> zu <code>.progress-bar-striped</code> hinzu, um die Streifen von rechts nach links zu animieren. Nicht verfügbar in IE9 und älteren Versionen.</p>
<div class="bs-example">
<div class="progress">
- <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% abgeschlossen</span></div>
+ <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% abgeschlossen</span></div>
</div>
+ <button type="button" class="btn btn-default bs-docs-activate-animated-progressbar" data-toggle="button" aria-pressed="false" autocomplete="off">Animation ein-/ausschalten</button>
</div>
{% highlight html %}
<div class="progress">
@@ -2,5 +2,5 @@
<h1 id="tools" class="page-header">Tools</h1>
<h2 id="tools-bootlint">Bootlint</h2>
- <p><strong><a href="https://github.com/twbs/bootlint">Bootlint</a></strong> ist ein offizielles Tool zum <a href="http://de.wikipedia.org/wiki/Lint_(Programmierwerkzeug)">Linten</a> 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.</p>
+ <p><strong><a href="https://github.com/twbs/bootlint">Bootlint</a></strong> ist das offizielle Tool zum <a href="http://de.wikipedia.org/wiki/Lint_(Programmierwerkzeug)">Linten</a> 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.</p>
</div>
@@ -51,7 +51,7 @@
<![endif]-->
<!-- Favicons -->
-<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-precomposed.png">
+<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" href="/favicon.ico">
<script>
Oops, something went wrong.

0 comments on commit 41116b7

Please sign in to comment.