Bootstrap Responsive Utilities
Bootstrap provides some helper classes for faster 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. Responsive utilities currently only work with block and table switching.
| Super small screen
Mobile phone (<768px) | Small screen
Tablet (≥768px) | Medium screen
Desktop (≥992px) | Large screen
Desktop (≥1200px) |
|---|
##.visible-xs-* | Visible | Hide | Hide | Hide |
.visible-sm-* | Hide | Visible | Hide | hidden |
##.visible-md-*| hidden | hidden | visible | hidden | |
.visible-lg-*| Hide | Hide | Hide | Visible | |
.hidden-xs| hidden | visible | visible | visible | |
.hidden-sm| Visible | Hide | Visible | Visible | | # #.hidden-md
Visible | Visible | Hide | Visible | ##.hidden-lg |
Visible| Visible | Visible | Hide | | |
From v3.2.0 version Starting from , classes of the form .visible-*-* have three variants for each screen size, each targeting a different display attribute in CSS, as listed below:
Class Group
CSS display | |
|---|
.visible-*-blockdisplay: 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.
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 <table> related elements.
Print classes
The following table lists the print classes. Use these toggles to print content.
class
Browser| Printer | | |
|---|
. visible-print-block
.visible-print-inline
.visible-print-inline-blockhidden
visible | | .hidden-print |
visible| hide | | ExamplesThe following examples demonstrate the usage of the helper classes listed above. Test the responsive utility class by resizing the browser window or loading an instance on a different device. <!DOCTYPE html> <html> <head> <title>Bootstrap Example - Responsive Utility</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http:/ /libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3 /js/bootstrap.min.js"></script> </head> <body> <div class="container" style="padding: 40px;"> ) ## < sm-3" style="background-color: #dedef8; " box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> " <span class="hidden -sm">Small</span> < div class="clearfix visible-xs"></div> & lt; div class = "color-xs-6 col-sm-3" style = "background-color:#dedef8; Box-shadow: Inset 1px -1px 1px#444, insert -1px 1px 1px 1px 1px #444;"> ; <span class="hidden-md">Medium</span> ; <span class="visible-md">✔ Visible on medium devices< ;/span> ; </div> ; <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; 1px -1px 1px #444, inset -1px 1px 1px #444;"> lg">✔ Visible on large devices</span> </div> </div> </body> </html> Instance <!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 响应式实用工具</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></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>
</body>
</html> Run Instance» Click the "Run Instance" button to view the online instance
|
