1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-16 18:44:01 +02:00

adding more media sizes

This commit is contained in:
Mark Otto
2011-09-10 22:47:38 -07:00
parent 3755ee158f
commit d0f7637a7d
4 changed files with 51 additions and 2 deletions

View File

@@ -712,6 +712,22 @@
<p>Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.</p>
</div>
<div class="span12">
<h3>Example thumbnails</h3>
<p>Thumbnails in the <code>.media-grid</code> can be any size, but they work best when mapped directly to the built-in Bootstrap grid system. Image widths like 90, 210, and 330 combine with a few pixels of padding to equal the <code>.span2</code>, <code>.span4</code>, and <code>.span6</code> column sizes.</p>
<h4>Large</h4>
<ul class="media-grid">
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/330x230" alt="">
</a>
</li>
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/330x230" alt="">
</a>
</li>
</ul>
<h4>Medium</h4>
<ul class="media-grid">
<li>
<a class="thumbnail" href="#">
@@ -739,6 +755,24 @@
</a>
</li>
</ul>
<h4>Small</h4>
<ul class="media-grid">
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/90x90" alt="">
</a>
</li>
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/90x90" alt="">
</a>
</li>
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/90x90" alt="">
</a>
</li>
</ul>
</div>
</div><!-- /row -->
</section>