mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-23 13:43:11 +02:00
Rename the classes and docs page, update everything accordingly
This commit is contained in:
Mark Otto
Mark Otto
@@ -1,62 +0,0 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Embeds
|
||||
description: Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.
|
||||
group: helpers
|
||||
toc: true
|
||||
---
|
||||
|
||||
## About
|
||||
|
||||
Rules are directly applied to `<iframe>`, `<embed>`, `<video>`, and `<object>` elements. You can also use an explicit use an explicit descendant class, `.embed-responsive-item`, when you want to match the styling for other attributes. Aspect ratios are declared in a Sass map and included in each class via CSS variable, which also allows [custom aspect ratios](#custom-ratios).
|
||||
|
||||
{{< callout info >}}
|
||||
**Pro-Tip!** You don't need `frameborder="0"` on your `<iframe>`s as we override that for you in [Reboot]({{< docsref "/content/reboot" >}}).
|
||||
{{< /callout >}}
|
||||
|
||||
## Example
|
||||
|
||||
Wrap any embed, like an `<iframe>`, in a parent element with `.embed-responsive` and an aspect ratio class. As mentioned above, the `.embed-responsive-item` isn't strictly required, but we encourage it.
|
||||
|
||||
{{< example >}}
|
||||
<div class="embed-responsive embed-responsive-16x9">
|
||||
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Aspect ratios
|
||||
|
||||
Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:
|
||||
|
||||
{{< example html >}}
|
||||
<div class="embed-responsive embed-responsive-1x1" style="width: 10rem;">
|
||||
<div class="embed-responsive-item">1x1</div>
|
||||
</div>
|
||||
<div class="embed-responsive embed-responsive-4x3" style="width: 10rem;">
|
||||
<div class="embed-responsive-item">4x3</div>
|
||||
</div>
|
||||
<div class="embed-responsive embed-responsive-16x9" style="width: 10rem;">
|
||||
<div class="embed-responsive-item">16x9</div>
|
||||
</div>
|
||||
<div class="embed-responsive embed-responsive-21x9" style="width: 10rem;">
|
||||
<div class="embed-responsive-item">21x9</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Custom ratios
|
||||
|
||||
Each `.embed-responsive-*` class includes a CSS custom property (or CSS variable) in the selector. You can override this CSS variable to create custom aspect ratios on the fly with some quick math on your part.
|
||||
|
||||
For example, to create a 2x1 aspect ratio, set `--aspect-ratio: 50%` on the `.embed-responsive`.
|
||||
|
||||
{{< example html >}}
|
||||
<div class="embed-responsive" style="--aspect-ratio: 50%; width: 10rem;">
|
||||
<div class="embed-responsive-item">2x1</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Sass map
|
||||
|
||||
Within `_variables.scss`, you can change the aspect ratios you want to use. Here's our default `$embed-responsive-aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use.
|
||||
|
||||
{{< scss-docs name="embed-responsive-aspect-ratios" file="scss/_variables.scss" >}}
|
||||
62
site/content/docs/5.0/helpers/ratio.md
Normal file
62
site/content/docs/5.0/helpers/ratio.md
Normal file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Ratios
|
||||
description: Use generated psuedo elements to make an element maintain the aspect ratio of your choosing. Perfect for responsively handling video or slideshow embeds based on the width of the parent.
|
||||
group: helpers
|
||||
toc: true
|
||||
---
|
||||
|
||||
## About
|
||||
|
||||
Rules are directly applied to `<iframe>`, `<embed>`, `<video>`, and `<object>` elements. You can also use an explicit use an explicit descendant class, `.ratio-item`, when you want to match the styling for other attributes. Aspect ratios are declared in a Sass map and included in each class via CSS variable, which also allows [custom aspect ratios](#custom-ratios).
|
||||
|
||||
{{< callout info >}}
|
||||
**Pro-Tip!** You don't need `frameborder="0"` on your `<iframe>`s as we override that for you in [Reboot]({{< docsref "/content/reboot" >}}).
|
||||
{{< /callout >}}
|
||||
|
||||
## Example
|
||||
|
||||
Wrap any embed, like an `<iframe>`, in a parent element with `.ratio` and an aspect ratio class. As mentioned above, the `.ratio-item` isn't strictly required, but we encourage it.
|
||||
|
||||
{{< example >}}
|
||||
<div class="ratio ratio-16x9">
|
||||
<iframe class="ratio-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Aspect ratios
|
||||
|
||||
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;">
|
||||
<div class="ratio-item">1x1</div>
|
||||
</div>
|
||||
<div class="ratio ratio-4x3" style="width: 10rem;">
|
||||
<div class="ratio-item">4x3</div>
|
||||
</div>
|
||||
<div class="ratio ratio-16x9" style="width: 10rem;">
|
||||
<div class="ratio-item">16x9</div>
|
||||
</div>
|
||||
<div class="ratio ratio-21x9" style="width: 10rem;">
|
||||
<div class="ratio-item">21x9</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Custom ratios
|
||||
|
||||
Each `.ratio-*` class includes a CSS custom property (or CSS variable) in the selector. You can override this CSS variable to create custom aspect ratios on the fly with some quick math on your part.
|
||||
|
||||
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;">
|
||||
<div class="ratio-item">2x1</div>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Sass map
|
||||
|
||||
Within `_variables.scss`, you can change the aspect ratios you want to use. Here's our default `$ratio-aspect-ratios` map. Modify the map as you like and recompile your Sass to put them to use.
|
||||
|
||||
{{< scss-docs name="aspect-ratios" file="scss/_variables.scss" >}}
|
||||
@@ -74,10 +74,10 @@ toc: true
|
||||
|
||||
### Helpers
|
||||
|
||||
- [Responsive embed helpers]({{< docsref "/helpers/embed" >}}) have new modifier classes and include CSS variables.
|
||||
- Classes have been renamed to change `by` to `x` in the aspect ratrio. For example, `.embed-responsive-16by9` is now `.responsive-16x9`.
|
||||
- The `$embed-responsive-aspect-ratios` has been simplified to include the class name and the percentage as the `key: value` pair. This requires some math on your part when customizing, but ultimately makes it simpler on our end.
|
||||
- CSS variables are now generated and included for each value in the Sass map. Modify the `--aspect-ratio` variable on the `.embed-responsive` to create any [custom aspect ratio]({{< docsref "/helpers/embed#custom-ratios" >}}).
|
||||
- Responsive embed helpers have been renamed to [ratio helpers]({{< docsref "/helpers/ratio" >}}) with new class names and improved behaviors, as well as a helpful CSS variable.
|
||||
- Classes have been renamed to change `by` to `x` in the aspect ratrio. For example, `.ratio-16by9` is now `.ratio-16x9`.
|
||||
- The `$embed-responsive-aspect-ratios` Sass map has been renamed to `$aspect-ratios` and its values have been simplified to include the class name and the percentage as the `key: value` pair.
|
||||
- CSS variables are now generated and included for each value in the Sass map. Modify the `--aspect-ratio` variable on the `.ratio` to create any [custom aspect ratio]({{< docsref "/helpers/ratio#custom-ratios" >}}).
|
||||
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user