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

fixes #9887: documents show and hide classes

This commit is contained in:
Mark Otto 2013-08-24 14:40:24 -07:00
parent 4c794aaaef
commit 7c8d9551cc
2 changed files with 27 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_includes/nav-css.html
View File

@ -80,6 +80,7 @@
<li><a href="#helper-classes-close">Close icon</a></li>
<li><a href="#helper-classes-floats">Quick floats</a></li>
<li><a href="#helper-classes-clearfix">Clearfix</a></li>
<li><a href="#helper-classes-show-hide">Showing and hiding content</a></li>
<li><a href="#helper-classes-screen-readers">Screen reader content</a></li>
<li><a href="#helper-classes-image-replacement">Image replacement</a></li>
</ul>

27
css.html
View File

@ -2225,7 +2225,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="helper-classes-floats">Quick floats</h3>
<p>Float an element to the left or right with a class. Classes can also be used as mixins.</p>
<p>Float an element to the left or right with a class. <code>!important</code> is included to avoid specificity issues. Classes can also be used as mixins.</p>
{% highlight html %}
<div class="pull-left">...</div>
<div class="pull-right">...</div>
@ -2280,6 +2280,31 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<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>
{% highlight html %}
<div class="show">...</div>
<div class="hide">...</div>
{% endhighlight %}
{% highlight css %}
// Classes
.show {
display: block !important;
}
.hide {
display: none !important;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hide();
}
{% endhighlight %}
<h3 id="helper-classes-screen-readers">Screen reader content</h3>
<p>Hide an element to all users <em>except</em> screen readers 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 %}