From eaeee93fa34092ee7c107d75edffd6c8274c15fb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Aug 2015 23:38:16 -0700 Subject: docs rearrange --- docs/components/images.md | 91 ----------------------------------------------- 1 file changed, 91 deletions(-) delete mode 100644 docs/components/images.md (limited to 'docs/components/images.md') diff --git a/docs/components/images.md b/docs/components/images.md deleted file mode 100644 index 03dce0a46..000000000 --- a/docs/components/images.md +++ /dev/null @@ -1,91 +0,0 @@ ---- -layout: page -title: Images -group: components ---- - -Opt your images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -## 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. - -
- Generic responsive image -
- -{% highlight html %} -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 `` element to easily style images in any project. - -
- A generic square placeholder image with rounded corners - A generic square placeholder image where only the portion within the circle circumscribed about said square is visible - A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera -
- -{% highlight html %} -... -... -... -{% 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. - -
- A generic square placeholder image with rounded corners - A generic square placeholder image with rounded corners -
- -{% highlight html %} -... -... -{% endhighlight %} - -
- A generic square placeholder image with rounded corners -
- -{% highlight html %} -... -{% endhighlight %} - -
-
- A generic square placeholder image with rounded corners -
-
- -{% highlight html %} -
- ... -
-{% endhighlight %} - -## Figures - -Use the included `.figure` and `.figure-caption` classes to provide some baseline styles for the HTML5 `
` and `
` elements. As a bonus, immediate children images are automatically responsive. - -{% example html %} -
- A generic square placeholder image with rounded corners in a figure. -
A caption for the above image.
-
-{% endexample %} -- cgit v1.2.3