Bootstrap 响应式实用工具

响应式实用工具解决"同一内容在不同设备上要不要显示"的问题：配合网格系统，可让手机与电脑看到不同的信息块。核心是 visible-* 可见类与 hidden-* 隐藏类，另有针对打印的专用类。

四档断点

Bootstrap 3 按视口宽度分四档：xs 为手机、sm 为平板、md 为笔记本、lg 为大屏显示器。下面表格给出各档宽度区间与典型设备：

类别	宽度区间	典型设备
xs	小于 768px	手机
sm	768px ~ 991px	平板
md	992px ~ 1199px	笔记本
lg	大于等于 1200px	大屏显示器

可见类 visible-*

visible-xs、visible-sm、visible-md、visible-lg 表示元素"仅在该档可见"。默认是块级显示，也可用 visible-xs-inline、visible-xs-inline-block 指定内联或行内块形式。

<div class="visible-xs">仅手机可见</div>
<div class="visible-sm">仅平板可见</div>
<div class="visible-md">仅笔记本可见</div>
<div class="visible-lg">仅大屏可见</div>
<span class="visible-xs-inline">手机上以行内形式出现</span>
<!-- 效果：拖动浏览器窗口宽度，不同 div 会依次出现或消失 -->

隐藏类 hidden-*

hidden-xs、hidden-sm、hidden-md、hidden-lg 与可见类相反：元素在对应档隐藏、其余档正常显示。把多个 hidden 类叠用，可实现"只在某两档显示"的效果。

<div class="hidden-xs">手机上看不到，平板及以上可见</div>
<div class="hidden-sm hidden-md">只在手机与大屏上显示</div>
<!-- 效果：第二行在 768px ~ 1199px 宽度区间内被隐藏 -->

打印类

打印类控制"屏幕 vs 纸张"两种输出：visible-print-block、visible-print-inline、visible-print-inline-block 仅在打印时显示；hidden-print 只在屏幕上显示，打印时自动消失。

<div class="visible-print-block">打印时才会出现的版权页脚</div>
<div class="hidden-print">屏幕上的操作按钮，打印时自动隐藏</div>
<!-- 效果：点击浏览器打印预览，第一行出现、第二行消失 -->

小结

visible- 与 hidden- 工具类让"内容随设备变化"一行 class 即可完成。注意 Bootstrap 4 起这类工具大多被移除，需改用网格与 display 系列，实际开发以所用版本的官方文档为准。