The hidden classes that come with bootstrap are: ".hidden", ".visible-xs-*", ".visible-sm-*", ".visible-md-*", ".visible- lg-*", ".hidden-xs", ".hidden-sm", etc.
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 |
Mobile phone (<768px) | Small screen
Tablet (≥768px) | Medium screen
Desktop (≥992px) | Large screen
Desktop (≥1200px) | |
---|---|---|---|---|
Visible | Hide | Hide | Hide | |
Hide | Visible | Hide | hidden | ##.visible-md-* |
hidden | visible | hidden | .visible-lg-* | |
Hide | Hide | Visible | ||
visible | visible | visible | .hidden-sm | |
Hide | Visible | Visible | # #.hidden-md | |
Visible | Hide | Visible | ##.hidden-lg | Visible |
Visible | Hide | 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
.visible-*-block | |
---|---|
.visible-*-inline | display: inline; |
.visible-*-inline-block | display: inline-block; |
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. |
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!