kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Rename .img-responsive class to .img-fluid 

Fix #17166
This commit is contained in:
Kevin Kirsche 2015-08-20 17:38:40 -04:00 committed by Kevin Kirsche
parent 003f507de3
commit 54fba7cbe5
13 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/assets/css/docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/scss/_featured-sites.scss
View File

@ -5,7 +5,7 @@
.bd-featured-sites .col-xs-6 {
padding: 1px;
}
.bd-featured-sites .img-responsive {
.bd-featured-sites .img-fluid {
margin-top: 0;
}

4
docs/assets/scss/_featurettes.scss
View File

@ -72,7 +72,7 @@
}
@media (min-width: 480px) {
.bd-featurette .img-responsive {
.bd-featurette .img-fluid {
margin-top: 2rem;
}
}
@ -91,7 +91,7 @@
.bd-featurette .lead {
max-width: 80%;
}
.bd-featurette .img-responsive {
.bd-featurette .img-fluid {
margin-top: 0;
}
}

8
docs/content/images.md
View File

@ -13,20 +13,20 @@ Opt your images into responsive behavior (so they never become larger than their
## Responsive images
Images in Bootstrap are made responsive with `.img-responsive`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.
Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.
<div class="bd-example">
<img data-src="holder.js/100%x250" class="img-responsive" alt="Generic responsive image">
<img data-src="holder.js/100%x250" class="img-fluid" alt="Generic responsive image">
</div>
{% highlight html %}
<img src="..." class="img-responsive" alt="Responsive image">
<img src="..." class="img-fluid" alt="Responsive image">
{% endhighlight %}
{% callout warning %}
#### SVG images and IE 9-10
In Internet Explorer 9-10, SVG images with `.img-responsive` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.
In Internet Explorer 9-10, SVG images with `.img-fluid` are disproportionately sized. To fix this, add `width: 100% \9;` where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.
{% endcallout %}
## Image shapes

2
docs/dist/css/bootstrap.css
View File

@ -649,7 +649,7 @@ mark,
color: #818a91;
}
.img-responsive, .figure > img, .carousel-inner > .carousel-item > img,
.img-fluid, .figure > img, .carousel-inner > .carousel-item > img,
.carousel-inner > .carousel-item > a > img {
display: block;
max-width: 100%;

4
docs/dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

6
docs/examples/carousel/index.html
View File

@ -132,7 +132,7 @@
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
<img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
@ -144,7 +144,7 @@
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-5 col-md-pull-7">
<img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
<img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>
@ -156,7 +156,7 @@
<p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div class="col-md-5">
<img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
<img class="featurette-image img-fluid center-block" data-src="holder.js/500x500/auto" alt="Generic placeholder image">
</div>
</div>

8
docs/examples/dashboard/index.html
View File

@ -71,22 +71,22 @@
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>
<div class="col-xs-6 col-sm-3 placeholder">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" width="200" height="200" class="img-fluid" alt="Generic placeholder thumbnail">
<h4>Label</h4>
<span class="text-muted">Something else</span>
</div>

10
docs/index.html
View File

@ -55,17 +55,17 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
<div class="row">
<div class="col-sm-4 m-b-lg">
<img src="assets/img/sass.png" alt="Sass support" class="img-responsive">
<img src="assets/img/sass.png" alt="Sass support" class="img-fluid">
<h4>Preprocessor</h4>
<p>Bootstrap ships with vanilla CSS, but its source code utilizes <a href="http://sass-lang.com/">Sass</a>, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.</p>
</div>
<div class="col-sm-4 m-b-lg">
<img src="assets/img/devices.png" alt="Responsive across devices" class="img-responsive">
<img src="assets/img/devices.png" alt="Responsive across devices" class="img-fluid">
<h4>One framework, every device.</h4>
<p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
</div>
<div class="col-sm-4 m-b-lg">
<img src="assets/img/components.png" alt="Components" class="img-responsive">
<img src="assets/img/components.png" alt="Components" class="img-fluid">
<h4>Full of features</h4>
<p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
</div>
@ -89,7 +89,7 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
<a href="{{ site.themes }}" class="btn btn-bs btn-outline">Browse themes</a>
</p>
<img class="img-responsive center-block" src="{{ site.baseurl }}/assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388">
<img class="img-fluid center-block" src="{{ site.baseurl }}/assets/img/bs-themes.png" alt="Bootstrap Themes" width="1024" height="388">
</div>
</div>
@ -102,7 +102,7 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
{% for showcase in site.data.showcase %}
<div class="col-xs-6 col-sm-3">
<a href="{{ showcase.expo_url }}" target="_blank" title="{{ showcase.name }}">
<img src="{{ site.baseurl }}/assets/img/expo-{{ showcase.img }}.jpg" alt="{{ showcase.name }}" class="img-responsive">
<img src="{{ site.baseurl }}/assets/img/expo-{{ showcase.img }}.jpg" alt="{{ showcase.name }}" class="img-fluid">
</a>
</div>
{% endfor %}

2
scss/_carousel.scss
View File

@ -16,7 +16,7 @@
// Account for jankitude on images
> img,
> a > img {
@extend .img-responsive;
@extend .img-fluid;
line-height: 1;
}

6
scss/_images.scss
View File

@ -1,6 +1,6 @@
// Responsive images (ensure images don't scale beyond their parents)
.img-responsive {
@include img-responsive();
.img-fluid {
@include img-fluid();
}
// Rounded corners
@ -19,7 +19,7 @@
@include box-shadow(0 1px 2px rgba(0,0,0,.075));
// Keep them at most 100% wide
@include img-responsive(inline-block);
@include img-fluid(inline-block);
}
// Perfect circle

2
scss/_type.scss
View File

@ -175,7 +175,7 @@ mark,
display: inline-block;
> img {
@extend .img-responsive;
@extend .img-fluid;
margin-bottom: ($spacer-y / 2);
line-height: 1;
}

2
scss/mixins/_image.scss
View File

@ -7,7 +7,7 @@
//
// Keep images from scaling beyond the width of their parents.
@mixin img-responsive($display: block) {
@mixin img-fluid($display: block) {
display: $display;
max-width: 100%; // Part 1: Set a maximum relative to the parent
height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching