sharpetronics/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-06-05 00:02:25 -04:00
Code Issues Projects Releases Wiki Activity

fix helpers

Browse Source
This commit is contained in:
Mark Otto 2014-07-13 01:26:48 -07:00
parent 2cce857220
commit 1b35ec9be5
1 changed files with 4 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
docs/components/helpers.md
View File

@ -1,10 +1,7 @@
<a id="helpers"></a> ---
layout: page
# Helper classes title: Helper classes
---
<a id="helpers-colors"></a>
### Contextual colors ### Contextual colors
@ -24,10 +21,6 @@ Convey meaning through color with a handful of emphasis utility classes. These m
<p>Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <code>&lt;span&gt;</code> with the class.</p> <p>Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <code>&lt;span&gt;</code> with the class.</p>
</div> </div>
<a id="helpers-bgs"></a>
### Contextual backgrounds ### Contextual backgrounds
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.
@ -45,10 +38,6 @@ Similar to the contextual text color classes, easily set the background of an el
<p>Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <code>&lt;div&gt;</code> with the class.</p> <p>Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <code>&lt;div&gt;</code> with the class.</p>
</div> </div>
<a id="helpers-close"></a>
### Close icon ### Close icon
Use a generic close icon for dismissing content like modals and alerts. **Be sure to include screen reader text when you can** as we've done with `.sr-only`. Use a generic close icon for dismissing content like modals and alerts. **Be sure to include screen reader text when you can** as we've done with `.sr-only`.
@ -60,10 +49,6 @@ Use a generic close icon for dismissing content like modals and alerts. **Be sur
</button> </button>
{% endexample %} {% endexample %}
<a id="helpers-floats"></a>
### Quick floats ### Quick floats
Float an element to the left or right with a class. `!important` is included to avoid specificity issues. Classes can also be used as mixins. Float an element to the left or right with a class. `!important` is included to avoid specificity issues. Classes can also be used as mixins.
@ -96,10 +81,6 @@ Float an element to the left or right with a class. `!important` is included to
<p>To align components in navbars with utility classes, use <code>.navbar-left</code> or <code>.navbar-right</code> instead. <a href="../components/#navbar-component-alignment">See the navbar docs</a> for details.</p> <p>To align components in navbars with utility classes, use <code>.navbar-left</code> or <code>.navbar-right</code> instead. <a href="../components/#navbar-component-alignment">See the navbar docs</a> for details.</p>
</div> </div>
<a id="helpers-center"></a>
### Center content blocks ### Center content blocks
Set an element to `display: block;` and center via `margin`. Available as a mixin and class. Set an element to `display: block;` and center via `margin`. Available as a mixin and class.
@ -122,10 +103,6 @@ Set an element to `display: block;` and center via `margin`. Available as a mixi
} }
{% endhighlight %} {% endhighlight %}
<a id="helpers-clearfix"></a>
Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes [the micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) as popularized by Nicolas Gallagher. Can also be used as a mixin. Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes [the micro clearfix](http://nicolasgallagher.com/micro-clearfix-hack/) as popularized by Nicolas Gallagher. Can also be used as a mixin.
{% highlight html %} {% highlight html %}
@ -151,10 +128,6 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes
} }
{% endhighlight %} {% endhighlight %}
<a id="helpers-toggles"></a>
### Showing and hiding content ### Showing and hiding content
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. 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.
@ -188,10 +161,6 @@ Furthermore, `.invisible` can be used to toggle only the visibility of an elemen
} }
{% endhighlight %} {% endhighlight %}
<a id="helpers-screen-readers"></a>
### 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.
@ -208,10 +177,6 @@ Hide an element to all devices **except screen readers** with `.sr-only`. Combin
} }
{% endhighlight %} {% endhighlight %}
<a id="helpers-image-replacement"></a>
### Image replacement ### Image replacement
Utilize the `.text-hide` class or mixin to help replace an element's text content with a background image. Utilize the `.text-hide` class or mixin to help replace an element's text content with a background image.