From a645664e503475af2b8ed6f81f6860aad188f327 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 5 Jul 2012 10:12:15 -0700 Subject: [PATCH] update thumbnails to fix display issues and refine aesthetics --- docs/assets/css/bootstrap.css | 9 +- docs/assets/css/docs.css | 4 +- docs/components.html | 115 +++++++++++++---------- docs/templates/pages/components.mustache | 115 +++++++++++++---------- less/thumbnails.less | 5 +- 5 files changed, 144 insertions(+), 104 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 7520a3b046..74f7094d3b 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -4855,14 +4855,14 @@ input[type="submit"].btn.btn-mini { .thumbnail { display: block; padding: 4px; - line-height: 1; + line-height: 20px; border: 1px solid #ddd; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); - -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055); + -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055); } a.thumbnail:hover { @@ -4881,6 +4881,7 @@ a.thumbnail:hover { .thumbnail .caption { padding: 9px; + color: #555555; } .label, diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index b003b89d5d..7b12bb5da4 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -33,10 +33,10 @@ body { p { margin-bottom: 15px; } -li { +/*li { line-height: 25px; } - +*/ /* Code in headings */ h3 code { font-size: 14px; diff --git a/docs/components.html b/docs/components.html index 0c81aefa52..ed1ba953ab 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 @@
         
       
     
+    
  • 
+      
+        
+      
+    
    • 
   
 
 
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 4fc982e5ba..ea6cc4516f 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1602,53 +1602,67 @@
 
   
    {{_i}}Default thumbnails{{/i}}
    
   
    {{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}
    
-  
+  
    
+    
+  
    
 
   
    {{_i}}Highly customizable{{/i}}
    
   
    {{_i}}With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.{{/i}}
    
-  
      
-    
    • 
-      
      
-        
-        
      
-          
      {{_i}}Thumbnail label{{/i}}
      
-          
      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.
      
-          
      {{_i}}Action{{/i}} {{_i}}Action{{/i}}
      
+  
      
+    
        
+      
      • 
+        
        
+          
+          
        
+            
        {{_i}}Thumbnail label{{/i}}
        
+            
        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.
        
+            
        {{_i}}Action{{/i}} {{_i}}Action{{/i}}
        
+          
        
         
        
-      
      
-    
      • 
-    
    • 
-      
      
-        
-        
      
-          
      {{_i}}Thumbnail label{{/i}}
      
-          
      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.
      
-          
      {{_i}}Action{{/i}} {{_i}}Action{{/i}}
      
+      
      • 
+      
    • 
+        
      
+          
+          
      
+            
      {{_i}}Thumbnail label{{/i}}
      
+            
      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.
      
+            
      {{_i}}Action{{/i}} {{_i}}Action{{/i}}
      
+          
      
         
      
-      
-    
      • 
-  
    
+      
+      
  • 
+        
    
+          
+          
    
+            
    {{_i}}Thumbnail label{{/i}}
    
+            
    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.
    
+            
    {{_i}}Action{{/i}} {{_i}}Action{{/i}}
    
+          
    
+        
    
+      
    • 
+    
+  
 
   
    {{_i}}Why use thumbnails{{/i}}
    
   
    {{_i}}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.{{/i}}
    
@@ -1663,9 +1677,9 @@
   
    {{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup for linked images:{{/i}}
    
 
     <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>
   ...
@@ -1674,11 +1688,11 @@
   
    {{_i}}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:{{/i}}
    
 
     <ul class="thumbnails">
-  <li class="span3">
+  <li class="span4">
     <div class="thumbnail">
-      <img src="http://placehold.it/260x180" alt="">
-      <h5>{{_i}}Thumbnail label{{/i}}</h5>
-      <p>{{_i}}Thumbnail caption right here...{{/i}}</p>
+      <img src="http://placehold.it/300x200" alt="">
+      <h3>{{_i}}Thumbnail label{{/i}}</h3>
+      <p>{{_i}}Thumbnail caption...{{/i}}</p>
     </div>
   </li>
   ...
@@ -1718,6 +1732,11 @@
         
       
     
+    
  • 
+      
+        
+      
+    
    • 
   
 
 
diff --git a/less/thumbnails.less b/less/thumbnails.less
index d609c7df31..f229a2dada 100644
--- a/less/thumbnails.less
+++ b/less/thumbnails.less
@@ -27,10 +27,10 @@
 .thumbnail {
   display: block;
   padding: 4px;
-  line-height: 1;
+  line-height: 20px;
   border: 1px solid #ddd;
   .border-radius(4px);
-  .box-shadow(0 1px 1px rgba(0,0,0,.075));
+  .box-shadow(0 1px 3px rgba(0,0,0,.055));
 }
 // Add a hover state for linked versions only
 a.thumbnail:hover {
@@ -47,4 +47,5 @@ a.thumbnail:hover {
 }
 .thumbnail .caption {
   padding: 9px;
+  color: @gray;
 }