kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

deprecate .hide; fixes #10446

This commit is contained in:
Chris Rebert 2013-09-23 12:46:57 -07:00
parent 229469e059
commit c4e7e3c933
2 changed files with 7 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
css.html
View File

@ -2332,18 +2332,20 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="helper-classes-show-hide">Showing and hiding content</h3> <h3 id="helper-classes-show-hide">Showing and hiding content</h3>
<p>Force an element to be shown or hidden via <code>display</code> with the use of <code>.show</code> and <code>.hide</code> classes. These classes use <code>!important</code> to avoid specificity conflicts, just like the <a href="../css/#helper-classes-floats">quick floats</a>. They are only available for block level toggling. They can also be used as mixins.</p> <p>Force an element to be shown or hidden (<strong>including for screen readers</strong>) with the use of <code>.show</code> and <code>.hidden</code> classes. These classes use <code>!important</code> to avoid specificity conflicts, just like the <a href="../css/#helper-classes-floats">quick floats</a>. They are only available for block level toggling. They can also be used as mixins.</p>
<p><code>.hide</code> is also available, but it does not always affect screen readers and is <strong>deprecated</strong> as of v3.0.1. Use <code>.hidden</code> or <code>.sr-only</code> instead.</p>
{% highlight html %} {% highlight html %}
<div class="show">...</div> <div class="show">...</div>
<div class="hide">...</div> <div class="hidden">...</div>
{% endhighlight %} {% endhighlight %}
{% highlight css %} {% highlight css %}
// Classes // Classes
.show { .show {
display: block !important; display: block !important;
} }
.hide { .hidden {
display: none !important; display: none !important;
visibility: hidden !important;
} }
// Usage as mixins // Usage as mixins
@ -2351,23 +2353,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
.show(); .show();
} }
.another-element { .another-element {
.hide(); .hidden();
} }
{% endhighlight %} {% endhighlight %}
<h3 id="helper-classes-screen-readers">Screen reader content</h3> <h3 id="helper-classes-screen-readers">Screen reader content</h3>
<p>Hide an element everywhere, <strong>including screen readers</strong>, with <code>.hidden</code>. Can also be used as a mixin.</p>
{% highlight html %}
<div class="hidden"></div>
{% endhighlight %}
{% highlight css %}
// Usage as a Mixin
.example {
.hidden();
}
{% endhighlight %}
<p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Necessary for following <a href="{{ page.base_url }}getting-started#accessibility">accessibility best practices</a>. Can also be used as a mixin.</p> <p>Hide an element to all devices <strong>except screen readers</strong> with <code>.sr-only</code>. Necessary for following <a href="{{ page.base_url }}getting-started#accessibility">accessibility best practices</a>. Can also be used as a mixin.</p>
{% highlight html %} {% highlight html %}
<a class="sr-only" href="#content">Skip to content</a> <a class="sr-only" href="#content">Skip to content</a>

1
less/utilities.less
View File

@ -23,6 +23,7 @@
// Toggling content // Toggling content
// ------------------------- // -------------------------
// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
.hide { .hide {
display: none !important; display: none !important;
} }