From 72a536393c2f2aba4f855384e94c4ce09bc2e39c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 19 Dec 2011 22:58:56 -0800 Subject: mostly docs updates, but also some bug fixes per github issues --- docs/components.html | 179 +++++++++++++++++++++++++++++++++------------------ 1 file changed, 115 insertions(+), 64 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index b4a88dd07..56e71b0f7 100644 --- a/docs/components.html +++ b/docs/components.html @@ -58,94 +58,145 @@ ================================================== -->
-

Media Displaying images and videos

+

Thumbnails Grids of images, videos, text, and more

- +
-
-

Media grid

-

Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.

-
-
-

Example thumbnails

-

Thumbnails in the .media-grid 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 .span2, .span4, and .span6 column sizes.

-

Large

-
+ +
+
+

Why use thumbnails

+

Thumbnails (previously .media-grid up until v1.4) are great for grids of photos or videos, image search results, retail products, portfolios, and much more. They can be links or static content.

+
+
+

Simple, flexible markup

+

Thumbnail markup is simple—a ul with any number of li elements is all that is required. It's also super flexible, allowing for any type of content with just a bit more markup to wrap your contents.

+
+
+

Uses grid column sizes

+

Lastly, the thumbnails component uses existing grid system classes—like .span2 or .span3—for control of thumbnail dimensions.

+
+
+ +
+
+

The markup

+

As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:

+
+<ul class="thumbnails">
+  <li class="span3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/210x150" alt="">
+    </a>
+  </li>
+  ...
+</ul>
+
+

For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <a> for a <div> like so:

+
+<ul class="thumbnails">
+  <li class="span3">
+    <div class="thumbnail">
+      <img src="http://placehold.it/210x150" alt="">
+      <h5>Thumbnail label</h5>
+      <p>Thumbnail caption right here...</p>
+    </div>
+  </li>
+  ...
+</ul>
+
+
+
+

More examples

+

Explore all your options with the various grid classes available to you. You can also mix and match different sizes.

+ -

Small

- -

Coding them

-

Media grids are easy to use and rather simple on the markup side. Their dimensions are purely based on the size of the images included.

-
-<ul class="media-grid">
-  <li>
-    <a href="#">
-      <img class="thumbnail" src="http://placehold.it/330x230" alt="">
-    </a>
-  </li>
-  <li>
-    <a href="#">
-      <img class="thumbnail" src="http://placehold.it/330x230" alt="">
-    </a>
-  </li>
-</ul>
-
-
+
+
-- cgit v1.2.3