mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-17 09:52:29 +01:00
Drop: Thumbnails completely, as they'll be replaced
This commit is contained in:
Mark Otto
parent
527eccaa9f
commit
9c319d67ee
28
dist/css/bootstrap.css
vendored
28
dist/css/bootstrap.css
vendored
@ -308,8 +308,6 @@ img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.img-responsive,
|
||||
.thumbnail > img,
|
||||
.thumbnail a > img,
|
||||
.carousel-inner > .item > img,
|
||||
.carousel-inner > .item > a > img {
|
||||
display: block;
|
||||
@ -3985,32 +3983,6 @@ a.list-group-item.active > .badge,
|
||||
font-size: 4.5rem;
|
||||
}
|
||||
}
|
||||
.thumbnail {
|
||||
display: block;
|
||||
padding: 4px;
|
||||
margin-bottom: 24px;
|
||||
line-height: 1.5;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: .2rem;
|
||||
-webkit-transition: all .2s ease-in-out;
|
||||
-o-transition: all .2s ease-in-out;
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
.thumbnail > img,
|
||||
.thumbnail a > img {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
a.thumbnail:hover,
|
||||
a.thumbnail:focus,
|
||||
a.thumbnail.active {
|
||||
border-color: #027de7;
|
||||
}
|
||||
.thumbnail .caption {
|
||||
padding: 9px;
|
||||
color: #373a3c;
|
||||
}
|
||||
.alert {
|
||||
padding: 15px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
2
dist/css/bootstrap.css.map
vendored
2
dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/bootstrap.min.css
vendored
2
dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,93 +0,0 @@
|
||||
<div class="bs-docs-section">
|
||||
<h1 id="thumbnails" class="page-header">Thumbnails</h1>
|
||||
|
||||
<p class="lead">Extend Bootstrap's <a href="../css/#grid">grid system</a> with the thumbnail component to easily display grids of images, videos, text, and more.</p>
|
||||
|
||||
<h3 id="thumbnails-default">Default example</h3>
|
||||
<p>By default, Bootstrap's thumbnails are designed to showcase linked images with minimal required markup.</p>
|
||||
<div class="bs-example">
|
||||
<div class="row">
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img data-src="holder.js/100%x180" alt="Generic placeholder thumbnail">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.bs-example -->
|
||||
{% highlight html %}
|
||||
<div class="row">
|
||||
<div class="col-xs-6 col-md-3">
|
||||
<a href="#" class="thumbnail">
|
||||
<img data-src="holder.js/100%x180" alt="...">
|
||||
</a>
|
||||
</div>
|
||||
...
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="thumbnails-custom-content">Custom content</h3>
|
||||
<p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
|
||||
<div class="bs-example">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="thumbnail">
|
||||
<img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
|
||||
<div class="caption">
|
||||
<h3>Thumbnail label</h3>
|
||||
<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>
|
||||
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="thumbnail">
|
||||
<img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
|
||||
<div class="caption">
|
||||
<h3>Thumbnail label</h3>
|
||||
<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>
|
||||
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="thumbnail">
|
||||
<img data-src="holder.js/100%x200" alt="Generic placeholder thumbnail">
|
||||
<div class="caption">
|
||||
<h3>Thumbnail label</h3>
|
||||
<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>
|
||||
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.bs-example -->
|
||||
{% highlight html %}
|
||||
<div class="row">
|
||||
<div class="col-sm-6 col-md-4">
|
||||
<div class="thumbnail">
|
||||
<img data-src="holder.js/300x300" alt="...">
|
||||
<div class="caption">
|
||||
<h3>Thumbnail label</h3>
|
||||
<p>...</p>
|
||||
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
@ -84,13 +84,6 @@
|
||||
<li><a href="#badges">Badges</a></li>
|
||||
<li><a href="#jumbotron">Jumbotron</a></li>
|
||||
<li><a href="#page-header">Page header</a></li>
|
||||
<li>
|
||||
<a href="#thumbnails">Thumbnails</a>
|
||||
<ul class="nav">
|
||||
<li><a href="#thumbnails-default">Default example</a></li>
|
||||
<li><a href="#thumbnails-custom-content">Custom content</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#alerts">Alerts</a>
|
||||
<ul class="nav">
|
||||
|
||||
@ -17,7 +17,6 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
|
||||
{% include components/badges.html %}
|
||||
{% include components/jumbotron.html %}
|
||||
{% include components/page-header.html %}
|
||||
{% include components/thumbnails.html %}
|
||||
{% include components/alerts.html %}
|
||||
{% include components/progress-bars.html %}
|
||||
{% include components/media.html %}
|
||||
|
||||
28
docs/dist/css/bootstrap.css
vendored
28
docs/dist/css/bootstrap.css
vendored
@ -308,8 +308,6 @@ img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.img-responsive,
|
||||
.thumbnail > img,
|
||||
.thumbnail a > img,
|
||||
.carousel-inner > .item > img,
|
||||
.carousel-inner > .item > a > img {
|
||||
display: block;
|
||||
@ -3985,32 +3983,6 @@ a.list-group-item.active > .badge,
|
||||
font-size: 4.5rem;
|
||||
}
|
||||
}
|
||||
.thumbnail {
|
||||
display: block;
|
||||
padding: 4px;
|
||||
margin-bottom: 24px;
|
||||
line-height: 1.5;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: .2rem;
|
||||
-webkit-transition: all .2s ease-in-out;
|
||||
-o-transition: all .2s ease-in-out;
|
||||
transition: all .2s ease-in-out;
|
||||
}
|
||||
.thumbnail > img,
|
||||
.thumbnail a > img {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
a.thumbnail:hover,
|
||||
a.thumbnail:focus,
|
||||
a.thumbnail.active {
|
||||
border-color: #027de7;
|
||||
}
|
||||
.thumbnail .caption {
|
||||
padding: 9px;
|
||||
color: #373a3c;
|
||||
}
|
||||
.alert {
|
||||
padding: 15px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
2
docs/dist/css/bootstrap.css.map
vendored
2
docs/dist/css/bootstrap.css.map
vendored
File diff suppressed because one or more lines are too long
2
docs/dist/css/bootstrap.min.css
vendored
2
docs/dist/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
1
less/bootstrap.less
vendored
1
less/bootstrap.less
vendored
@ -28,7 +28,6 @@
|
||||
@import "labels.less";
|
||||
@import "badges.less";
|
||||
@import "jumbotron.less";
|
||||
@import "thumbnails.less";
|
||||
@import "alerts.less";
|
||||
@import "progress-bars.less";
|
||||
@import "media.less";
|
||||
|
||||
@ -86,8 +86,6 @@ img {
|
||||
}
|
||||
|
||||
// Image thumbnails
|
||||
//
|
||||
// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
|
||||
.img-thumbnail {
|
||||
padding: @thumbnail-padding;
|
||||
line-height: @line-height-base;
|
||||
|
||||
@ -1,36 +0,0 @@
|
||||
//
|
||||
// Thumbnails
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
// Mixin and adjust the regular image class
|
||||
.thumbnail {
|
||||
display: block;
|
||||
padding: @thumbnail-padding;
|
||||
margin-bottom: @line-height-computed;
|
||||
line-height: @line-height-base;
|
||||
background-color: @thumbnail-bg;
|
||||
border: 1px solid @thumbnail-border;
|
||||
border-radius: @thumbnail-border-radius;
|
||||
transition: all .2s ease-in-out;
|
||||
|
||||
> img,
|
||||
a > img {
|
||||
&:extend(.img-responsive);
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// Add a hover state for linked versions only
|
||||
a&:hover,
|
||||
a&:focus,
|
||||
a&.active {
|
||||
border-color: @link-color;
|
||||
}
|
||||
|
||||
// Image captions
|
||||
.caption {
|
||||
padding: @thumbnail-caption-padding;
|
||||
color: @thumbnail-caption-color;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user