mirror of
https://github.com/twbs/bootstrap.git
synced 2022-11-09 12:25:43 -05:00
update thumbnails to fix display issues and refine aesthetics
This commit is contained in:
Mark Otto
parent
62c386259b
commit
a645664e50
5 changed files with 144 additions and 104 deletions
9
docs/assets/css/bootstrap.css
vendored
9
docs/assets/css/bootstrap.css
vendored
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -33,10 +33,10 @@ body {
|
|||
p {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
li {
|
||||
/*li {
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
*/
|
||||
/* Code in headings */
|
||||
h3 code {
|
||||
font-size: 14px;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
115
docs/templates/pages/components.mustache
vendored
115
docs/templates/pages/components.mustache
vendored
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue