add responsive images section to docs (fixes #8734)
This commit is contained in:
parent
e1180daca0
commit
b0225c073a
11
css.html
11
css.html
|
@ -29,6 +29,12 @@ base_url: "../"
|
|||
<p>To ensure proper rendering and touch zooming, <strong>add the viewport meta tag</strong> to your <code><head></code>.</p>
|
||||
{% highlight html %}
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
{% 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="Reponsive image">
|
||||
{% endhighlight %}
|
||||
|
||||
<h3 id="overview-type-links">Typography and links</h3>
|
||||
|
@ -1778,6 +1784,11 @@ For example, <code><section></code> should be wrapped as inline.
|
|||
<img src="..." class="img-thumbnail">
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Responsive images</h4>
|
||||
<p>Looking for how to make images more responsive? <a href="../css#overview-responsive-images">Check out the responsive images section</a> up top.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue