kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Move styles to docs CSS

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
Show Stats 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-bottom: .5rem;
}
}
// Responsive embed helpers
// Ratio helpers
.bd-example-ratios {
.ratio {
display: inline-block;
width: 10rem;
color: $gray-600;
background-color: $gray-100;
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:
{{< example html >}}
<div class="ratio ratio-1x1" style="width: 10rem;">
{{< example class="bd-example-ratios" >}}
<div class="ratio ratio-1x1">
<div class="ratio-item">1x1</div>
</div>
<div class="ratio ratio-4x3" style="width: 10rem;">
<div class="ratio ratio-4x3">
<div class="ratio-item">4x3</div>
</div>
<div class="ratio ratio-16x9" style="width: 10rem;">
<div class="ratio ratio-16x9">
<div class="ratio-item">16x9</div>
</div>
<div class="ratio ratio-21x9" style="width: 10rem;">
<div class="ratio ratio-21x9">
<div class="ratio-item">21x9</div>
</div>
{{< /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`.
{{< example html >}}
<div class="ratio" style="--aspect-ratio: 50%; width: 10rem;">
{{< example class="bd-example-ratios" >}}
<div class="ratio" style="--aspect-ratio: 50%;">
<div class="ratio-item">2x1</div>
</div>
{{< /example >}}