bootstrap系列之响应式布局及相关的visible-sm、
2016-10-12 本文已影响0人
槑如是
响应式布局：响应式工具不能用于table元素，而且 本身就不支持
响应式布局需要在<head>处添加如下语句：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在css中添加如下内容 可以分别定制不同屏幕的显示样式：
/* 大屏幕 ：大于等于1200px*/
@media (min-width: 1200px) { ... }
/*默认*/
@media (min-width: 980px){...}
/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* 横向放置的手机和竖向放置的平板之间的分辨率 */
@media (max-width: 767px) { ... }
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) { ... }
响应式布局辅助class：
class.png
<br />
以下这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏
| class | 设备 |
|---|---|
| .visible-xs | 额外的小设备（小于 768px）可见 |
| .visible-sm | 小型设备（768 px 起）可见 |
| .visible-md | 中型设备（768 px 到 991 px）可见 |
| .visible-lg | 大型设备（992 px 及以上）可见 |
| .hidden-xs | 额外的小设备（小于 768px）隐藏 |
| .hidden-sm | 小型设备（768 px 起）隐藏 |
| .hidden-md | 中型设备（768 px 到 991 px）隐藏 |
| .hidden-lg | 大型设备（992 px 及以上）隐藏 |
打印类
使用这些切换打印内容
| class | 打印 |
|---|---|
| .visible-print | 可见 可打印 |
| .hidden-print | 只对浏览器可见 不可打印 |
实例：调整浏览器的窗口大小，或者在不同的设备上加载实例，测试响应式实用工具类
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 响应式实用工具</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/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>
测试结果：
visible-lg.png
visible-xs.png
<br />
参考资料:http://blog.csdn.net/amohan/article/details/51480790
参考资料:http://caibaojian.com/bootstrap/scaffolding.html#responsive
