rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-15 15:29:22 +01:00
Code Issues Actions Packages Releases Activity

update image docs and styles

Browse Source
This commit is contained in:
Mark Otto 2015-03-11 19:19:22 +00:00
parent d29f851e82
commit 594f1fa4a0
2 changed files with 48 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
docs/assets/scss/docs.scss
View File

@ -1087,11 +1087,16 @@ body {
} }
// Images // Images
.bs-example > .img-circle, .bs-example > img {
.bs-example > .img-rounded, + img {
.bs-example > .img-thumbnail { margin-left: .5rem;
margin: .25rem;
} }
}
// .bs-example > .img-circle,
// .bs-example > .img-rounded,
// .bs-example > .img-thumbnail {
// margin: .25rem;
// }
// Tables // Tables
// .bs-example > .table-responsive > .table { // .bs-example > .table-responsive > .table {
@ -1252,7 +1257,7 @@ body {
// Helpers // Helpers
.bs-example > { .bs-example > {
.center-block { .center-block:not(img) {
max-width: 200px; max-width: 200px;
padding: .5rem; padding: .5rem;
background-color: #eee; background-color: #eee;

34
docs/content/images.md
View File

@ -7,7 +7,7 @@ Opt your images into responsive behavior (so they never become larger than their
## Responsive images ## Responsive images
Images in Bootstrap 3 can be made responsive-friendly via the addition of the `.img-responsive` class. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales nicely to the parent element. 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="bs-example"> <div class="bs-example">
<img data-src="holder.js/100%x250" class="img-responsive" alt="Generic responsive image"> <img data-src="holder.js/100%x250" class="img-responsive" alt="Generic responsive image">
@ -40,4 +40,34 @@ Add classes to an `<img>` element to easily style images in any project.
## Aligning images ## Aligning images
To center images with `.img-responsive`, use `.center-block`. For all other images, use `.text-center`. [See the helper classes section](/css/helpers) for more details about `.center-block` usage. 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="bs-example bs-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="bs-example bs-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="bs-example bs-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 %}