mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 21:22:52 +02:00
Code Issues Releases Wiki Activity

Move styles to docs CSS

Browse Source
This commit is contained in:
Mark Otto
2020-09-22 16:33:18 -07:00
committed by Mark Otto
parent fe38a85839
commit 3b8c17029f
2 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
site/assets/scss/_component-examples.scss
View File

@@ -164,10 +164,13 @@
margin-top: .5rem; margin-top: .5rem;
margin-bottom: .5rem; margin-bottom: .5rem;
} }
}
// Responsive embed helpers // Ratio helpers
.bd-example-ratios {
.ratio { .ratio {
display: inline-block; display: inline-block;
width: 10rem;
color: $gray-600; color: $gray-600;
background-color: $gray-100; background-color: $gray-100;
border: $border-width solid $border-color; border: $border-width solid $border-color;

14
site/content/docs/5.0/helpers/ratio.md
View File

@@ -28,17 +28,17 @@ Wrap any embed, like an `<iframe>`, in a parent element with `.ratio` and an asp
Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided: Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:
{{< example html >}} {{< example class="bd-example-ratios" >}}
<div class="ratio ratio-1x1" style="width: 10rem;"> <div class="ratio ratio-1x1">
<div class="ratio-item">1x1</div> <div class="ratio-item">1x1</div>
</div> </div>
<div class="ratio ratio-4x3" style="width: 10rem;"> <div class="ratio ratio-4x3">
<div class="ratio-item">4x3</div> <div class="ratio-item">4x3</div>
</div> </div>
<div class="ratio ratio-16x9" style="width: 10rem;"> <div class="ratio ratio-16x9">
<div class="ratio-item">16x9</div> <div class="ratio-item">16x9</div>
</div> </div>
<div class="ratio ratio-21x9" style="width: 10rem;"> <div class="ratio ratio-21x9">
<div class="ratio-item">21x9</div> <div class="ratio-item">21x9</div>
</div> </div>
{{< /example >}} {{< /example >}}
@@ -49,8 +49,8 @@ Each `.ratio-*` class includes a CSS custom property (or CSS variable) in the se
For example, to create a 2x1 aspect ratio, set `--aspect-ratio: 50%` on the `.ratio`. For example, to create a 2x1 aspect ratio, set `--aspect-ratio: 50%` on the `.ratio`.
{{< example html >}} {{< example class="bd-example-ratios" >}}
<div class="ratio" style="--aspect-ratio: 50%; width: 10rem;"> <div class="ratio" style="--aspect-ratio: 50%;">
<div class="ratio-item">2x1</div> <div class="ratio-item">2x1</div>
</div> </div>
{{< /example >}} {{< /example >}}