rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

fix up helpers docs again for .invisible and [hidden]

Browse Source
This commit is contained in:
Mark Otto 2014-12-23 14:00:34 -08:00
parent 6b394ab067
commit b67b2c7f49
1 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
docs/components/helpers.md
View File

@ -132,7 +132,7 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes
} }
{% endhighlight %} {% endhighlight %}
### Hidden elements ### Hidden content
Hide any HTML element with the `[hidden]` attribute. Previously, v3.x included a `.hidden` class that forced toggled content. However, we removed it due to conflicts with jQuery's `hide()` function. It's taken from [PureCSS](http://purecss.io). Hide any HTML element with the `[hidden]` attribute. Previously, v3.x included a `.hidden` class that forced toggled content. However, we removed it due to conflicts with jQuery's `hide()` function. It's taken from [PureCSS](http://purecss.io).
@ -142,14 +142,25 @@ Furthermore, `.invisible` can be used to toggle the visibility of an element, me
<input type="text" hidden> <input type="text" hidden>
{% endhighlight %} {% endhighlight %}
### Visible elements ### Invisible content
On the other side of hiding content, you can show content with `.show`. 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 %} {% highlight html %}
<div class="show">...</div> <div class="invisible">...</div>
{% endhighlight %} {% endhighlight %}
{% highlight scss %}
// Classes
.invisible {
visibility: hidden;
}
// Usage as mixin
.element {
.invisible();
}
### Screen readers and keyboard navigation ### Screen readers and keyboard navigation
Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following [accessibility best practices](../getting-started/#accessibility). Can also be used as mixins. Hide an element to all devices **except screen readers** with `.sr-only`. Combine `.sr-only` with `.sr-only-focusable` to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following [accessibility best practices](../getting-started/#accessibility). Can also be used as mixins.