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

Merge pull request #17168 from kkirsche/patch-19

Browse source 
v4 - Rename .img-responsive class to .img-fluid
This commit is contained in:
Mark Otto 2015-09-02 00:33:26 -07:00
commit 5fc4b35349
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 { .bd-featured-sites .col-xs-6 {
padding: 1px; padding: 1px;
} }
.bd-featured-sites .img-responsive { .bd-featured-sites .img-fluid {
margin-top: 0; margin-top: 0;
} }

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

@ -72,7 +72,7 @@
} }
@media (min-width: 480px) { @media (min-width: 480px) {
.bd-featurette .img-responsive { .bd-featurette .img-fluid {
margin-top: 2rem; margin-top: 2rem;
} }
} }
@ -91,7 +91,7 @@
.bd-featurette .lead { .bd-featurette .lead {
max-width: 80%; max-width: 80%;
} }
.bd-featurette .img-responsive { .bd-featurette .img-fluid {
margin-top: 0; 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 ## 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"> <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> </div>
{% highlight html %} {% highlight html %}
<img src="..." class="img-responsive" alt="Responsive image"> <img src="..." class="img-fluid" alt="Responsive image">
{% endhighlight %} {% endhighlight %}
{% callout warning %} {% callout warning %}
#### SVG images and IE 9-10 #### 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 %} {% endcallout %}
## Image shapes ## Image shapes

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

@ -649,7 +649,7 @@ mark,
color: #818a91; 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 { .carousel-inner > .carousel-item > a > img {
display: block; display: block;
max-width: 100%; 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> <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>
<div class="col-md-5"> <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>
</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> <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>
<div class="col-md-5 col-md-pull-7"> <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>
</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> <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>
<div class="col-md-5"> <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>
</div> </div>

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

@ -71,22 +71,22 @@
<div class="row placeholders"> <div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder"> <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> <h4>Label</h4>
<span class="text-muted">Something else</span> <span class="text-muted">Something else</span>
</div> </div>
<div class="col-xs-6 col-sm-3 placeholder"> <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> <h4>Label</h4>
<span class="text-muted">Something else</span> <span class="text-muted">Something else</span>
</div> </div>
<div class="col-xs-6 col-sm-3 placeholder"> <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> <h4>Label</h4>
<span class="text-muted">Something else</span> <span class="text-muted">Something else</span>
</div> </div>
<div class="col-xs-6 col-sm-3 placeholder"> <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> <h4>Label</h4>
<span class="text-muted">Something else</span> <span class="text-muted">Something else</span>
</div> </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="row">
<div class="col-sm-4 m-b-lg"> <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> <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> <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>
<div class="col-sm-4 m-b-lg"> <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> <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> <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>
<div class="col-sm-4 m-b-lg"> <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> <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> <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> </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> <a href="{{ site.themes }}" class="btn btn-bs btn-outline">Browse themes</a>
</p> </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>
</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 %} {% for showcase in site.data.showcase %}
<div class="col-xs-6 col-sm-3"> <div class="col-xs-6 col-sm-3">
<a href="{{ showcase.expo_url }}" target="_blank" title="{{ showcase.name }}"> <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> </a>
</div> </div>
{% endfor %} {% endfor %}

2
scss/_carousel.scss
View file

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

6
scss/_images.scss
View file

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

2
scss/_type.scss
View file

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

2
scss/mixins/_image.scss
View file

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