mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-19 03:41:19 +02:00
v5: Drop remaining deprecated mixins (#28461)
- Deletes mixin mentions from float docs - Deletes mixin mention from visibility docs - Deletes the image-replacement page for text-hide
This commit is contained in:
@@ -10,32 +10,12 @@ toc: true
|
||||
|
||||
These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the [CSS `float` property](https://developer.mozilla.org/en-US/docs/Web/CSS/float). `!important` is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no affect on flex items.
|
||||
|
||||
## Classes
|
||||
|
||||
Toggle a float with a class:
|
||||
|
||||
{{< example >}}
|
||||
<div class="float-left">Float left on all viewport sizes</div><br>
|
||||
<div class="float-right">Float right on all viewport sizes</div><br>
|
||||
<div class="float-none">Don't float on all viewport sizes</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Mixins
|
||||
|
||||
Or by Sass mixin:
|
||||
|
||||
{{< highlight scss >}}
|
||||
.element {
|
||||
@include float-left;
|
||||
}
|
||||
.another-element {
|
||||
@include float-right;
|
||||
}
|
||||
.one-more {
|
||||
@include float-none;
|
||||
}
|
||||
{{< /highlight >}}
|
||||
|
||||
## Responsive
|
||||
|
||||
Responsive variations also exist for each `float` value.
|
||||
|
@@ -1,35 +0,0 @@
|
||||
---
|
||||
layout: docs
|
||||
title: Image replacement
|
||||
description: Swap text for background images with the image replacement class.
|
||||
group: utilities
|
||||
---
|
||||
|
||||
{{< callout warning >}}
|
||||
##### Warning
|
||||
|
||||
The `text-hide()` class and mixin has been deprecated as of v4.1. It will be removed entirely in v5.
|
||||
{{< /callout >}}
|
||||
|
||||
Utilize the `.text-hide` class or mixin to help replace an element's text content with a background image.
|
||||
|
||||
{{< highlight html >}}
|
||||
<h1 class="text-hide">Custom heading</h1>
|
||||
{{< /highlight >}}
|
||||
|
||||
{{< highlight scss >}}
|
||||
// Usage as a mixin
|
||||
.heading {
|
||||
@include text-hide;
|
||||
}
|
||||
{{< /highlight >}}
|
||||
|
||||
Use the `.text-hide` class to maintain the accessibility and SEO benefits of heading tags, but want to utilize a `background-image` instead of text.
|
||||
|
||||
<div class="bd-example">
|
||||
<h1 class="text-hide" style="background-image: url('/docs/{{< param docs_version >}}/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>
|
||||
</div>
|
||||
|
||||
{{< highlight html >}}
|
||||
<h1 class="text-hide" style="background-image: url('...');">Bootstrap</h1>
|
||||
{{< /highlight >}}
|
@@ -22,13 +22,4 @@ Apply `.visible` or `.invisible` as needed.
|
||||
.invisible {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
// Usage as a mixin
|
||||
// Warning: The `invisible()` mixin has been deprecated as of v4.3.0. It will be removed entirely in v5.
|
||||
.element {
|
||||
@include invisible(visible);
|
||||
}
|
||||
.element {
|
||||
@include invisible(hidden);
|
||||
}
|
||||
{{< /highlight >}}
|
||||
|
Reference in New Issue
Block a user