mirror/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-19 15:40:59 +00:00
Code Issues Projects Releases Wiki Activity

toasts.md: Remove useless divs.

Browse Source 
Instead pass the class to the example include.
This commit is contained in:
XhmikosR 2019-02-10 23:19:43 +02:00
parent 2bfe581eeb
commit adf16da25e
1 changed files with 7 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
site/docs/4.2/components/toasts.md
View File

@ -25,7 +25,6 @@ To encourage extensible and predictable toasts, we recommend a header and body.
Toasts are as flexible as you need and have very little required markup. At a minimum, we require a single element to contain your "toasted" content and strongly encourage a dismiss button.
<div class="bg-light">
{% capture example %}
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
@ -41,14 +40,12 @@ Toasts are as flexible as you need and have very little required markup. At a mi
</div>
</div>
{% endcapture %}
{% include example.html content=example %}
</div>
{% include example.html content=example class="bg-light" %}
### Translucent
Toasts are slightly translucent, too, so they blend over whatever they might appear over. For browsers that support the `backdrop-filter` CSS property, we'll also attempt to blur the elements under a toast.
<div class="bg-dark">
{% capture example %}
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
@ -64,14 +61,12 @@ Toasts are slightly translucent, too, so they blend over whatever they might app
</div>
</div>
{% endcapture %}
{% include example.html content=example %}
</div>
{% include example.html content=example class="bg-dark" %}
### Stacking
When you have multiple toasts, we default to vertically stacking them in a readable manner.
<div class="bg-light">
{% capture example %}
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
@ -101,14 +96,12 @@ When you have multiple toasts, we default to vertically stacking them in a reada
</div>
</div>
{% endcapture %}
{% include example.html content=example %}
</div>
{% include example.html content=example class="bg-light" %}
## Placement
Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you're only ever going to show one toast at a time, put the positioning styles right on the `.toast`.
<div class="bg-dark">
{% capture example %}
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
<div class="toast" style="position: absolute; top: 0; right: 0;">
@ -126,12 +119,10 @@ Place toasts with custom CSS as you need them. The top right is often used for n
</div>
</div>
{% endcapture %}
{% include example.html content=example %}
</div>
{% include example.html content=example class="bg-dark" %}
For systems that generate more notifications, consider using a wrapping element so they can easily stack.
<div class="bg-dark">
{% capture example %}
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
<!-- Position it -->
@ -168,12 +159,10 @@ For systems that generate more notifications, consider using a wrapping element
</div>
</div>
{% endcapture %}
{% include example.html content=example %}
</div>
{% include example.html content=example class="bg-dark" %}
You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.
<div class="bg-dark">
{% capture example %}
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
@ -194,8 +183,7 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o
</div>
</div>
{% endcapture %}
{% include example.html content=example %}
</div>
{% include example.html content=example class="bg-dark" %}
## Accessibility
@ -215,7 +203,6 @@ As the content you're displaying changes, be sure to update the [`delay` timeout
When using `autohide: false`, you must add a close button to allow users to dismiss the toast.
<div class="bg-light">
{% capture example %}
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
<div class="toast-header">
@ -231,8 +218,7 @@ When using `autohide: false`, you must add a close button to allow users to dism
</div>
</div>
{% endcapture %}
{% include example.html content=example %}
</div>
{% include example.html content=example class="bg-light" %}
## JavaScript behavior