What are the hidden classes that come with bootstrap?

青灯夜游
Release: 2022-01-10 11:05:39
Original
2314 people have browsed it

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.

ClassDescription
.showForce element display
.hiddenForce 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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!