rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Add positioned badges example to docs (#34143)

Browse Source 
* Update documentation for badges

* Removes useless changes, as well as fixes an example

* Fixes some text with a badge example

Co-authored-by: Mark Otto <markd.otto@gmail.com>
This commit is contained in:
Joel Johnson 2021-06-03 09:09:13 -07:00 committed by GitHub
parent dbda13d5ef
commit f14d1a4c17
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
site/content/docs/5.0/components/badge.md
View File

@ -6,10 +6,12 @@ group: components
toc: true toc: true
--- ---
## Example ## Examples
Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. As of v5, badges no longer have focus or hover styles for links. Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. As of v5, badges no longer have focus or hover styles for links.
### Headings
{{< example >}} {{< example >}}
<h1>Example heading <span class="badge bg-secondary">New</span></h1> <h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2> <h2>Example heading <span class="badge bg-secondary">New</span></h2>
@ -19,6 +21,8 @@ Badges scale to match the size of the immediate parent element by using relative
<h6>Example heading <span class="badge bg-secondary">New</span></h6> <h6>Example heading <span class="badge bg-secondary">New</span></h6>
{{< /example >}} {{< /example >}}
### Buttons
Badges can be used as part of links or buttons to provide a counter. Badges can be used as part of links or buttons to provide a counter.
{{< example >}} {{< example >}}
@ -31,10 +35,28 @@ Note that depending on how they are used, badges may be confusing for users of s
Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text. Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text.
### Positioned
Use utilities to modify a `.badge` and position it in the corner of a link or button.
{{< example >}} {{< example >}}
<button type="button" class="btn btn-primary"> <button type="button" class="btn btn-primary position-relative">
Profile <span class="badge bg-secondary">9</span> Inbox
<span class="visually-hidden">unread messages</span> <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>
{{< /example >}}
You can also replace the `.badge` class with a few more utilities without a count for a more generic indicator.
{{< example >}}
<button type="button" class="btn btn-primary position-relative">
Profile
<span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</button> </button>
{{< /example >}} {{< /example >}}