Special effects of Bootstrap 3.0 study notes (display and hide, eliminate floating, close button, etc.)

The main contents of this article are as follows:

1. Close button

2.Carets

3. Quickly set floating

4. Center the content area

5. Clear Floats

6. Show or hide content

7. Content for screen readers

8. Image Replacement

9. Summary

Close button

Can be used to make modal dialogs and alerts disappear by using an icon that symbolizes a close.

Copy code

The code is as follows:

Carets

Use the caret to indicate the function and direction of the dropdown. Note that by default the caret is automatically inverted in the dropup menu.

Copy code

The code is as follows:

Quick Setup Float

These two classes allow page elements to float left and right. !important is used to avoid certain problems. You can also use these two classes like mixins.

Copy code

The code is as follows:

Copy code

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 bars

If you are aligning components on a navbar, be sure to use .navbar-left or .navbar-right. See the navigation bar documentation for details.

Center the content area

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

Copy code

The code is as follows:

Copy code

The code is as follows:

// Using as a class .center-block { display: block; margin-left: auto; margin-right: auto; } // Using as a mixin .element { .center-block(); }

Clear Float

Use .clearfix to clear floats of any page element. We used the micro clearfix by Nicolas Gallagher. Can also be used like a mixin.

Copy code

The code is as follows:

Copy code

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

The .show and .hidden methods can be used to force showing or hiding of any page element (including on screen readers). These two classes use !important to avoid conflicts. These two classes can only be used for block-level elements and can also be used as mixins.

.hide still works, but it does not work with screen readers and has been marked as deprecated since v3.0.1. Please use .hidden or .sr-only.

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

Copy code

The code is as follows:

Copy code

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

Content for screen readers

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

Copy code

The code is as follows:

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

Copy code

The code is as follows:

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

Image Replacement

Use .text-hideclass (also available as a mixin) to replace the text content of a page element with a background image.

Copy code

The code is as follows:

<h1 class="text-hide">Custom heading</h1>

Copy code

The code is as follows:

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

Summarize

This article mainly talks about some special effects. For example, show and hide, eliminate floating, close buttons, etc. In some cases this may be useful.

<<: CSS implements horizontal scrolling navigation bar on mobile devices (also applicable to PC devices)

>>: Introduction to vim plugin installation under Linux system

CSS margin overlap and how to prevent it

Special effects of Bootstrap 3.0 study notes (display and hide, eliminate floating, close button, etc.)

CSS margin overlap and how to prevent it

MySQL SQL statement analysis and query optimization detailed explanation

Even a novice can understand the difference between typeof and instanceof in js

The difference and usage of distinct and row_number() over() in SQL

Beginners learn some HTML tags (3)

Summary of the use of vue Watch and Computed

A brief discussion on the issue of element dragging and sorting in table

Detailed explanation of Linux rpm and yum commands and usage

Summary of various ways to create objects in js and their advantages and disadvantages

Explanation on whether to choose paging or loading in interactive design

Recommend

A brief discussion on whether MySQL can have a function similar to Oracle's nvl

CSS3 flexible box flex to achieve three-column layout

How to add interface listening mask in Vue project

In-depth understanding of this in JavaScript

Application examples of WeChat applet virtual list

How to modify the firewall on a Linux server to allow remote access to the port

An experienced person will show you how to develop a professional and standardized MySQL startup script

A very detailed explanation of Linux C++ multi-thread synchronization

Teach you how to install mysql database on Mac

An example of elegantly writing status labels in Vue background

Html Select option How to make the default selection

A few experiences in self-cultivation of artists

Detailed explanation of Angular component projection

Detailed explanation of Nginx+Tomcat load balancing cluster installation and configuration case

Examples of 4 methods for inserting large amounts of data in MySQL