mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-17 19:21:23 +03:00
Code Activity

Add bs in data attributes

Browse Source 
- Add `bs` in data APIs everywhere
- Update unit tests
This commit is contained in:
Rohit Sharma
2020-07-22 22:33:11 +03:00
committed by XhmikosR
parent fe961c192d
commit 418f17ee2b
76 changed files with 827 additions and 807 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.0/components/toasts.md
+15 -15
View File
@@ -34,7 +34,7 @@ Toasts are as flexible as you need and have very little required markup. At a mi
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
@@ -52,7 +52,7 @@ Toasts are slightly translucent, too, so they blend over whatever they might app
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">11 mins ago</small>
<button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
@@ -70,7 +70,7 @@ When you have multiple toasts, we default to vertically stacking them in a reada
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
See? Just like this.
@@ -82,7 +82,7 @@ When you have multiple toasts, we default to vertically stacking them in a reada
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
@@ -99,7 +99,7 @@ Customize your toasts by removing sub-components, tweaking with [utilities]({{<
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close ml-auto mr-2" data-dismiss="toast" aria-label="Close"></button>
<button type="button" class="btn-close ml-auto mr-2" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
{{< /example >}}
@@ -111,7 +111,7 @@ Alternatively, you can also add additional controls and components to toasts.
Hello, world! This is a toast message.
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm">Take action</button>
<button type="button" class="btn btn-secondary btn-sm" data-dismiss="toast">Close</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
</div>
</div>
</div>
@@ -126,7 +126,7 @@ Building on the above example, you can create different toast color schemes with
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white ml-auto mr-2" data-dismiss="toast" aria-label="Close"></button>
<button type="button" class="btn-close btn-close-white ml-auto mr-2" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
{{< /example >}}
@@ -141,7 +141,7 @@ Place toasts with custom CSS as you need them. The top right is often used for n
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
@@ -163,7 +163,7 @@ For systems that generate more notifications, consider using a wrapping element
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
See? Just like this.
@@ -175,7 +175,7 @@ For systems that generate more notifications, consider using a wrapping element
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
<strong class="mr-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Heads up, toasts will stack automatically
@@ -197,7 +197,7 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
@@ -217,7 +217,7 @@ You also need to adapt the `role` and `aria-live` level depending on the content
As the content you're displaying changes, be sure to update the [`delay` timeout](#options) to ensure people have enough time to read the toast.
```html
<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
<div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>
```
@@ -225,12 +225,12 @@ 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.
{{< example class="bg-light" >}}
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded mr-2" text="false" title="false" >}}
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-dismiss="toast" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
@@ -253,7 +253,7 @@ var toastList = toastElList.map(function (toastEl) {
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-animation=""`.
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`.
<table class="table">
<thead>