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

Remove .hidden and .show classes

Browse Source 
.hidden is incompatible with jQuery's $(...).hide()
This commit is contained in:
Chris Rebert 2014-12-18 19:07:22 -08:00
parent e95b854301
commit 07ef67da20
2 changed files with 5 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/components/helpers.md
View File

@ -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 %}

12
scss/_utilities.scss
View File

@ -48,9 +48,6 @@
// Toggling content
.show {
display: block !important;
}
.invisible {
visibility: hidden;
}
@ -59,15 +56,6 @@
}
// Hide from screenreaders and browsers
//
// Credit: HTML5 Boilerplate
.hidden {
display: none !important;
visibility: hidden !important;
}
// For Affix plugin
.affix {
position: fixed;