diff options
| author | Mark Otto <[email protected]> | 2015-04-17 12:41:49 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2015-04-17 12:41:49 -0700 |
| commit | 0156f9a2379b68cd3cf284bc4e7799fda221203e (patch) | |
| tree | 51a8147fc42d467f0c6e2b9fbe203b6f90de1573 /docs/content/images.md | |
| parent | e70d9077f025cb1cb168e50b87f60423be9e6a00 (diff) | |
| download | bootstrap-0156f9a2379b68cd3cf284bc4e7799fda221203e.tar.xz bootstrap-0156f9a2379b68cd3cf284bc4e7799fda221203e.zip | |
move remaining files to components subdir
Diffstat (limited to 'docs/content/images.md')
| -rw-r--r-- | docs/content/images.md | 74 |
1 files changed, 0 insertions, 74 deletions
diff --git a/docs/content/images.md b/docs/content/images.md deleted file mode 100644 index e7b29d45a..000000000 --- a/docs/content/images.md +++ /dev/null @@ -1,74 +0,0 @@ ---- -layout: page -title: Images ---- - -Opt your images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes. - -## Responsive images - -Images in Bootstrap are responsive by default. `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"> -</div> - -{% highlight html %} -<img src="..." class="img-responsive" 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. -{% endcallout %} - -## Image shapes - -Add classes to an `<img>` element to easily style images in any project. - -<div class="bd-example bd-example-images"> - <img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners"> - <img data-src="holder.js/200x200" class="img-circle" alt="A generic square placeholder image where only the portion within the circle circumscribed about said square is visible"> - <img data-src="holder.js/200x200" class="img-thumbnail" alt="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera"> -</div> - -{% highlight html %} -<img src="..." alt="..." class="img-rounded"> -<img src="..." alt="..." class="img-circle"> -<img src="..." alt="..." class="img-thumbnail"> -{% endhighlight %} - -## Aligning images - -Align images with the [helper float classes](/components/helpers) or [text alignment classes](/components/helpers). A simple centering class can also be used for `block` level images. - -<div class="bd-example bd-example-images"> - <img data-src="holder.js/200x200" class="img-rounded pull-left" alt="A generic square placeholder image with rounded corners"> - <img data-src="holder.js/200x200" class="img-rounded pull-right" alt="A generic square placeholder image with rounded corners"> -</div> - -{% highlight html %} -<img src="..." class="img-rounded pull-left" alt="..."> -<img src="..." class="img-rounded pull-right" alt="..."> -{% endhighlight %} - -<div class="bd-example bd-example-images"> - <img data-src="holder.js/200x200" class="img-rounded center-block" style="display: block;" alt="A generic square placeholder image with rounded corners"> -</div> - -{% highlight html %} -<img src="..." class="img-rounded center-block" style="display: block;" alt="..."> -{% endhighlight %} - -<div class="bd-example bd-example-images"> - <div class="text-center"> - <img data-src="holder.js/200x200" class="img-rounded" alt="A generic square placeholder image with rounded corners"> - </div> -</div> - -{% highlight html %} -<div class="text-center"> - <img src="..." class="img-rounded" alt="..."> -</div> -{% endhighlight %} |
