mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-24 14:04:09 +03:00
Code 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
parent 0c0f675b94 54fba7cbe5
commit 5fc4b35349
13 changed files with 30 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/assets/css/docs.min.css
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
docs/assets/scss/_featured-sites.scss
+1 -1
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;
}
docs/assets/scss/_featurettes.scss
+2 -2
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;
}
}
docs/content/images.md
+4 -4
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
docs/dist/css/bootstrap.css
+1 -1
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%;
docs/dist/css/bootstrap.min.css
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
docs/examples/carousel/index.html
+3 -3
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>
docs/examples/dashboard/index.html
+4 -4
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>
docs/index.html
+5 -5
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 %}