revamped the thumbnails examples to make them work and look better at higher resolution

diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index f40f0c110d5322e865a0662b5e1b36642d8b959b..ca03cecde8aa23c5d0764be83c9f9c5e3498a15c 100644 (file)
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -342,4 +342,10 @@
   .offset11 {
     margin-left: 1130px;
   }
+  .thumbnails {
+    margin-left: -30px;
+  }
+  .thumbnails > li {
+    margin-left: 30px;
+  }
 }

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index a17a4475ddecf5235c8e9dcfbaa3553a79122589..37b774fb9436f1eb454234051268d9bfe1a03148 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2988,6 +2988,8 @@ a.thumbnail:hover {
 .thumbnail > img {
   display: block;
   max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
 }
 .thumbnail .caption {
   padding: 9px;

diff --git a/docs/components.html b/docs/components.html
index 52483572eeca7cbd2926c8e76a6c25ee236a3cd2..7ba72f34daec6b18eb74e3f3c6acb145a94f3216 100644 (file)
--- a/docs/components.html
+++ b/docs/components.html
@@ -1057,22 +1057,22 @@
       <ul class="thumbnails">
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
       </ul>
@@ -1083,7 +1083,7 @@
       <ul class="thumbnails">
         <li class="span3">
           <div class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <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>
@@ -1093,7 +1093,7 @@
         </li>
         <li class="span3">
           <div class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <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>
@@ -1128,7 +1128,7 @@
 &lt;ul class="thumbnails"&gt;
   &lt;li class="span3"&gt;
     &lt;a href="#" class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/210x150" alt=""&gt;
+      &lt;img src="http://placehold.it/260x180" alt=""&gt;
     &lt;/a&gt;
   &lt;/li&gt;
   ...
@@ -1139,7 +1139,7 @@
 &lt;ul class="thumbnails"&gt;
   &lt;li class="span3"&gt;
     &lt;div class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/210x150" alt=""&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;/div&gt;
@@ -1154,32 +1154,32 @@
       <ul class="thumbnails">
         <li class="span4">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/290x226" alt="">
+            <img src="http://placehold.it/360x268" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
       </ul>

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 312863c6b1689429fea5e54956380d5f1d9174ba..11874b9f35e76a860a5b0c7dd186407c36a7a526 100644 (file)
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -985,22 +985,22 @@
       <ul class="thumbnails">
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
         <li class="span3">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <img src="http://placehold.it/260x180" alt="">
           </a>
         </li>
       </ul>
@@ -1011,7 +1011,7 @@
       <ul class="thumbnails">
         <li class="span3">
           <div class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <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>
@@ -1021,7 +1021,7 @@
         </li>
         <li class="span3">
           <div class="thumbnail">
-            <img src="http://placehold.it/210x150" alt="">
+            <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>
@@ -1056,7 +1056,7 @@
 &lt;ul class="thumbnails"&gt;
   &lt;li class="span3"&gt;
     &lt;a href="#" class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/210x150" alt=""&gt;
+      &lt;img src="http://placehold.it/260x180" alt=""&gt;
     &lt;/a&gt;
   &lt;/li&gt;
   ...
@@ -1067,7 +1067,7 @@
 &lt;ul class="thumbnails"&gt;
   &lt;li class="span3"&gt;
     &lt;div class="thumbnail"&gt;
-      &lt;img src="http://placehold.it/210x150" alt=""&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;/div&gt;
@@ -1082,32 +1082,32 @@
       <ul class="thumbnails">
         <li class="span4">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/290x226" alt="">
+            <img src="http://placehold.it/360x268" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
         <li class="span2">
           <a href="#" class="thumbnail">
-            <img src="http://placehold.it/130x100" alt="">
+            <img src="http://placehold.it/160x120" alt="">
           </a>
         </li>
       </ul>

diff --git a/less/responsive.less b/less/responsive.less
index 73209907995470c23e2c1b55a53b2d922febb494..db2675e3db8d4357ffeddf2ce61391c570d9320e 100644 (file)
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -358,4 +358,12 @@
   .offset10  { .offset(10); }
   .offset11  { .offset(11); }
 
+  // Thumbnails
+  .thumbnails {
+    margin-left: @gridGutterWidth * -1;
+  }
+  .thumbnails > li {
+    margin-left: @gridGutterWidth;
+  }
+
 }

diff --git a/less/thumbnails.less b/less/thumbnails.less
index 0ba749059d6975bdbf60ae8fd8e7b39c92ca0f92..541fbd6a7464f1b6c3d8702b3933169c9f384cb5 100644 (file)
--- a/less/thumbnails.less
+++ b/less/thumbnails.less
@@ -27,6 +27,8 @@ a.thumbnail:hover {
 .thumbnail > img {
   display: block;
   max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
 }
 .thumbnail .caption {
   padding: 9px;