diff options
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> |