clones/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-09-25 04:27:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

add some utilities docs for new hidden and show changes

Browse Source
This commit is contained in:
Mark Otto 2014-12-23 04:28:01 -08:00
parent f9aec74124
commit 9aa8239f88
1 changed files with 11 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
docs/components/helpers.md
View File

@ -137,37 +137,22 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes
}
{% endhighlight %}
### Showing and hiding content
### Hidden elements
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.
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).
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.
Furthermore, `.invisible` can be used to toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document.
{% highlight html %}
<input type="text" hidden>
{% endhighlight %}
### Visible elements
On the other side of hiding content, you can show content with `.show`.
{% highlight html %}
<div class="show">...</div>
<div class="hidden">...</div>
{% endhighlight %}
{% highlight scss %}
// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
visibility: hidden !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}
{% endhighlight %}
### Screen readers and keyboard navigation