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

Use the example shortcode in more places. (#29346)

Browse Source
This commit is contained in:
XhmikosR 2019-09-02 12:52:26 +03:00 committed by GitHub
parent 6cb4ebc048
commit 88d7d8b822
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
site/content/docs/4.3/content/images.md
View File

@ -10,59 +10,37 @@ toc: true
Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element. Images in Bootstrap are made responsive with `.img-fluid`. `max-width: 100%;` and `height: auto;` are applied to the image so that it scales with the parent element.
<div class="bd-example"> {{< example >}}
{{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}} {{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}}
</div> {{< /example >}}
{{< highlight html >}}
<img src="..." class="img-fluid" alt="Responsive image">
{{< /highlight >}}
## Image thumbnails ## Image thumbnails
In addition to our [border-radius utilities]({{< docsref "/utilities/borders" >}}), you can use `.img-thumbnail` to give an image a rounded 1px border appearance. In addition to our [border-radius utilities]({{< docsref "/utilities/borders" >}}), you can use `.img-thumbnail` to give an image a rounded 1px border appearance.
<div class="bd-example bd-example-images"> {{< example >}}
{{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}} {{< placeholder width="200" height="200" class="img-thumbnail" title="A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera" >}}
</div> {{< /example >}}
{{< highlight html >}}
<img src="..." alt="..." class="img-thumbnail">
{{< /highlight >}}
## Aligning images ## Aligning images
Align images with the [helper float classes]({{< docsref "/utilities/float" >}}) or [text alignment classes]({{< docsref "/utilities/text#text-alignment" >}}). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{< docsref "/utilities/spacing#horizontal-centering" >}}). Align images with the [helper float classes]({{< docsref "/utilities/float" >}}) or [text alignment classes]({{< docsref "/utilities/text#text-alignment" >}}). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{< docsref "/utilities/spacing#horizontal-centering" >}}).
<div class="bd-example bd-example-images"> {{< example >}}
{{< placeholder width="200" height="200" class="rounded float-left" >}} {{< placeholder width="200" height="200" class="rounded float-left" >}}
{{< placeholder width="200" height="200" class="rounded float-right" >}} {{< placeholder width="200" height="200" class="rounded float-right" >}}
</div> {{< /example >}}
{{< highlight html >}}
<img src="..." class="rounded float-left" alt="...">
<img src="..." class="rounded float-right" alt="...">
{{< /highlight >}}
<div class="bd-example bd-example-images"> {{< example >}}
{{< placeholder width="200" height="200" class="rounded mx-auto d-block" >}} {{< placeholder width="200" height="200" class="rounded mx-auto d-block" >}}
</div> {{< /example >}}
{{< highlight html >}} {{< example >}}
<img src="..." class="rounded mx-auto d-block" alt="...">
{{< /highlight >}}
<div class="bd-example bd-example-images">
<div class="text-center">
{{< placeholder width="200" height="200" class="rounded" >}}
</div>
</div>
{{< highlight html >}}
<div class="text-center"> <div class="text-center">
<img src="..." class="rounded" alt="..."> {{< placeholder width="200" height="200" class="rounded" >}}
</div> </div>
{{< /highlight >}} {{< /example >}}
## Picture ## Picture

43
site/content/docs/4.3/utilities/borders.md
View File

@ -53,38 +53,23 @@ Change the border color using utilities built on our theme colors.
Add classes to an element to easily round its corners. Add classes to an element to easily round its corners.
<div class="bd-example bd-example-images"> {{< example >}}
{{< placeholder width="75" height="75" class="rounded" title="Example rounded image" >}} {{< placeholder width="75" height="75" class="rounded" title="Example rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" >}} {{< placeholder width="75" height="75" class="rounded-top" title="Example top rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-right" title="Example right rounded image" >}} {{< placeholder width="75" height="75" class="rounded-right" title="Example right rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" >}} {{< placeholder width="75" height="75" class="rounded-bottom" title="Example bottom rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-left" title="Example left rounded image" >}} {{< placeholder width="75" height="75" class="rounded-left" title="Example left rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}} {{< placeholder width="75" height="75" class="rounded-circle" title="Completely round image" >}}
{{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}} {{< placeholder width="150" height="75" class="rounded-pill" title="Rounded pill image" >}}
{{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image (overrides rounding applied elsewhere)" >}} {{< placeholder width="75" height="75" class="rounded-0" title="Example non-rounded image (overrides rounding applied elsewhere)" >}}
</div> {{< /example >}}
{{< highlight html >}}
<img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
<img src="..." alt="..." class="rounded-pill">
<img src="..." alt="..." class="rounded-0">
{{< /highlight >}}
## Sizes ## Sizes
Use `.rounded-lg` or `.rounded-sm` for larger or smaller border-radius. Use `.rounded-lg` or `.rounded-sm` for larger or smaller border-radius.
<div class="bd-example bd-example-images"> {{< example >}}
{{< placeholder width="75" height="75" class="rounded-sm" title="Example small rounded image" >}} {{< placeholder width="75" height="75" class="rounded-sm" title="Example small rounded image" >}}
{{< placeholder width="75" height="75" class="rounded-lg" title="Example large rounded image" >}} {{< placeholder width="75" height="75" class="rounded-lg" title="Example large rounded image" >}}
</div> {{< /example >}}
{{< highlight html >}}
<img src="..." alt="..." class="rounded-sm">
<img src="..." alt="..." class="rounded-lg">
{{< /highlight >}}