diff options
| author | Mark Otto <[email protected]> | 2011-09-10 22:47:38 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2011-09-10 22:47:38 -0700 |
| commit | d0f7637a7d472dd8431b6b61376515bf852edaf8 (patch) | |
| tree | 2aee6713bb5f826bea9ff11bae333b10d718e388 /docs | |
| parent | 3755ee158f947bdb1d44b86faa9537ac9f3cbbc5 (diff) | |
| download | bootstrap-d0f7637a7d472dd8431b6b61376515bf852edaf8.tar.xz bootstrap-d0f7637a7d472dd8431b6b61376515bf852edaf8.zip | |
adding more media sizes
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/index.html | 34 |
1 files changed, 34 insertions, 0 deletions
diff --git a/docs/index.html b/docs/index.html index e19059d24..12b8c5291 100644 --- a/docs/index.html +++ b/docs/index.html @@ -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> |