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

docs(examples): new cheatsheet and RTL examples

Browse Source
This commit is contained in:
Gaël Poupard
2020-06-09 16:44:20 +03:00
committed by XhmikosR
parent 9488978fb5
commit aaff11a0b3
95 changed files with 5206 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.0/components/toasts.md
+20 -20
View File
@@ -31,8 +31,8 @@ Toasts are as flexible as you need and have very little required markup. At a mi
{{< example class="bg-light" >}}
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<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>
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
@@ -49,8 +49,8 @@ Toasts are slightly translucent, too, so they blend over whatever they might app
{{< example class="bg-dark" >}}
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<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>
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
@@ -67,8 +67,8 @@ When you have multiple toasts, we default to vertically stacking them in a reada
{{< example class="bg-light" >}}
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<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>
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
@@ -79,8 +79,8 @@ When you have multiple toasts, we default to vertically stacking them in a reada
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<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>
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
@@ -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-bs-dismiss="toast" aria-label="Close"></button>
<button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
{{< /example >}}
@@ -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-bs-dismiss="toast" aria-label="Close"></button>
<button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
{{< /example >}}
@@ -138,8 +138,8 @@ Place toasts with custom CSS as you need them. The top right is often used for n
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
<div class="toast" style="position: absolute; top: 0; right: 0;">
<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>
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
@@ -160,8 +160,8 @@ For systems that generate more notifications, consider using a wrapping element
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<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>
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
@@ -172,8 +172,8 @@ For systems that generate more notifications, consider using a wrapping element
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<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>
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
@@ -194,8 +194,8 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<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>
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
@@ -227,8 +227,8 @@ When using `autohide: false`, you must add a close button to allow users to dism
{{< example class="bg-light" >}}
<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>
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>