Home >Web Front-end >Front-end Q&A >What are the hidden classes that come with bootstrap?

What are the hidden classes that come with bootstrap?

青灯夜游
青灯夜游Original
2022-01-10 11:04:532548browse

The hidden classes that come with bootstrap are: ".hidden", ".visible-xs-*", ".visible-sm-*", ".visible-md-*", ".visible- lg-*", ".hidden-xs", ".hidden-sm", etc.

What are the hidden classes that come with bootstrap?

The operating environment of this tutorial: Windows 7 system, bootsrap version 3.3.7, DELL G3 computer

Bootstrap provides some auxiliary classes to make it faster to enable mobile-friendly development. These can be combined with large, small and medium devices through media queries to enable content to be shown and hidden on the device.

You need to use these tools with caution to avoid creating completely different versions of the same site. Reactive utilities currently only work with block and table switching.

Class Description
.show Force element display
.hidden Force element hiding
##Super small screenSmall screenMedium screenLarge screen##.visible-xs-*.visible-sm-*##.visible-md-*hiddenhiddenvisiblehidden.visible-lg-*HideHideHideVisible.hidden-xshiddenvisiblevisiblevisible.hidden-smVisibleHideVisibleVisibleVisible##.hidden-lgVisibleVisibleVisibleHide

            Mobile phone (<768px)
Tablet (≥768px)
Desktop (≥992px)
Desktop (≥1200px)
VisibleHideHide Hide
HideVisibleHidehidden
# #.hidden-md
VisibleHideVisible
From version v3.2.0 onwards, the shape Classes such as .visible-*-* have three variants for each screen size, each targeting a different display attribute in CSS. The list is as follows:

Class group

CSS display.visible-*-blockdisplay: block;.visible-*-inlinedisplay: inline;.visible-*-inline-blockdisplay: inline-block;The .visible-xs, .visible-sm, .visible-md and .visible-lg classes also exist. However, its use is no longer recommended starting from v3.2.0. They are mostly the same as .visible-*-block, except for the special case of
So, taking the ultra-small screen (xs) as an example, the available .visible-*-* classes are: .visible-xs-block, . visible-xs-inline and .visible-xs-inline-block.
related elements.
For more knowledge about bootstrap, please visit:

bootstrap basic tutorial

! !

The above is the detailed content of What are the hidden classes that come with bootstrap?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn