Skip to content
GitLab
Commit a645664e authored by Mark Otto's avatar Mark Otto
Browse files

update thumbnails to fix display issues and refine aesthetics

parent 62c38625
Hide whitespace changes
Inline Side-by-side
Showing
with 144 additions and 104 deletions
+144 -104
docs/assets/css/bootstrap.css
+ 5
- 4
View file @ a645664e
......@@ -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,
......
docs/assets/css/docs.css
+ 2
- 2
View file @ a645664e
......@@ -33,10 +33,10 @@ body {
p {
margin-bottom: 15px;
}
li {
/*li {
line-height: 25px;
}
*/
/* Code in headings */
h3 code {
font-size: 14px;
......
docs/components.html
+ 67
- 48
View file @ a645664e
......@@ -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>
......
docs/templates/pages/components.mustache
+ 67
- 48
View file @ a645664e
......@@ -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>
......
less/thumbnails.less
+ 3
- 2
View file @ a645664e
......@@ -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;
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment