rev/bootstrap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
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 %}