Twitter Bootstrap Media Grid: square box with images
This is not really a question, but a solution to a problem I just had. I'm posting it here, because I can imagine others would like to use it.
The problem I had was: I want to show an overview of square image tiles using Twitter Bootstrap (Media Grid module) with a fixed width using the grid system (span2, span3, etc.) without cluttering the markup.
The LESS code below works out of the box and is an extension to the Bootstrap library:
.squareColumns(@columnSpan: 1) {
width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
height: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}
.maxSquareColumns(@columnSpan: 1) {
max-width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
max-height: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}
ul.square-media-grid {
.media-grid;
li a.span1 { .squareColumns(1); img { .maxSquareColumns(1); } }
li a.span2 { .squareColumns(2); img { .maxSquareColumns(2); } }
li a.span3 { .squareColumns(3); img { .maxSquareColumns(3); } }
li a.span4 { .squareColumns(4); img { .maxSquareColumns(4); } }
li a.span5 { .squareColumns(5); img { .maxSquareColumns(5); } }
li a.span6 { .squareColumns(6); img { .maxSquareColumns(6); } }
li a.span7 { .squareColumns(7); img { .maxSquareColumns(7); } }
li a.span8 { .squareColumns(8); img { .maxSquareColumns(8); } }
li a.span9 { .squareColumns(9); img { .maxSquareColumns(9); } }
li a.span10 { .squareColumns(10); img { .maxSquareColumns(10); } }
li a.span11 { .squareColumns(11); img { .maxSquareColumns(11); } }
li a.span12 { .squareColumns(12); img { .maxSquareColumns(12); } }
li a.span13 { .squareColumns(13); img { .maxSquareColumns(13); } }
li a.span14 { .squareColumns(14); img { .maxSquareColumns(14); } }
li a.span15 { .squareColumns(15); img { .maxSquareColumns(15); } }
li a.span16 { .squareColumns(16); img { .maxSquareColumns(16); } }
li a.span17 { .squareColumns(17); img { .maxSquareColumns(17); } }
li a.span18 { .squareColumns(18); img { .maxSquareColumns(18); } }
li a.span19 { .squareColumns(19); img { .maxSquareColumns(19); } }
li a.span20 { .squareColumns(20); img { .maxSquareColumns(20); } }
li a.span21 { .squareColumns(21); img { .maxSquareColumns(21); } }
li a.span22 { .squareColumns(22); img { .maxSquareColumns(22); } }
li a.span23 { .squareColumns(23); img { .maxSquareColumns(23); } }
li a.span24 { .squareColumns(24); img { .maxSquareColumns(24); } }
li a img { display: block; margin: auto; }
}
Usage:
<ul class="square-media-grid">
<li>
<a href="#" class="span3">
<img class="thumbnail" src="http://placehold.it/330x230" alt="">
</a>
</li>
<li>
<a href="#" class="span3">
<img class="thumbnail" src="http://placehold.it/80x120" alt="">
</a>
</li>
<li>
<a href="#" class="span3">
<img class="thumbnail" src="http://placehold.it/230x330" alt="">
</a>
</li>
</ul>
Result:
http://tinyurl.com/7aqby3a
链接地址: http://www.djcxy.com/p/88312.html上一篇: 响应式网格布局框架