mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-10 15:44:51 +02:00
Code Issues Releases Wiki Activity

docs for 3.3.2

Browse Source
This commit is contained in:
Mark Otto
2015-01-19 09:10:41 -08:00
parent 8fbe58032f
commit 0d8c85d8f9
55 changed files with 4375 additions and 2612 deletions
Download Patch File Download Diff File Expand all files Collapse all files

449
components/index.html
View File

@@ -113,7 +113,7 @@
<h1 id="glyphicons" class="page-header">Glyphicons</h1>
<h2 id="glyphicons-glyphs">Available glyphs</h2>
<p>Includes 200 glyphs in font format from the Glyphicon Halflings set. <a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p>
<p>Includes 260 glyphs in font format from the Glyphicon Halflings set. <a href="http://glyphicons.com/">Glyphicons</a> Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to <a href="http://glyphicons.com/">Glyphicons</a> whenever possible.</p>
<div class="bs-glyphicons">
<ul class="bs-glyphicons-list">
@@ -132,6 +132,11 @@
<span class="glyphicon-class">glyphicon glyphicon-euro</span>
</li>
<li>
<span class="glyphicon glyphicon-eur" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-eur</span>
</li>
<li>
<span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-minus</span>
@@ -1117,6 +1122,296 @@
<span class="glyphicon-class">glyphicon glyphicon-tree-deciduous</span>
</li>
<li>
<span class="glyphicon glyphicon-cd" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-cd</span>
</li>
<li>
<span class="glyphicon glyphicon-save-file" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-save-file</span>
</li>
<li>
<span class="glyphicon glyphicon-open-file" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-open-file</span>
</li>
<li>
<span class="glyphicon glyphicon-level-up" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-level-up</span>
</li>
<li>
<span class="glyphicon glyphicon-copy" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-copy</span>
</li>
<li>
<span class="glyphicon glyphicon-paste" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-paste</span>
</li>
<li>
<span class="glyphicon glyphicon-alert" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-alert</span>
</li>
<li>
<span class="glyphicon glyphicon-equalizer" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-equalizer</span>
</li>
<li>
<span class="glyphicon glyphicon-king" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-king</span>
</li>
<li>
<span class="glyphicon glyphicon-queen" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-queen</span>
</li>
<li>
<span class="glyphicon glyphicon-pawn" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-pawn</span>
</li>
<li>
<span class="glyphicon glyphicon-bishop" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-bishop</span>
</li>
<li>
<span class="glyphicon glyphicon-knight" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-knight</span>
</li>
<li>
<span class="glyphicon glyphicon-baby-formula" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-baby-formula</span>
</li>
<li>
<span class="glyphicon glyphicon-tent" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-tent</span>
</li>
<li>
<span class="glyphicon glyphicon-blackboard" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-blackboard</span>
</li>
<li>
<span class="glyphicon glyphicon-bed" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-bed</span>
</li>
<li>
<span class="glyphicon glyphicon-apple" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-apple</span>
</li>
<li>
<span class="glyphicon glyphicon-erase" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-erase</span>
</li>
<li>
<span class="glyphicon glyphicon-hourglass" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-hourglass</span>
</li>
<li>
<span class="glyphicon glyphicon-lamp" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-lamp</span>
</li>
<li>
<span class="glyphicon glyphicon-duplicate" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-duplicate</span>
</li>
<li>
<span class="glyphicon glyphicon-piggy-bank" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-piggy-bank</span>
</li>
<li>
<span class="glyphicon glyphicon-scissors" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-scissors</span>
</li>
<li>
<span class="glyphicon glyphicon-bitcoin" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-bitcoin</span>
</li>
<li>
<span class="glyphicon glyphicon-yen" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-yen</span>
</li>
<li>
<span class="glyphicon glyphicon-ruble" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-ruble</span>
</li>
<li>
<span class="glyphicon glyphicon-scale" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-scale</span>
</li>
<li>
<span class="glyphicon glyphicon-ice-lolly" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-ice-lolly</span>
</li>
<li>
<span class="glyphicon glyphicon-ice-lolly-tasted" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-ice-lolly-tasted</span>
</li>
<li>
<span class="glyphicon glyphicon-education" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-education</span>
</li>
<li>
<span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-option-horizontal</span>
</li>
<li>
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-option-vertical</span>
</li>
<li>
<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-menu-hamburger</span>
</li>
<li>
<span class="glyphicon glyphicon-modal-window" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-modal-window</span>
</li>
<li>
<span class="glyphicon glyphicon-oil" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-oil</span>
</li>
<li>
<span class="glyphicon glyphicon-grain" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-grain</span>
</li>
<li>
<span class="glyphicon glyphicon-sunglasses" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-sunglasses</span>
</li>
<li>
<span class="glyphicon glyphicon-text-size" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-text-size</span>
</li>
<li>
<span class="glyphicon glyphicon-text-color" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-text-color</span>
</li>
<li>
<span class="glyphicon glyphicon-text-background" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-text-background</span>
</li>
<li>
<span class="glyphicon glyphicon-object-align-top" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-object-align-top</span>
</li>
<li>
<span class="glyphicon glyphicon-object-align-bottom" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-object-align-bottom</span>
</li>
<li>
<span class="glyphicon glyphicon-object-align-horizontal" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-object-align-horizontal</span>
</li>
<li>
<span class="glyphicon glyphicon-object-align-left" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-object-align-left</span>
</li>
<li>
<span class="glyphicon glyphicon-object-align-vertical" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-object-align-vertical</span>
</li>
<li>
<span class="glyphicon glyphicon-object-align-right" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-object-align-right</span>
</li>
<li>
<span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-triangle-right</span>
</li>
<li>
<span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-triangle-left</span>
</li>
<li>
<span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-triangle-bottom</span>
</li>
<li>
<span class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-triangle-top</span>
</li>
<li>
<span class="glyphicon glyphicon-console" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-console</span>
</li>
<li>
<span class="glyphicon glyphicon-superscript" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-superscript</span>
</li>
<li>
<span class="glyphicon glyphicon-subscript" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-subscript</span>
</li>
<li>
<span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-menu-left</span>
</li>
<li>
<span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-menu-right</span>
</li>
<li>
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-menu-down</span>
</li>
<li>
<span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
<span class="glyphicon-class">glyphicon glyphicon-menu-up</span>
</li>
</ul>
</div>
@@ -3126,6 +3421,7 @@
<h1 id="thumbnails" class="page-header">Thumbnails</h1>
<p class="lead">Extend Bootstrap's <a href="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
<p>If you're looking for Pinterest-like presentation of thumbnails of varying heights and/or widths, you'll need to use a third-party plugin such as <a href="http://masonry.desandro.com">Masonry</a>, <a href="http://isotope.metafizzy.co">Isotope</a>, or <a href="http://salvattore.com">Salvattore</a>.</p>
<h3 id="thumbnails-default">Default example</h3>
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
@@ -3156,7 +3452,7 @@
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-xs-6 col-md-3"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"thumbnail"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">data-src=</span><span class="s">"holder.js/100%x180"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
...
@@ -3201,7 +3497,7 @@
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"row"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"col-sm-6 col-md-4"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"thumbnail"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">data-src=</span><span class="s">"holder.js/300x300"</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"caption"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h3&gt;</span>Thumbnail label<span class="nt">&lt;/h3&gt;</span>
<span class="nt">&lt;p&gt;</span>...<span class="nt">&lt;/p&gt;</span>
@@ -3335,28 +3631,26 @@
60%
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
<h3 id="progress-low-percentages">Low percentages</h3>
<p>Progress bars representing low single digit percentages, as well as 0%, include a <code>min-width: 20px;</code> for legibility.</p>
<div class="bs-example">
<p>To ensure that the label text remains legible even for low percentages, consider adding a <code>min-width</code> to the progress bar.</p>
<div class="bs-example" data-example-id="progress-bar-at-low-percentage">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"0"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"0"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"min-width: 2em;"</span><span class="nt">&gt;</span>
0%
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"2"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"width: 2%;"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"progress-bar"</span> <span class="na">role=</span><span class="s">"progressbar"</span> <span class="na">aria-valuenow=</span><span class="s">"2"</span> <span class="na">aria-valuemin=</span><span class="s">"0"</span> <span class="na">aria-valuemax=</span><span class="s">"100"</span> <span class="na">style=</span><span class="s">"min-width: 2em; width: 2%;"</span><span class="nt">&gt;</span>
2%
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre></div>
@@ -3503,25 +3797,31 @@
<p>The default media displays a media object (images, video, audio) to the left or right of a content block.</p>
<div class="bs-example" data-example-id="default-media">
<div class="media">
<a class="media-left" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</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="media-left" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</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="media-left" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Nested media heading</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.
@@ -3534,27 +3834,35 @@
<h4 class="media-heading">Media heading</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="Generic placeholder image">
</a>
<div class="media-right">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
</div>
<div class="media">
<a class="media-left" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</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="Generic placeholder image">
</a>
<div class="media-right">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
</div>
</div><!-- /.bs-example -->
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"media-left"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-left"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"media-object"</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"media-heading"</span><span class="nt">&gt;</span>Media heading<span class="nt">&lt;/h4&gt;</span>
...
@@ -3566,9 +3874,11 @@
<p>The images or other media can be aligned top, middle, or bottom. The default is top aligned.</p>
<div class="bs-example" data-example-id="media-alignment">
<div class="media">
<a class="media-left" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Top aligned media</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>
@@ -3576,9 +3886,11 @@
</div>
</div>
<div class="media">
<a class="media-left media-middle" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-left media-middle">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</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>
@@ -3586,9 +3898,11 @@
</div>
</div>
<div class="media">
<a class="media-left media-bottom" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-left media-bottom">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Bottom aligned media</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>
@@ -3597,9 +3911,11 @@
</div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"media-left media-middle"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">data-src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-left media-middle"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"media-object"</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"media-heading"</span><span class="nt">&gt;</span>Middle aligned media<span class="nt">&lt;/h4&gt;</span>
...
@@ -3611,25 +3927,31 @@
<div class="bs-example" data-example-id="media-list">
<ul class="media-list">
<li class="media">
<a class="media-left" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</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>
<!-- Nested media object -->
<div class="media">
<a class="media-left" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Nested media heading</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="media-left" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Nested media heading</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.
@@ -3639,9 +3961,11 @@
</div>
<!-- Nested media object -->
<div class="media">
<a class="media-left" href="#">
<img data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
<div class="media-left">
<a href="#">
<img class="media-object" data-src="holder.js/64x64" alt="Generic placeholder image">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Nested media heading</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.
@@ -3653,9 +3977,11 @@
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;ul</span> <span class="na">class=</span><span class="s">"media-list"</span><span class="nt">&gt;</span>
<span class="nt">&lt;li</span> <span class="na">class=</span><span class="s">"media"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">class=</span><span class="s">"media-left"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-left"</span><span class="nt">&gt;</span>
<span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">&gt;</span>
<span class="nt">&lt;img</span> <span class="na">class=</span><span class="s">"media-object"</span> <span class="na">src=</span><span class="s">"..."</span> <span class="na">alt=</span><span class="s">"..."</span><span class="nt">&gt;</span>
<span class="nt">&lt;/a&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"media-body"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h4</span> <span class="na">class=</span><span class="s">"media-heading"</span><span class="nt">&gt;</span>Media heading<span class="nt">&lt;/h4&gt;</span>
...
@@ -4250,7 +4576,6 @@
<ul class="nav">
<li><a href="#progress-basic">Basic example</a></li>
<li><a href="#progress-label">With label</a></li>
<li><a href="#progress-low-percentages">Low percentages</a></li>
<li><a href="#progress-alternatives">Contextual alternatives</a></li>
<li><a href="#progress-striped">Striped</a></li>
<li><a href="#progress-animated">Animated</a></li>
@@ -4330,7 +4655,7 @@
<p>Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
<p>Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<ul class="bs-docs-footer-links text-muted">
<li>Currently v3.3.1</li>
<li>Currently v3.3.2</li>
<li>&middot;</li>
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
<li>&middot;</li>
@@ -4354,7 +4679,7 @@
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../dist/js/bootstrap.min.js"></script>