From a645664e503475af2b8ed6f81f6860aad188f327 Mon Sep 17 00:00:00 2001
From: Mark Otto <markotto@twitter.com>
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 @@
<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">
<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 @@
<p>For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <code><a></code> for a <code><div></code> like so:</p>
<pre class="prettyprint linenums">
<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 @@
<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 4fc982e5ba..ea6cc4516f 100644
--- 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">
<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 @@
<p>{{_i}}For custom HTML content in thumbnails, the markup changes slightly. To allow block level content anywhere, we swap the <code><a></code> for a <code><div></code> like so:{{/i}}</p>
<pre class="prettyprint linenums">
<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 @@
<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 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;
}
--
GitLab