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

adding more media sizes

Browse source
This commit is contained in:
Mark Otto 2011-09-10 22:47:38 -07:00
parent 3755ee158f
commit d0f7637a7d
4 changed files with 51 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
bootstrap-1.3.0.css vendored
View file

@ -6,7 +6,7 @@
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world @twitter by @mdo and @fat.
* Date: Sat Sep 10 22:27:15 PDT 2011
* Date: Sat Sep 10 22:46:48 PDT 2011
*/
/* Reset.less
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@ -2237,6 +2237,17 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
}
.media-grid {
margin-left: -20px;
margin-bottom: 0;
zoom: 1;
}
.media-grid:before, .media-grid:after {
display: table;
content: "";
zoom: 1;
*display: inline;
}
.media-grid:after {
clear: both;
}
.media-grid li {
display: inline;

4
bootstrap-1.3.0.min.css vendored
View file

@ -305,6 +305,8 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
.label.warning{background-color:#f89406;}
.label.success{background-color:#46a546;}
.label.notice{background-color:#62cffc;}
.media-grid{margin-left:-20px;}.media-grid li{display:inline;}
.media-grid{margin-left:-20px;margin-bottom:0;zoom:1;}.media-grid:before,.media-grid:after{display:table;content:"";zoom:1;*display:inline;}
.media-grid:after{clear:both;}
.media-grid li{display:inline;}
.media-grid .thumbnail{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid .thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}
.media-grid img{display:block;}

34
docs/index.html
View file

@ -712,6 +712,22 @@
<p>Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.</p>
</div>
<div class="span12">
<h3>Example thumbnails</h3>
<p>Thumbnails in the <code>.media-grid</code> can be any size, but they work best when mapped directly to the built-in Bootstrap grid system. Image widths like 90, 210, and 330 combine with a few pixels of padding to equal the <code>.span2</code>, <code>.span4</code>, and <code>.span6</code> column sizes.</p>
<h4>Large</h4>
<ul class="media-grid">
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/330x230" alt="">
</a>
</li>
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/330x230" alt="">
</a>
</li>
</ul>
<h4>Medium</h4>
<ul class="media-grid">
<li>
<a class="thumbnail" href="#">
@ -739,6 +755,24 @@
</a>
</li>
</ul>
<h4>Small</h4>
<ul class="media-grid">
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/90x90" alt="">
</a>
</li>
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/90x90" alt="">
</a>
</li>
<li>
<a class="thumbnail" href="#">
<img src="http://placehold.it/90x90" alt="">
</a>
</li>
</ul>
</div>
</div><!-- /row -->
</section>

2
lib/patterns.less
View file

@ -936,6 +936,8 @@ input[type=submit].btn {
.media-grid {
margin-left: -20px;
margin-bottom: 0;
.clearfix();
li {
display: inline;
}