aboutsummaryrefslogtreecommitdiff
path: root/docs/components
diff options
context:
space:
mode:
authorChris Rebert <[email protected]>2014-12-18 19:07:22 -0800
committerChris Rebert <[email protected]>2014-12-18 19:07:22 -0800
commit07ef67da20c800eb3afa51d2064549ed325cc145 (patch)
tree30ff9771ab1d5b63508663c8151035a9a93aa8ef /docs/components
parente95b854301532245065d39915ff80a63eaf06c7a (diff)
downloadbootstrap-07ef67da20c800eb3afa51d2064549ed325cc145.tar.xz
bootstrap-07ef67da20c800eb3afa51d2064549ed325cc145.zip
Remove .hidden and .show classes
.hidden is incompatible with jQuery's $(...).hide()
Diffstat (limited to 'docs/components')
-rw-r--r--docs/components/helpers.md23
1 files changed, 5 insertions, 18 deletions
diff --git a/docs/components/helpers.md b/docs/components/helpers.md
index fea487860..a5be35679 100644
--- a/docs/components/helpers.md
+++ b/docs/components/helpers.md
@@ -137,36 +137,23 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes
}
{% endhighlight %}
-### Showing and hiding content
+### Making content invisible
-Force an element to be shown or hidden (**including for screen readers**) with the use of `.show` and `.hidden` classes. These classes use `!important` to avoid specificity conflicts, just like the [quick floats](#helper-floats). They are only available for block level toggling. They can also be used as mixins.
-
-Furthermore, `.invisible` can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document.
+The `.invisible` class can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document.
{% highlight html %}
-<div class="show">...</div>
-<div class="hidden">...</div>
+<div class="invisible">...</div>
{% endhighlight %}
{% highlight scss %}
// Classes
-.show {
- display: block !important;
-}
-.hidden {
- display: none !important;
- visibility: hidden !important;
-}
.invisible {
visibility: hidden;
}
-// Usage as mixins
+// Usage as mixin
.element {
- .show();
-}
-.another-element {
- .hidden();
+ .invisible();
}
{% endhighlight %}