rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

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

Browse Source
This commit is contained in:
Mark Otto 2012-01-28 22:48:25 -08:00
parent 487dbfdda4
commit 62f4a1571a
6 changed files with 46 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/assets/css/bootstrap-responsive.css vendored
View File

@ -342,4 +342,10 @@
.offset11 { .offset11 {
margin-left: 1130px; margin-left: 1130px;
} }
.thumbnails {
margin-left: -30px;
}
.thumbnails > li {
margin-left: 30px;
}
} }

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

@ -2988,6 +2988,8 @@ a.thumbnail:hover {
.thumbnail > img { .thumbnail > img {
display: block; display: block;
max-width: 100%; max-width: 100%;
margin-left: auto;
margin-right: auto;
} }
.thumbnail .caption { .thumbnail .caption {
padding: 9px; padding: 9px;

28
docs/components.html
View File

@ -1057,22 +1057,22 @@
<ul class="thumbnails"> <ul class="thumbnails">
<li class="span3"> <li class="span3">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img src="http://placehold.it/210x150" alt=""> <img src="http://placehold.it/260x180" alt="">
</a> </a>
</li> </li>
<li class="span3"> <li class="span3">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img src="http://placehold.it/210x150" alt=""> <img src="http://placehold.it/260x180" alt="">
</a> </a>
</li> </li>
<li class="span3"> <li class="span3">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img src="http://placehold.it/210x150" alt=""> <img src="http://placehold.it/260x180" alt="">
</a> </a>
</li> </li>
<li class="span3"> <li class="span3">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img src="http://placehold.it/210x150" alt=""> <img src="http://placehold.it/260x180" alt="">
</a> </a>
</li> </li>
</ul> </ul>
@ -1083,7 +1083,7 @@
<ul class="thumbnails"> <ul class="thumbnails">
<li class="span3"> <li class="span3">
<div class="thumbnail"> <div class="thumbnail">
<img src="http://placehold.it/210x150" alt=""> <img src="http://placehold.it/260x180" alt="">
<div class="caption"> <div class="caption">
<h5>Thumbnail label</h5> <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>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>
<li class="span3"> <li class="span3">
<div class="thumbnail"> <div class="thumbnail">
<img src="http://placehold.it/210x150" alt=""> <img src="http://placehold.it/260x180" alt="">
<div class="caption"> <div class="caption">
<h5>Thumbnail label</h5> <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>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;ul class="thumbnails"&gt;
&lt;li class="span3"&gt; &lt;li class="span3"&gt;
&lt;a href="#" class="thumbnail"&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;/a&gt;
&lt;/li&gt; &lt;/li&gt;
... ...
@ -1139,7 +1139,7 @@
&lt;ul class="thumbnails"&gt; &lt;ul class="thumbnails"&gt;
&lt;li class="span3"&gt; &lt;li class="span3"&gt;
&lt;div class="thumbnail"&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;h5&gt;Thumbnail label&lt;/h5&gt;
&lt;p&gt;Thumbnail caption right here...&lt;/p&gt; &lt;p&gt;Thumbnail caption right here...&lt;/p&gt;
&lt;/div&gt; &lt;/div&gt;
@ -1154,32 +1154,32 @@
<ul class="thumbnails"> <ul class="thumbnails">
<li class="span4"> <li class="span4">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img src="http://placehold.it/290x226" alt=""> <img src="http://placehold.it/360x268" alt="">
</a> </a>
</li> </li>
<li class="span2"> <li class="span2">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt=""> <img src="http://placehold.it/160x120" alt="">
</a> </a>
</li> </li>
<li class="span2"> <li class="span2">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt=""> <img src="http://placehold.it/160x120" alt="">
</a> </a>
</li> </li>
<li class="span2"> <li class="span2">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt=""> <img src="http://placehold.it/160x120" alt="">
</a> </a>
</li> </li>
<li class="span2"> <li class="span2">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt=""> <img src="http://placehold.it/160x120" alt="">
</a> </a>
</li> </li>
<li class="span2"> <li class="span2">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt=""> <img src="http://placehold.it/160x120" alt="">
</a> </a>
</li> </li>
</ul> </ul>

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

@ -985,22 +985,22 @@
<ul class="thumbnails"> <ul class="thumbnails">
<li class="span3"> <li class="span3">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img src="http://placehold.it/210x150" alt=""> <img src="http://placehold.it/260x180" alt="">
</a> </a>
</li> </li>
<li class="span3"> <li class="span3">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img src="http://placehold.it/210x150" alt=""> <img src="http://placehold.it/260x180" alt="">
</a> </a>
</li> </li>
<li class="span3"> <li class="span3">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img src="http://placehold.it/210x150" alt=""> <img src="http://placehold.it/260x180" alt="">
</a> </a>
</li> </li>
<li class="span3"> <li class="span3">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img src="http://placehold.it/210x150" alt=""> <img src="http://placehold.it/260x180" alt="">
</a> </a>
</li> </li>
</ul> </ul>
@ -1011,7 +1011,7 @@
<ul class="thumbnails"> <ul class="thumbnails">
<li class="span3"> <li class="span3">
<div class="thumbnail"> <div class="thumbnail">
<img src="http://placehold.it/210x150" alt=""> <img src="http://placehold.it/260x180" alt="">
<div class="caption"> <div class="caption">
<h5>{{_i}}Thumbnail label{{/i}}</h5> <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>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>
<li class="span3"> <li class="span3">
<div class="thumbnail"> <div class="thumbnail">
<img src="http://placehold.it/210x150" alt=""> <img src="http://placehold.it/260x180" alt="">
<div class="caption"> <div class="caption">
<h5>{{_i}}Thumbnail label{{/i}}</h5> <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>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;ul class="thumbnails"&gt;
&lt;li class="span3"&gt; &lt;li class="span3"&gt;
&lt;a href="#" class="thumbnail"&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;/a&gt;
&lt;/li&gt; &lt;/li&gt;
... ...
@ -1067,7 +1067,7 @@
&lt;ul class="thumbnails"&gt; &lt;ul class="thumbnails"&gt;
&lt;li class="span3"&gt; &lt;li class="span3"&gt;
&lt;div class="thumbnail"&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;h5&gt;{{_i}}Thumbnail label{{/i}}&lt;/h5&gt;
&lt;p&gt;{{_i}}Thumbnail caption right here...{{/i}}&lt;/p&gt; &lt;p&gt;{{_i}}Thumbnail caption right here...{{/i}}&lt;/p&gt;
&lt;/div&gt; &lt;/div&gt;
@ -1082,32 +1082,32 @@
<ul class="thumbnails"> <ul class="thumbnails">
<li class="span4"> <li class="span4">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img src="http://placehold.it/290x226" alt=""> <img src="http://placehold.it/360x268" alt="">
</a> </a>
</li> </li>
<li class="span2"> <li class="span2">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt=""> <img src="http://placehold.it/160x120" alt="">
</a> </a>
</li> </li>
<li class="span2"> <li class="span2">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt=""> <img src="http://placehold.it/160x120" alt="">
</a> </a>
</li> </li>
<li class="span2"> <li class="span2">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt=""> <img src="http://placehold.it/160x120" alt="">
</a> </a>
</li> </li>
<li class="span2"> <li class="span2">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt=""> <img src="http://placehold.it/160x120" alt="">
</a> </a>
</li> </li>
<li class="span2"> <li class="span2">
<a href="#" class="thumbnail"> <a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt=""> <img src="http://placehold.it/160x120" alt="">
</a> </a>
</li> </li>
</ul> </ul>

8
less/responsive.less
View File

@ -358,4 +358,12 @@
.offset10 { .offset(10); } .offset10 { .offset(10); }
.offset11 { .offset(11); } .offset11 { .offset(11); }
// Thumbnails
.thumbnails {
margin-left: @gridGutterWidth * -1;
}
.thumbnails > li {
margin-left: @gridGutterWidth;
}
} }

2
less/thumbnails.less
View File

@ -27,6 +27,8 @@ a.thumbnail:hover {
.thumbnail > img { .thumbnail > img {
display: block; display: block;
max-width: 100%; max-width: 100%;
margin-left: auto;
margin-right: auto;
} }
.thumbnail .caption { .thumbnail .caption {
padding: 9px; padding: 9px;