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

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

parent 487dbfdd
2 merge requests!14752.0 wip,!1403warningText and warningBackground docs fix
Hide whitespace changes
Inline Side-by-side
Showing
with 46 additions and 28 deletions
+46 -28
docs/assets/css/bootstrap-responsive.css
+ 6
- 0
View file @ 62f4a157
......@@ -342,4 +342,10 @@
.offset11 {
margin-left: 1130px;
}
.thumbnails {
margin-left: -30px;
}
.thumbnails > li {
margin-left: 30px;
}
}
docs/assets/css/bootstrap.css
+ 2
- 0
View file @ 62f4a157
......@@ -2988,6 +2988,8 @@ a.thumbnail:hover {
.thumbnail > img {
display: block;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.thumbnail .caption {
padding: 9px;
......
docs/components.html
+ 14
- 14
View file @ 62f4a157
......@@ -1057,22 +1057,22 @@
<ul class="thumbnails">
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/210x150" alt="">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/210x150" alt="">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/210x150" alt="">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/210x150" alt="">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
</ul>
......@@ -1083,7 +1083,7 @@
<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<img src="http://placehold.it/210x150" alt="">
<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>
......@@ -1093,7 +1093,7 @@
</li>
<li class="span3">
<div class="thumbnail">
<img src="http://placehold.it/210x150" alt="">
<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>
......@@ -1128,7 +1128,7 @@
&lt;ul class="thumbnails"&gt;
&lt;li class="span3"&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;/li&gt;
...
......@@ -1139,7 +1139,7 @@
&lt;ul class="thumbnails"&gt;
&lt;li class="span3"&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;p&gt;Thumbnail caption right here...&lt;/p&gt;
&lt;/div&gt;
......@@ -1154,32 +1154,32 @@
<ul class="thumbnails">
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/290x226" alt="">
<img src="http://placehold.it/360x268" alt="">
</a>
</li>
<li class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt="">
<img src="http://placehold.it/160x120" alt="">
</a>
</li>
<li class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt="">
<img src="http://placehold.it/160x120" alt="">
</a>
</li>
<li class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt="">
<img src="http://placehold.it/160x120" alt="">
</a>
</li>
<li class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt="">
<img src="http://placehold.it/160x120" alt="">
</a>
</li>
<li class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt="">
<img src="http://placehold.it/160x120" alt="">
</a>
</li>
</ul>
......
docs/templates/pages/components.mustache
+ 14
- 14
View file @ 62f4a157
......@@ -985,22 +985,22 @@
<ul class="thumbnails">
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/210x150" alt="">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/210x150" alt="">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/210x150" alt="">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/210x150" alt="">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
</ul>
......@@ -1011,7 +1011,7 @@
<ul class="thumbnails">
<li class="span3">
<div class="thumbnail">
<img src="http://placehold.it/210x150" alt="">
<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>
......@@ -1021,7 +1021,7 @@
</li>
<li class="span3">
<div class="thumbnail">
<img src="http://placehold.it/210x150" alt="">
<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>
......@@ -1056,7 +1056,7 @@
&lt;ul class="thumbnails"&gt;
&lt;li class="span3"&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;/li&gt;
...
......@@ -1067,7 +1067,7 @@
&lt;ul class="thumbnails"&gt;
&lt;li class="span3"&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;p&gt;{{_i}}Thumbnail caption right here...{{/i}}&lt;/p&gt;
&lt;/div&gt;
......@@ -1082,32 +1082,32 @@
<ul class="thumbnails">
<li class="span4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/290x226" alt="">
<img src="http://placehold.it/360x268" alt="">
</a>
</li>
<li class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt="">
<img src="http://placehold.it/160x120" alt="">
</a>
</li>
<li class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt="">
<img src="http://placehold.it/160x120" alt="">
</a>
</li>
<li class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt="">
<img src="http://placehold.it/160x120" alt="">
</a>
</li>
<li class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt="">
<img src="http://placehold.it/160x120" alt="">
</a>
</li>
<li class="span2">
<a href="#" class="thumbnail">
<img src="http://placehold.it/130x100" alt="">
<img src="http://placehold.it/160x120" alt="">
</a>
</li>
</ul>
......
less/responsive.less
+ 8
- 0
View file @ 62f4a157
......@@ -358,4 +358,12 @@
.offset10 { .offset(10); }
.offset11 { .offset(11); }
// Thumbnails
.thumbnails {
margin-left: @gridGutterWidth * -1;
}
.thumbnails > li {
margin-left: @gridGutterWidth;
}
}
less/thumbnails.less
+ 2
- 0
View file @ 62f4a157
......@@ -27,6 +27,8 @@ a.thumbnail:hover {
.thumbnail > img {
display: block;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
.thumbnail .caption {
padding: 9px;
......
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