Bootstrap tool Class

Source: Internet
Author: User

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();}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.