diff options
| author | Chris Rebert <[email protected]> | 2014-12-18 19:07:22 -0800 |
|---|---|---|
| committer | Chris Rebert <[email protected]> | 2014-12-18 19:07:22 -0800 |
| commit | 07ef67da20c800eb3afa51d2064549ed325cc145 (patch) | |
| tree | 30ff9771ab1d5b63508663c8151035a9a93aa8ef /docs/components | |
| parent | e95b854301532245065d39915ff80a63eaf06c7a (diff) | |
| download | bootstrap-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.md | 23 |
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 %} |
