rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-06 04:08:22 +01:00
Code Issues Actions Packages Releases Activity

update thumbnails to fix display issues and refine aesthetics

Browse Source
This commit is contained in:
Mark Otto 2012-07-05 10:12:15 -07:00
parent 62c386259b
commit a645664e50
5 changed files with 144 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
docs/assets/css/bootstrap.css vendored
View File

@ -4855,14 +4855,14 @@ input[type="submit"].btn.btn-mini {
.thumbnail { .thumbnail {
display: block; display: block;
padding: 4px; padding: 4px;
line-height: 1; line-height: 20px;
border: 1px solid #ddd; border: 1px solid #ddd;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;
-moz-border-radius: 4px; -moz-border-radius: 4px;
border-radius: 4px; border-radius: 4px;
-webkit-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 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
} }
a.thumbnail:hover { a.thumbnail:hover {
@ -4881,6 +4881,7 @@ a.thumbnail:hover {
.thumbnail .caption { .thumbnail .caption {
padding: 9px; padding: 9px;
color: #555555;
} }
.label, .label,

4
docs/assets/css/docs.css
View File

@ -33,10 +33,10 @@ body {
p { p {
margin-bottom: 15px; margin-bottom: 15px;
} }
li { /*li {
line-height: 25px; line-height: 25px;
} }
*/
/* Code in headings */ /* Code in headings */
h3 code { h3 code {
font-size: 14px; font-size: 14px;

43
docs/components.html
View File

@ -1679,6 +1679,7 @@
<h2>Default thumbnails</h2> <h2>Default thumbnails</h2>
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p> <p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
<div class="row-fluid">
<ul class="thumbnails"> <ul class="thumbnails">
<li class="span3"> <li class="span3">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
@ -1701,31 +1702,44 @@
</a> </a>
</li> </li>
</ul> </ul>
</div>
<h2>Highly customizable</h2> <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> <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>
<div class="row-fluid">
<ul class="thumbnails"> <ul class="thumbnails">
<li class="span3"> <li class="span4">
<div class="thumbnail"> <div class="thumbnail">
<img src="http://placehold.it/260x180" alt=""> <img src="http://placehold.it/300x200" alt="">
<div class="caption"> <div class="caption">
<h5>Thumbnail label</h5> <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>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> <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div> </div>
</div> </div>
</li> </li>
<li class="span3"> <li class="span4">
<div class="thumbnail"> <div class="thumbnail">
<img src="http://placehold.it/260x180" alt=""> <img src="http://placehold.it/300x200" alt="">
<div class="caption"> <div class="caption">
<h5>Thumbnail label</h5> <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>
<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>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> <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
</div> </div>
</div> </div>
</li> </li>
</ul> </ul>
</div>
<h3>Why use thumbnails</h3> <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> <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> <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"> <pre class="prettyprint linenums">
&lt;ul class="thumbnails"&gt; &lt;ul class="thumbnails"&gt;
&lt;li class="span3"&gt; &lt;li class="span4"&gt;
&lt;a href="#" class="thumbnail"&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;/a&gt;
&lt;/li&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> <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"> <pre class="prettyprint linenums">
&lt;ul class="thumbnails"&gt; &lt;ul class="thumbnails"&gt;
&lt;li class="span3"&gt; &lt;li class="span4"&gt;
&lt;div class="thumbnail"&gt; &lt;div class="thumbnail"&gt;
&lt;img src="http://placehold.it/260x180" alt=""&gt; &lt;img src="http://placehold.it/300x200" alt=""&gt;
&lt;h5&gt;Thumbnail label&lt;/h5&gt; &lt;h3&gt;Thumbnail label&lt;/h3&gt;
&lt;p&gt;Thumbnail caption right here...&lt;/p&gt; &lt;p&gt;Thumbnail caption...&lt;/p&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/li&gt; &lt;/li&gt;
... ...
@ -1795,6 +1809,11 @@
<img src="http://placehold.it/160x120" alt=""> <img src="http://placehold.it/160x120" alt="">
</a> </a>
</li> </li>
<li class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/160x120" alt="">
</a>
</li>
</ul> </ul>
</section> </section>

43
docs/templates/pages/components.mustache vendored
View File

@ -1602,6 +1602,7 @@
<h2>{{_i}}Default thumbnails{{/i}}</h2> <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> <p>{{_i}}By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.{{/i}}</p>
<div class="row-fluid">
<ul class="thumbnails"> <ul class="thumbnails">
<li class="span3"> <li class="span3">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
@ -1624,31 +1625,44 @@
</a> </a>
</li> </li>
</ul> </ul>
</div>
<h2>{{_i}}Highly customizable{{/i}}</h2> <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> <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>
<div class="row-fluid">
<ul class="thumbnails"> <ul class="thumbnails">
<li class="span3"> <li class="span4">
<div class="thumbnail"> <div class="thumbnail">
<img src="http://placehold.it/260x180" alt=""> <img src="http://placehold.it/300x200" alt="">
<div class="caption"> <div class="caption">
<h5>{{_i}}Thumbnail label{{/i}}</h5> <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>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> <p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
</div> </div>
</div> </div>
</li> </li>
<li class="span3"> <li class="span4">
<div class="thumbnail"> <div class="thumbnail">
<img src="http://placehold.it/260x180" alt=""> <img src="http://placehold.it/300x200" alt="">
<div class="caption"> <div class="caption">
<h5>{{_i}}Thumbnail label{{/i}}</h5> <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>
<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>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> <p><a href="#" class="btn btn-primary">{{_i}}Action{{/i}}</a> <a href="#" class="btn">{{_i}}Action{{/i}}</a></p>
</div> </div>
</div> </div>
</li> </li>
</ul> </ul>
</div>
<h3>{{_i}}Why use thumbnails{{/i}}</h3> <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> <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> <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"> <pre class="prettyprint linenums">
&lt;ul class="thumbnails"&gt; &lt;ul class="thumbnails"&gt;
&lt;li class="span3"&gt; &lt;li class="span4"&gt;
&lt;a href="#" class="thumbnail"&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;/a&gt;
&lt;/li&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> <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"> <pre class="prettyprint linenums">
&lt;ul class="thumbnails"&gt; &lt;ul class="thumbnails"&gt;
&lt;li class="span3"&gt; &lt;li class="span4"&gt;
&lt;div class="thumbnail"&gt; &lt;div class="thumbnail"&gt;
&lt;img src="http://placehold.it/260x180" alt=""&gt; &lt;img src="http://placehold.it/300x200" alt=""&gt;
&lt;h5&gt;{{_i}}Thumbnail label{{/i}}&lt;/h5&gt; &lt;h3&gt;{{_i}}Thumbnail label{{/i}}&lt;/h3&gt;
&lt;p&gt;{{_i}}Thumbnail caption right here...{{/i}}&lt;/p&gt; &lt;p&gt;{{_i}}Thumbnail caption...{{/i}}&lt;/p&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/li&gt; &lt;/li&gt;
... ...
@ -1718,6 +1732,11 @@
<img src="http://placehold.it/160x120" alt=""> <img src="http://placehold.it/160x120" alt="">
</a> </a>
</li> </li>
<li class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/160x120" alt="">
</a>
</li>
</ul> </ul>
</section> </section>

5
less/thumbnails.less
View File

@ -27,10 +27,10 @@
.thumbnail { .thumbnail {
display: block; display: block;
padding: 4px; padding: 4px;
line-height: 1; line-height: 20px;
border: 1px solid #ddd; border: 1px solid #ddd;
.border-radius(4px); .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 // Add a hover state for linked versions only
a.thumbnail:hover { a.thumbnail:hover {
@ -47,4 +47,5 @@ a.thumbnail:hover {
} }
.thumbnail .caption { .thumbnail .caption {
padding: 9px; padding: 9px;
color: @gray;
} }