Bootstrap Getting Started ten: helper classes

1. Contextual text color

By color, Bootstrap provides a set of tool classes. These classes can be applied to links , and the color can also be deepened when the mouse passes, just like the default link.

<Pclass= "text-muted">...</P><Pclass= "Text-primary">...</P><Pclass= "Text-success">...</P><Pclass= "Text-info">...</P><Pclass= "Text-warning">...</P><Pclass= "Text-danger">...</P>

?

2. Contextual background color

As with the contextual text color class, you can set the background of an element using any contextual background color class. The link component will deepen as the mouse passes through, just as the context text color class above says.

<Pclass= "Bg-primary">...</P><Pclass= "Bg-success">...</P><Pclass= "Bg-info">...</P><Pclass= "Bg-warning">...</P><Pclass= "Bg-danger">...</P>

?

3. Close button

By using an icon that symbolizes closing, the modal box and the warning box can disappear.

<type= "button"  class= "Close"  aria-label= "Close "><aria-hidden=" true ">&times; </ span ></ Button >

?

4. Triangle symbol

You can indicate that an element has a drop-down menu function by using a triangle symbol. Note that the triangle symbol in the up pop-up menu is in the opposite direction.

<class= "Caret"></span>

?

5. Fast Floating

By adding a class, you can float any element to the left or right.!important is used to define the precedence of CSS styles. These classes can also be used as mixin (see less documentation).

<class= "Pull-left">... </ Div > <  class= "Pull-right">... </ Div >

cannot be used in navigation bar components
You can use these tool classes when arranging components in the navigation bar:. Navbar-left or. Navbar-right. See Navigation section for more information.

6. Center your Content block

Set the Display:block property for any element and center the contents of it with the margin property. The classes listed below can also be used as mixin.

<class= "Center-block">... </ Div >

7. Clear floating

Floating (float) can be easily cleared by adding the. Clearfix class for the parent element. This is used by Nicolas Gallagher to create the Micro Clearfix way. This class can also be used as a mixin.

<!----<class= "Clearfix">... </ Div >

8. Show or hide content

**.show and. Hidden * * Classes can force arbitrary elements to be displayed or hidden (and also for screen readers). These classes use!important to avoid CSS style precedence issues, just like quick floats. Note that these classes work only on block-level elements, and in addition, they can be used as mixin.
The. Hide class is still available, but it does not work on screen readers and is not recommended from the v3.0.1 version. Please use. hidden or. Sr-only.
In addition, the. Invisible class can be used to affect only the visibility of the element, that is, the display property of the element is not changed, and this element can still affect the flow of the document layout.

<class= "show">... </ Div > <  class= "hidden">... </ Div >

9. screen reader and keyboard navigation

The. Sr-only class can hide content from devices other than screen readers: Sr-only and. Sr-only-focusable can be displayed again when the element has focus (for example, a user navigating with the keyboard). It is necessary to follow the best practices for accessibility. This class can also be used as a mixin.

<class= "Sr-only sr-only-focusable"  href= "#content"> Skip to main content</a>

10. Picture replacement

You can use the. Text-hide class or the corresponding mixin to replace the text content of an element with a background picture.

<class= "Text-hide">Custom heading</  H1>

11. Responsive Tools

In order to accelerate the development of mobile-friendly pages, the use of media query functions and the use of these tools can easily be used for different devices to show or hide page content. It also includes a tool class for displaying or hiding content from the printer.
Use this type of tool specifically to avoid creating a completely different version of the same site. Instead, these tool classes can be used to provide different forms of presentation on different devices.

The Available classes
You can hide or display page content for different screen sizes by using the classes listed below, either individually or jointly.

?

From the v3.2.0 version, a class like. visible-has three variants for each screen size, each for a different display property in CSS, with the following list:

?

So, for example, with an ultra-small screen (XS), the available. visible-- class is:. Visible-xs-block,. Visible-xs-inline, and. Visible-xs-inline-block.
The. Visible-xs,. Visible-sm,. Visible-md, and. VISIBLE-LG classes also exist at the same time. However, starting with the v3.2.0 version is no longer recommended. Apart from

They are roughly the same as the. Visible-*-block for the special case of related elements.

Print class
As with regular reactive classes, you can use the following classes to hide or display certain content for your printer.

?

The. Visible-print class is also present, but it is not recommended to start with the v3.2.0 version. It is roughly the same as the. Visible-print-block class, except

Special case of the relevant element.

Test Cases
You can test these responsive tool classes by resizing your browser, or by opening a page with another device.

In... Visible on
An element with a green flag indicates that it is visible in the current browser viewport (viewport).

?

In... Hidden on
An element with a green flag indicates that it is hidden in the current browser viewport (viewport).

?

Bootstrap Getting Started ten: helper classes