From a645664e503475af2b8ed6f81f6860aad188f327 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jul 2012 10:12:15 -0700 Subject: update thumbnails to fix display issues and refine aesthetics --- docs/components.html | 115 ++++++++++++++++++++++++++++++--------------------- 1 file changed, 67 insertions(+), 48 deletions(-) (limited to 'docs/components.html') diff --git a/docs/components.html b/docs/components.html index 0c81aefa5..ed1ba953a 100644 --- a/docs/components.html +++ b/docs/components.html @@ -1679,53 +1679,67 @@

Default thumbnails

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

- +
+ +

Highly customizable

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

- + +
  • +
    + +
    +

    Thumbnail label

    +

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

    +

    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.

    @@ -1740,9 +1754,9 @@

    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">
+  <li class="span4">
     <a href="#" class="thumbnail">
-      <img src="http://placehold.it/260x180" alt="">
+      <img src="http://placehold.it/300x200" alt="">
     </a>
   </li>
   ...
@@ -1751,11 +1765,11 @@
   
    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">
+  <li class="span4">
     <div class="thumbnail">
-      <img src="http://placehold.it/260x180" alt="">
-      <h5>Thumbnail label</h5>
-      <p>Thumbnail caption right here...</p>
+      <img src="http://placehold.it/300x200" alt="">
+      <h3>Thumbnail label</h3>
+      <p>Thumbnail caption...</p>
     </div>
   </li>
   ...
@@ -1795,6 +1809,11 @@
         
       
     
+    
  • 
+      
+        
+      
+    
    • 
   
 
 
-- 
cgit v1.2.3