Shulou(Shulou.com)06/03 Report--

The main content of this article is "how to show the special effects of Bootstrap3.0". Friends who are interested may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn the tutorial on how to display the special effects of Bootstrap3.0.

The main contents of this article are as follows:

1. Close button

2.Carets

3. Quick setup float

4. Content area is centered

5. Clear float

6. Show or hide content

7. For the content of screen readers

8. Picture replacement

9. Summary

Close button

It can be used to make modal dialogs and warning boxes disappear by using an icon that symbolizes closing.

The code is as follows:

×

Carets

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

The code is as follows:

Quick setup float

After these two class, let the page elements float left and right. ! important is used to avoid some problems. You can also use these two class like mixin.

The code is as follows:

......

The code is as follows:

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

Do not use for navigation bar

If you are used to align components on the navigation bar, be sure to use .navbar-left or .navbar-right. Check the navigation section file for details.

Content area is centered

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

The code is as follows:

...

The code is as follows:

/ / use .center-block {display: block; margin-left: auto; margin-right: auto;} / / as classe. Element {.center-block ();}

Clear float

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

The code is as follows:

...

The code is as follows:

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

Show or hide content

With .show and .hidden, you can force either page element to be shown or hidden (including on screen readers). These two class use! important to avoid conflicts. These two class can only be used for block-level elements, and can also be used as mixin.

.hide can still be used, but it does not affect screen readers and has been marked as deprecated since v3.0.1. Please use .hidden or .sr-only.

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

The code is as follows:

......

The code is as follows:

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

For the content of screen readers

Using .sr-only, you can hide an element for all devices except screen readers. This class can also be used as a mixin.

The code is as follows:

Skip to main content

The code is as follows:

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

Picture replacement

Use the. text-hideclass, which can also be used as a mixin, to replace the text content contained in a page element with a background image

The code is as follows:

Custom heading

The code is as follows:

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

At this point, I believe you have a deeper understanding of the "tutorial on how to display the special effects of Bootstrap3.0". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.