From f12946be5a8e8529f64606ca73fe06e48f9fd583 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 25 Sep 2012 22:40:48 -0700 Subject: thumbnails cleanup: no more UL or LI elements needed, instead just use standard grid markup --- docs/components.html | 119 ++++++++++++++++----------------------------------- 1 file changed, 38 insertions(+), 81 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index ea0e12272..6422c1611 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1884,38 +1884,48 @@

Thumbnails Grids of images, videos, text, and more

-

Default thumbnails

+

Default thumbnails

By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.

-
-
+
- -
  • +
    • +
    - -
  • +
    • +
    - - +
    + +
    +<div class="row">
+  <div class="span3">
+    <a href="#" class="thumbnail">
+      <img src="http://placehold.it/260x180" alt="">
+    </a>
+  </div>
+  ...
+</div>
+
    -

    Highly customizable

    +

    Custom content thumbnails

    With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

    -
    -
    +
    @@ -1934,8 +1944,8 @@

    Action Action

    - -
  • +
    • +
    @@ -1944,75 +1954,22 @@

    Action Action

    - - +
    + - -

    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.

    - -

    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="span4">
-    <a href="#" class="thumbnail">
-      <img src="http://placehold.it/300x200" 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="span4">
+<div class="row">
+  <div class="span4">
     <div class="thumbnail">
       <img src="http://placehold.it/300x200" alt="">
       <h3>Thumbnail label</h3>
       <p>Thumbnail caption...</p>
     </div>
-  </li>
+  </div>
   ...
-</ul>
+</div>
    -

    More examples

    -

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

    - - @@ -2144,7 +2101,7 @@

    Striped

    -

    Uses a gradient to create a striped effect. Not available in IE7-8.

    +

    Uses a gradient to create a striped effect. Not available in IE8.

    @@ -2259,7 +2216,7 @@

    Browser support

    -

    Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

    +

    Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE8-9 or older versions of Firefox.

    Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

    -- cgit v1.2.3