Bootstrap tool Class

Bootstrap tool Class
1. Close button

A symbolic closed icon can be used to disappear the mode dialog box and warning box.

×

2. Carets

Use the insert operator to indicate the function and direction of the drop-down. Note that the default insert operator is automatically reversed in the dropup menu.

3. Fast floating setting

These two classes let the page elements float left and right. ! Important is used to avoid some problems. You can also use these two classes like mixin.

......

// Classes.pull-left {  float: left !important;}.pull-right {  float: right !important;}// Usage as mixins.element {  .pull-left();}.another-element {  .pull-right();}

Do not use the navigation bar. If it is used to align components on the navigation bar, use. navbar-left or. navbar-right. View the navigation bar document for details.

4. Center content area

Set the page element to display: block and center it by setting margin. Can be used as mixin or class.

...

// Used as classe. center-block {display: block; margin-left: auto; margin-right: auto;} // used as mixin. element {. center-block ();}

5. Clear floating

Use. clearfix to clear the floating of any page element. We use the micro clearfix of Nicolas Gallagher. It can also be used like mixin.

...

// Mixin itself.clearfix() {  &:before,  &:after {    content: " ";    display: table;  }  &:after {    clear: both;  }}// Usage as a Mixin.element {  .clearfix();}

6. Show or hide content

You can use. show and. hidden to forcibly display or hide any page element (including on a screen reader ). These two classes are used! Important to avoid conflicts. These two classes can only be used for block-level elements or mixin.

. Hide can still be used, but it cannot affect the screen reader and will be marked as not recommended since v3.0.1. Use. hidden or. sr-only.

In addition, you can use. invisible to switch the visibility of only one element, which means that its display is not modified and can still affect the elements in the Document Stream.

......

// Classes.show {  display: block !important;}.hidden {  display: none !important;  visibility: hidden !important;}.invisible {  visibility: hidden;}// Usage as mixins.element {  .show();}.another-element {  .hidden();}

7. screen reader content

Use. sr-only to hide an element for all devices except the screen reader. This class can also be used as a mixin.

Skip to main content

// Usage as a Mixin.skip-navigation {  .sr-only();}

8. Image replacement

You can use. text-hide class (or mixin) to replace the text content contained in the page element with the background image.

Custom heading

// Usage as a Mixin.heading {  .text-hide();}