kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

fix #2572: streamline thumbnails css to allow for offsets

Browse source
This commit is contained in:
Mark Otto 2012-04-01 00:59:34 -07:00
parent 33fa705c7f
commit fe05f9aeb2
7 changed files with 56 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
docs/assets/bootstrap.zip
View file

Binary file not shown.

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

@ -164,9 +164,6 @@
width: auto;
margin: 0;
}
.thumbnails [class*="span"] {
width: auto;
}
input[class*="span"],
select[class*="span"],
textarea[class*="span"],
@ -597,9 +594,6 @@
.thumbnails {
margin-left: -30px;
}
.thumbnails > li {
margin-left: 30px;
}
}
@media (max-width: 979px) {
body {

3
docs/assets/css/bootstrap.css vendored
View file

@ -3627,8 +3627,7 @@ input[type="submit"].btn.btn-mini {
clear: both;
}
.thumbnails > li {
float: left;
margin: 0 0 18px 20px;
margin-bottom: 18px;
}
.thumbnail {
display: block;

3
less/responsive-1200px-min.less
View file

@ -16,8 +16,5 @@
.thumbnails {
margin-left: -30px;
}
.thumbnails > li {
margin-left: 30px;
}
}

6
less/responsive-767px-max.less
View file

@ -124,12 +124,6 @@
margin: 0;
}
// THUMBNAILS
// ----------
.thumbnails [class*="span"] {
width: auto;
}
// FORM FIELDS
// -----------
// Make span* classes full width

50
less/tests/css-tests.html
View file

@ -329,9 +329,9 @@
</div><!--/span-->
</div><!--/row-->
</div>
<br>
<!-- Dropdowns
================================================== -->
@ -339,7 +339,6 @@
<h1>Dropdowns</h1>
</div>
<h4>Dropdown link with hash URL</h4>
<ul class="nav nav-pills">
<li class="active"><a href="#">Link</a></li>
@ -375,6 +374,53 @@
</ul>
</li>
</ul>
<br>
<!-- Thumbnails
================================================== -->
<div class="page-header">
<h1>Thumbnails</h1>
</div>
<h4>Offset thumbnails</h4>
<ul class="thumbnails">
<li class="span3 offset3">
<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>
<ul class="thumbnails">
<li class="span3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/260x180" alt="">
</a>
</li>
<li class="span3 offset3">
<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>

9
less/thumbnails.less
View file

@ -1,15 +1,19 @@
// THUMBNAILS
// ----------
// Make wrapper ul behave like the grid
.thumbnails {
margin-left: -@gridGutterWidth;
list-style: none;
.clearfix();
}
// Float li to make thumbnails appear in a row
.thumbnails > li {
float: left;
margin: 0 0 @baseLineHeight @gridGutterWidth;
margin-bottom: @baseLineHeight;
}
// The actual thumbnail (can be `a` or `div`)
.thumbnail {
display: block;
padding: 4px;
@ -23,6 +27,7 @@ a.thumbnail:hover {
border-color: @linkColor;
.box-shadow(0 1px 4px rgba(0,105,214,.25));
}
// Images and captions
.thumbnail > img {
display: block;