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 #12499 from twbs/move-responsive-imgs-sect

Browse source 
move .img-responsive docs from Overview to Images section
This commit is contained in:
Chris Rebert 2014-02-04 01:00:32 -08:00
commit 9cf9f6c099
2 changed files with 11 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
docs/_includes/nav-css.html
View file

@ -3,7 +3,6 @@
<ul class="nav">
<li><a href="#overview-doctype">HTML5 doctype</a></li>
<li><a href="#overview-mobile">Mobile first</a></li>
<li><a href="#overview-responsive-images">Responsive images</a></li>
<li><a href="#overview-type-links">Typography and links</a></li>
<li><a href="#overview-normalize">Normalize.css</a></li>
<li><a href="#overview-container">Containers</a></li>
@ -85,6 +84,10 @@
</li>
<li>
<a href="#images">Images</a>
<ul class="nav">
<li><a href="#images-responsive">Responsive images</a></li>
<li><a href="#images-shapes">Image shapes</a></li>
</ul>
</li>
<li>
<a href="#helper-classes">Helper classes</a>

18
docs/css.html
View file

@ -31,12 +31,6 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<p>You can disable zooming capabilities on mobile devices by adding <code>user-scalable=no</code> to the viewport meta tag. This disables zooming, meaning users are only able to scroll, and results in your site feeling a bit more like a native application. Overall, we don't recommend this on every site, so use caution!</p>
{% highlight html %}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
{% endhighlight %}
<h3 id="overview-responsive-images">Responsive images</h3>
<p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</p>
{% highlight html %}
<img src="..." class="img-responsive" alt="Responsive image">
{% endhighlight %}
<h3 id="overview-type-links">Typography and links</h3>
@ -2337,6 +2331,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="bs-docs-section">
<h1 id="images" class="page-header">Images</h1>
<h2 id="images-responsive">Responsive images</h2>
<p>Images in Bootstrap 3 can be made responsive-friendly via the addition of the <code>.img-responsive</code> class. This applies <code>max-width: 100%;</code> and <code>height: auto;</code> to the image so that it scales nicely to the parent element.</p>
{% highlight html %}
<img src="..." class="img-responsive" alt="Responsive image">
{% endhighlight %}
<h2 id="images-shapes">Image shapes</h2>
<p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project.</p>
<div class="bs-callout bs-callout-danger">
<h4>Cross-browser compatibility</h4>
@ -2352,11 +2353,6 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
{% endhighlight %}
<div class="bs-callout bs-callout-info">
<h4>Responsive images</h4>
<p>Looking for how to make images more responsive? <a href="#overview-responsive-images">Check out the responsive images section</a> up top.</p>
</div>
</div>