1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-22 21:22:52 +02:00

Merge branch 'main' into main-lmp-dark-theme-customization-full

This commit is contained in:
Louis-Maxime Piton
2024-02-28 15:44:54 +01:00
226 changed files with 5079 additions and 4413 deletions

View File

@@ -22,12 +22,11 @@ Background utilities like `.bg-*` that generated from our original `$theme-color
{{< colors.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
<div class="p-3 mb-2 bg-{{ .name }}{{ if .contrast_color }} text-{{ .contrast_color }}{{ else }} text-white{{ end }}">.bg-{{ .name }}</div>
<div class="p-3 mb-2 bg-{{ .name }}-subtle text-emphasis-{{ .name }}">.bg-{{ .name }}-subtle</div>
<div class="p-3 mb-2 bg-{{ .name }}-subtle text-{{ .name }}-emphasis">.bg-{{ .name }}-subtle</div>
{{- end -}}
{{< /colors.inline >}}
<p class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</p>
<p class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</p>
<div class="p-3 mb-2 bg-body-secondary">.bg-body-secondary</div>
<div class="p-3 mb-2 bg-body-tertiary">.bg-body-tertiary</div>
<div class="p-3 mb-2 bg-body text-body">.bg-body</div>
<div class="p-3 mb-2 bg-black text-white">.bg-black</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>

View File

@@ -90,7 +90,7 @@ Here are some real life examples of these classes:
{{< example class="bd-example-position-examples d-flex justify-content-around align-items-center" >}}
<button type="button" class="btn btn-primary position-relative">
Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
</button>
<div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill">

View File

@@ -31,7 +31,7 @@ Note that we don't provide utility classes for justified text. While, aesthetica
Wrap text with a `.text-wrap` class.
{{< example >}}
<div class="badge bg-primary text-wrap" style="width: 6rem;">
<div class="badge text-bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
{{< /example >}}