1
0
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:
Mark Otto
2019-03-14 10:23:54 -07:00
committed by XhmikosR
parent c16532c724
commit 837ff0cc11
9 changed files with 0 additions and 105 deletions

View File

@@ -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.

View File

@@ -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 >}}

View File

@@ -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 >}}