Bootstrap responsive utility
May 04, 2021 Bootstrap
Table of contents
Bootstrap responsive utility
Bootstrap offers a number of secondary classes for faster mobile device-friendly development. These can be combined with large, small, and medium-sized devices through media queries to enable content to be displayed and hidden from devices.
Caution is required to use these tools to avoid creating completely different versions at the same site. ng.
|
Ultra-small screen
Mobile phones (lt;768px) |
Small screen
Tablet (≥768px) |
Medium screen
Desktop (≥992px) |
Big screen
Desktop (≥1200px) |
|
|---|---|---|---|---|
| .visible-xs-* | Visible | Hide | Hide | Hide |
| .visible-sm-* | Hide | Visible | Hide | Hide |
| .visible-md-* | Hide | Hide | Visible | Hide |
| .visible-lg-* | Hide | Hide | Hide | Visible |
| .hidden-xs | Hide | Visible | Visible | Visible |
| .hidden-sm | Visible | Hide | Visible | Visible |
| .hidden-md | Visible | Visible | Hide | Visible |
| .hidden-lg | Visible | Visible | Visible | Hide |
Starting with v3.2.0, classes such as .visible---?have three variants for each screen size, each for a different display property in CSS, and the list is as follows:
| Class group | CSS display |
|---|---|
| .visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
Therefore, in the case of ultra-small screens (xs), the available .visible---classes are: .visible-xs-block, .visible-xs-inline, and .visible-xs-inline-block.
The .visible-xs, .visible-sm, .visible-md, and .visible-lg classes also exist. H owever, it is no longer recommended starting with v3.2.0. W ith the exception of the special cases of the related elements, they are much the same as the .visible-s-block.
Tip: Bootstrap can create tables with a clear layout, please refer to the "Bootstrap Table" section!
Print class
The following table lists the print classes. Use these toggle prints.
| class | Browser | Printer |
|---|---|---|
|
.visible-print-block
.visible-print-inline .visible-print-inline-block |
Hide | Visible |
| .hidden-print | Visible | Hide |
The following example demonstrates the use of the helper class listed above. Resize your browser's windows, or load instances on different devices to test responsive utility classes.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 响应式实用工具</title>
<link href="//libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="external nofollow" target="_blank" rel="stylesheet">
<script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js" rel="external nofollow" ></script>
<script src="//libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js" rel="external nofollow" ></script>
</head>
<body>
<div class="container" style="padding: 40px;">
<div class="row visible-on">
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-xs">特别小型</span>
<span class="visible-xs">✔ 在特别小型设备上可见</span>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-sm">小型</span>
<span class="visible-sm">✔ 在小型设备上可见</span>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-md">中型</span>
<span class="visible-md">✔ 在中型设备上可见</span>
</div>
<div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<span class="hidden-lg">大型</span>
<span class="visible-lg">✔ 在大型设备上可见</span>
</div>
</div>
</div>
</body>
</html>
The result is as follows:
A tick (✔) indicates that the element is visible in the current viewpable.