mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-06-20 20:00:36 +03:00
Deprecate the Sass var and remove any occurence of the .text-muted (#37890)
This commit is contained in:
Louis-Maxime Piton
committed by
GitHub
GitHub
parent
934d7a0c1a
commit
9042efd0f8
@@ -53,7 +53,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
|
||||
<div class="card" style="width: 18rem;">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
|
||||
<h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
<a href="#" class="card-link">Card link</a>
|
||||
<a href="#" class="card-link">Another link</a>
|
||||
@@ -191,7 +191,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
|
||||
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
<div class="card-footer text-muted">
|
||||
<div class="card-footer text-body-secondary">
|
||||
2 days ago
|
||||
</div>
|
||||
</div>
|
||||
@@ -358,14 +358,14 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
{{< placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" >}}
|
||||
</div>
|
||||
@@ -404,7 +404,7 @@ Using a combination of grid and utility classes, cards can be made horizontal in
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -487,7 +487,7 @@ Use card groups to render cards as a single, attached element with equal width a
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
@@ -495,7 +495,7 @@ Use card groups to render cards as a single, attached element with equal width a
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
@@ -503,7 +503,7 @@ Use card groups to render cards as a single, attached element with equal width a
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
|
||||
<p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -520,7 +520,7 @@ When using card groups with footers, their content will automatically line up.
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
<small class="text-body-secondary">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
@@ -530,7 +530,7 @@ When using card groups with footers, their content will automatically line up.
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
<small class="text-body-secondary">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
@@ -540,7 +540,7 @@ When using card groups with footers, their content will automatically line up.
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
<small class="text-body-secondary">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -689,7 +689,7 @@ Just like with card groups, card footers will automatically line up.
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
<small class="text-body-secondary">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -701,7 +701,7 @@ Just like with card groups, card footers will automatically line up.
|
||||
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
<small class="text-body-secondary">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -713,7 +713,7 @@ Just like with card groups, card footers will automatically line up.
|
||||
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">Last updated 3 mins ago</small>
|
||||
<small class="text-body-secondary">Last updated 3 mins ago</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -841,7 +841,7 @@ Separate groups of related menu items with a divider.
|
||||
Place any freeform text within a dropdown menu with text and use [spacing utilities]({{< docsref "/utilities/spacing" >}}). Note that you'll likely need additional sizing styles to constrain the menu width.
|
||||
|
||||
{{< example >}}
|
||||
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
|
||||
<div class="dropdown-menu p-4 text-body-secondary" style="max-width: 200px;">
|
||||
<p>
|
||||
Some example text that's free-flowing within the dropdown menu.
|
||||
</p>
|
||||
|
||||
@@ -230,18 +230,18 @@ Add nearly any HTML within, even for linked list groups like the one below, with
|
||||
<a href="#" class="list-group-item list-group-item-action">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
<small class="text-body-secondary">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Some placeholder content in a paragraph.</p>
|
||||
<small class="text-muted">And some muted small print.</small>
|
||||
<small class="text-body-secondary">And some muted small print.</small>
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">
|
||||
<div class="d-flex w-100 justify-content-between">
|
||||
<h5 class="mb-1">List group item heading</h5>
|
||||
<small class="text-muted">3 days ago</small>
|
||||
<small class="text-body-secondary">3 days ago</small>
|
||||
</div>
|
||||
<p class="mb-1">Some placeholder content in a paragraph.</p>
|
||||
<small class="text-muted">And some muted small print.</small>
|
||||
<small class="text-body-secondary">And some muted small print.</small>
|
||||
</a>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
@@ -576,7 +576,7 @@ Modals have three optional sizes, available via modifier classes to be placed on
|
||||
| Size | Class | Modal max-width
|
||||
| --- | --- | --- |
|
||||
| Small | `.modal-sm` | `300px` |
|
||||
| Default | <span class="text-muted">None</span> | `500px` |
|
||||
| Default | <span class="text-body-secondary">None</span> | `500px` |
|
||||
| Large | `.modal-lg` | `800px` |
|
||||
| Extra large | `.modal-xl` | `1140px` |
|
||||
{{< /bs-table >}}
|
||||
|
||||
@@ -658,7 +658,7 @@ Sometimes you want to use the collapse plugin to trigger a container element for
|
||||
<div class="collapse" id="navbarToggleExternalContent">
|
||||
<div class="bg-dark p-4">
|
||||
<h5 class="text-white h4">Collapsed content</h5>
|
||||
<span class="text-muted">Toggleable via the navbar brand.</span>
|
||||
<span class="text-body-secondary">Toggleable via the navbar brand.</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="navbar navbar-dark bg-dark">
|
||||
|
||||
@@ -108,7 +108,7 @@ Toasts are slightly translucent to blend in with what's below them.
|
||||
<div class="toast-header">
|
||||
{{< 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>
|
||||
<small class="text-body-secondary">11 mins ago</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
@@ -127,7 +127,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
|
||||
<div class="toast-header">
|
||||
{{< 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>
|
||||
<small class="text-body-secondary">just now</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
@@ -139,7 +139,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
|
||||
<div class="toast-header">
|
||||
{{< 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>
|
||||
<small class="text-body-secondary">2 seconds ago</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
@@ -246,7 +246,7 @@ For systems that generate more notifications, consider using a wrapping element
|
||||
<div class="toast-header">
|
||||
{{< 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>
|
||||
<small class="text-body-secondary">just now</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
@@ -258,7 +258,7 @@ For systems that generate more notifications, consider using a wrapping element
|
||||
<div class="toast-header">
|
||||
{{< 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>
|
||||
<small class="text-body-secondary">2 seconds ago</small>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="toast-body">
|
||||
|
||||
Reference in New Issue
Block a user