mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 21:22:52 +02:00
Code Issues Releases Wiki Activity

v5: Update badges (#28458)

Browse Source 
- Drop hover and focus states
- Drop .badge-* variants and associated mixin for .bg-* utilities
- Drop .badge-pill for .rounded-pill utliity and adjust horizontal padding to find middle ground of .badge and old .badge-pill
- Remove unused variables
- Add default color value to .badge base class
- Update docs to reflect changes
This commit is contained in:
Mark Otto
2019-03-14 10:15:26 -07:00
committed by XhmikosR
parent 1add6341a7
commit c16532c724
5 changed files with 17 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
site/content/docs/4.3/components/badge.md
View File

@@ -8,22 +8,22 @@ toc: true
## Example
Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.
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.
{{< example >}}
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
{{< /example >}}
Badges can be used as part of links or buttons to provide a counter.
{{< example >}}
<button type="button" class="btn btn-primary">
Notifications <span class="badge badge-light">4</span>
Notifications <span class="badge bg-secondary">4</span>
</button>
{{< /example >}}
@@ -33,19 +33,19 @@ Unless the context is clear (as with the "Notifications" example, where it is un
{{< example >}}
<button type="button" class="btn btn-primary">
Profile <span class="badge badge-light">9</span>
Profile <span class="badge bg-secondary">9</span>
<span class="sr-only">unread messages</span>
</button>
{{< /example >}}
## Contextual variations
## Background colors
Add any of the below mentioned modifier classes to change the appearance of a badge.
Use our background utility classes to quickly change the appearance of a badge. Please note that when using Bootstrap's default `.bg-light`, you'll likely need a text color utility like `.text-dark` for proper styling. This is because background utilities do not set anything but `background-color`.
{{< example >}}
{{< badge.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<span class="badge badge-{{ .name }}">{{ .name | title }}</span>{{- end -}}
<span class="badge bg-{{ .name }}{{ if eq .name "light" }} text-dark{{ end }}">{{ .name | title }}</span>{{- end -}}
{{< /badge.inline >}}
{{< /example >}}
@@ -55,22 +55,11 @@ Add any of the below mentioned modifier classes to change the appearance of a ba
## Pill badges
Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
Use the `.rounded-pill` utility class to make badges more rounded with a larger `border-radius`.
{{< example >}}
{{< badge.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<span class="badge badge-pill badge-{{ .name }}">{{ .name | title }}</span>{{- end -}}
{{< /badge.inline >}}
{{< /example >}}
## Links
Using the contextual `.badge-*` classes on an `<a>` element quickly provide _actionable_ badges with hover and focus states.
{{< example >}}
{{< badge.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<a href="#" class="badge badge-{{ .name }}">{{ .name | title }}</a>{{- end -}}
<span class="badge rounded-pill bg-{{ .name }}{{ if eq .name "light" }} text-dark{{ end }}">{{ .name | title }}</span>{{- end -}}
{{< /badge.inline >}}
{{< /example >}}