border-radius: 6px;
}
-.img-polaroid {
+.img-thumbnail {
+ display: block;
+ display: inline-block;
padding: 4px;
- background-color: #fff;
- border: 1px solid #ccc;
- border: 1px solid rgba(0, 0, 0, 0.2);
- -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+ line-height: 20px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ -webkit-transition: all 0.2s ease-in-out;
+ -moz-transition: all 0.2s ease-in-out;
+ -o-transition: all 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
}
.img-circle {
<div class="bs-docs-example bs-docs-example-images">
<img data-src="holder.js/140x140" class="img-rounded">
<img data-src="holder.js/140x140" class="img-circle">
- <img data-src="holder.js/140x140" class="img-polaroid">
+ <img data-src="holder.js/140x140" class="img-thumbnail">
</div>
<pre class="prettyprint linenums">
<img src="..." class="img-rounded">
<img src="..." class="img-circle">
-<img src="..." class="img-polaroid">
+<img src="..." class="img-thumbnail">
</pre>
</section>
<div class="bs-docs-example bs-docs-example-images">
<img data-src="holder.js/140x140" class="img-rounded">
<img data-src="holder.js/140x140" class="img-circle">
- <img data-src="holder.js/140x140" class="img-polaroid">
+ <img data-src="holder.js/140x140" class="img-thumbnail">
</div>
<pre class="prettyprint linenums">
<img src="..." class="img-rounded">
<img src="..." class="img-circle">
-<img src="..." class="img-polaroid">
+<img src="..." class="img-thumbnail">
</pre>
</section>
border-radius: 6px;
}
-// Add polaroid-esque trim
-.img-polaroid {
- padding: 4px;
- background-color: #fff;
- border: 1px solid #ccc;
- border: 1px solid rgba(0,0,0,.2);
- .box-shadow(0 1px 3px rgba(0,0,0,.1));
+// Image thumbnails
+.img-thumbnail {
+ .thumbnail();
+ display: inline-block;
}
// Perfect circle