update thumbnails to fix display issues and refine aesthetics

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 7520a3b046160feb4c0fbc38ecbdecfc6dcc8955..74f7094d3bc91c8e9189f2175b73970c533ffb70 100644 (file)
--- 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 b003b89d5d86be61e27af19d107eb5eeab0e116f..7b12bb5da4edd0ade12a8dba3c1023a54cc423d7 100644 (file)
--- 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 0c81aefa5288012df4851c8262fd5b9249bfc3ab..ed1ba953ab1fe34af4124c16aaa0825c01e605c4 100644 (file)
--- a/docs/components.html
+++ b/docs/components.html
@@ -1679,53 +1679,67 @@
 
   <h2>Default thumbnails</h2>
   <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
-  <ul class="thumbnails">
-    <li class="span3">
-      <a href="#" class="thumbnail">
-        <img src="http://placehold.it/260x180" alt="">
-      </a>
-    </li>
-    <li class="span3">
-      <a href="#" class="thumbnail">
-        <img src="http://placehold.it/260x180" alt="">
-      </a>
-    </li>
-    <li class="span3">
-      <a href="#" class="thumbnail">
-        <img src="http://placehold.it/260x180" alt="">
-      </a>
-    </li>
-    <li class="span3">
-      <a href="#" class="thumbnail">
-        <img src="http://placehold.it/260x180" alt="">
-      </a>
-    </li>
-  </ul>
+  <div class="row-fluid">
+    <ul class="thumbnails">
+      <li class="span3">
+        <a href="#" class="thumbnail">
+          <img src="http://placehold.it/260x180" alt="">
+        </a>
+      </li>
+      <li class="span3">
+        <a href="#" class="thumbnail">
+          <img src="http://placehold.it/260x180" alt="">
+        </a>
+      </li>
+      <li class="span3">
+        <a href="#" class="thumbnail">
+          <img src="http://placehold.it/260x180" alt="">
+        </a>
+      </li>
+      <li class="span3">
+        <a href="#" class="thumbnail">
+          <img src="http://placehold.it/260x180" alt="">
+        </a>
+      </li>
+    </ul>
+  </div>
 
   <h2>Highly customizable</h2>
   <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
-  <ul class="thumbnails">
-    <li class="span3">
-      <div class="thumbnail">
-        <img src="http://placehold.it/260x180" alt="">
-        <div class="caption">
-          <h5>Thumbnail label</h5>
-          <p>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.</p>
-          <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
+  <div class="row-fluid">
+    <ul class="thumbnails">
+      <li class="span4">
+        <div class="thumbnail">
+          <img src="http://placehold.it/300x200" alt="">
+          <div class="caption">
+            <h3>Thumbnail label</h3>
+            <p>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.</p>
+            <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
+          </div>
         </div>
-      </div>
-    </li>
-    <li class="span3">
-      <div class="thumbnail">
-        <img src="http://placehold.it/260x180" alt="">
-        <div class="caption">
-          <h5>Thumbnail label</h5>
-          <p>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.</p>
-          <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
+      </li>
+      <li class="span4">
+        <div class="thumbnail">
+          <img src="http://placehold.it/300x200" alt="">
+          <div class="caption">
+            <h3>Thumbnail label</h3>
+            <p>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.</p>
+            <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
+          </div>
         </div>
-      </div>
-    </li>
-  </ul>
+      </li>
+      <li class="span4">
+        <div class="thumbnail">
+          <img src="http://placehold.it/300x200" alt="">
+          <div class="caption">
+            <h3>Thumbnail label</h3>
+            <p>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.</p>
+            <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
 
   <h3>Why use thumbnails</h3>
   <p>Thumbnails (previously <code>.media-grid</code> 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.</p>
@@ -1740,9 +1754,9 @@
   <p>As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:</p>
 <pre class="prettyprint linenums">
 &lt;ul class="thumbnails"&gt;
-  &lt;li class="span3"&gt;
+  &lt;li class="span4"&gt;
     &lt;a href="#" class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/260x180" alt=""&gt;
+      &lt;img src="http://placehold.it/300x200" alt=""&gt;
     &lt;/a&gt;
   &lt;/li&gt;
   ...
@@ -1751,11 +1765,11 @@
   <p>For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <code>&lt;a&gt;</code> for a <code>&lt;div&gt;</code> like so:</p>
 <pre class="prettyprint linenums">
 &lt;ul class="thumbnails"&gt;
-  &lt;li class="span3"&gt;
+  &lt;li class="span4"&gt;
     &lt;div class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/260x180" alt=""&gt;
-      &lt;h5&gt;Thumbnail label&lt;/h5&gt;
-      &lt;p&gt;Thumbnail caption right here...&lt;/p&gt;
+      &lt;img src="http://placehold.it/300x200" alt=""&gt;
+      &lt;h3&gt;Thumbnail label&lt;/h3&gt;
+      &lt;p&gt;Thumbnail caption...&lt;/p&gt;
     &lt;/div&gt;
   &lt;/li&gt;
   ...
@@ -1795,6 +1809,11 @@
         <img src="http://placehold.it/160x120" alt="">
       </a>
     </li>
+    <li class="span2">
+      <a href="#" class="thumbnail">
+        <img src="http://placehold.it/160x120" alt="">
+      </a>
+    </li>
   </ul>
 
 </section>

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 4fc982e5bab3ebb1fb0134aa16174d2dfd69d372..ea6cc4516fd8c076da1846404303eec89a97eaa9 100644 (file)
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -1602,53 +1602,67 @@
 
   <h2>{{_i}}Default thumbnails{{/i}}</h2>
   <p>{{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}</p>
-  <ul class="thumbnails">
-    <li class="span3">
-      <a href="#" class="thumbnail">
-        <img src="http://placehold.it/260x180" alt="">
-      </a>
-    </li>
-    <li class="span3">
-      <a href="#" class="thumbnail">
-        <img src="http://placehold.it/260x180" alt="">
-      </a>
-    </li>
-    <li class="span3">
-      <a href="#" class="thumbnail">
-        <img src="http://placehold.it/260x180" alt="">
-      </a>
-    </li>
-    <li class="span3">
-      <a href="#" class="thumbnail">
-        <img src="http://placehold.it/260x180" alt="">
-      </a>
-    </li>
-  </ul>
+  <div class="row-fluid">
+    <ul class="thumbnails">
+      <li class="span3">
+        <a href="#" class="thumbnail">
+          <img src="http://placehold.it/260x180" alt="">
+        </a>
+      </li>
+      <li class="span3">
+        <a href="#" class="thumbnail">
+          <img src="http://placehold.it/260x180" alt="">
+        </a>
+      </li>
+      <li class="span3">
+        <a href="#" class="thumbnail">
+          <img src="http://placehold.it/260x180" alt="">
+        </a>
+      </li>
+      <li class="span3">
+        <a href="#" class="thumbnail">
+          <img src="http://placehold.it/260x180" alt="">
+        </a>
+      </li>
+    </ul>
+  </div>
 
   <h2>{{_i}}Highly customizable{{/i}}</h2>
   <p>{{_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}}</p>
-  <ul class="thumbnails">
-    <li class="span3">
-      <div class="thumbnail">
-        <img src="http://placehold.it/260x180" alt="">
-        <div class="caption">
-          <h5>{{_i}}Thumbnail label{{/i}}</h5>
-          <p>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.</p>
-          <p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
+  <div class="row-fluid">
+    <ul class="thumbnails">
+      <li class="span4">
+        <div class="thumbnail">
+          <img src="http://placehold.it/300x200" alt="">
+          <div class="caption">
+            <h3>{{_i}}Thumbnail label{{/i}}</h3>
+            <p>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.</p>
+            <p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
+          </div>
         </div>
-      </div>
-    </li>
-    <li class="span3">
-      <div class="thumbnail">
-        <img src="http://placehold.it/260x180" alt="">
-        <div class="caption">
-          <h5>{{_i}}Thumbnail label{{/i}}</h5>
-          <p>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.</p>
-          <p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
+      </li>
+      <li class="span4">
+        <div class="thumbnail">
+          <img src="http://placehold.it/300x200" alt="">
+          <div class="caption">
+            <h3>{{_i}}Thumbnail label{{/i}}</h3>
+            <p>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.</p>
+            <p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
+          </div>
         </div>
-      </div>
-    </li>
-  </ul>
+      </li>
+      <li class="span4">
+        <div class="thumbnail">
+          <img src="http://placehold.it/300x200" alt="">
+          <div class="caption">
+            <h3>{{_i}}Thumbnail label{{/i}}</h3>
+            <p>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.</p>
+            <p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
 
   <h3>{{_i}}Why use thumbnails{{/i}}</h3>
   <p>{{_i}}Thumbnails (previously <code>.media-grid</code> 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}}</p>
@@ -1663,9 +1677,9 @@
   <p>{{_i}}As mentioned previously, the required markup for thumbnails is light and straightforward. Here's a look at the default setup <strong>for linked images</strong>:{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;ul class="thumbnails"&gt;
-  &lt;li class="span3"&gt;
+  &lt;li class="span4"&gt;
     &lt;a href="#" class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/260x180" alt=""&gt;
+      &lt;img src="http://placehold.it/300x200" alt=""&gt;
     &lt;/a&gt;
   &lt;/li&gt;
   ...
@@ -1674,11 +1688,11 @@
   <p>{{_i}}For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <code>&lt;a&gt;</code> for a <code>&lt;div&gt;</code> like so:{{/i}}</p>
 <pre class="prettyprint linenums">
 &lt;ul class="thumbnails"&gt;
-  &lt;li class="span3"&gt;
+  &lt;li class="span4"&gt;
     &lt;div class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/260x180" alt=""&gt;
-      &lt;h5&gt;{{_i}}Thumbnail label{{/i}}&lt;/h5&gt;
-      &lt;p&gt;{{_i}}Thumbnail caption right here...{{/i}}&lt;/p&gt;
+      &lt;img src="http://placehold.it/300x200" alt=""&gt;
+      &lt;h3&gt;{{_i}}Thumbnail label{{/i}}&lt;/h3&gt;
+      &lt;p&gt;{{_i}}Thumbnail caption...{{/i}}&lt;/p&gt;
     &lt;/div&gt;
   &lt;/li&gt;
   ...
@@ -1718,6 +1732,11 @@
         <img src="http://placehold.it/160x120" alt="">
       </a>
     </li>
+    <li class="span2">
+      <a href="#" class="thumbnail">
+        <img src="http://placehold.it/160x120" alt="">
+      </a>
+    </li>
   </ul>
 
 </section>

diff --git a/less/thumbnails.less b/less/thumbnails.less
index d609c7df31c48fa15ce3981041c439d2ae874601..f229a2dadae0b57e39b4eb3d6cdef244af7b6c6e 100644 (file)
--- 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;
 }