在 Bootstrap 3 里面，给我们提供了一些在响应式的页面上，显示或者隐藏内容的 css 类。

显示内容的类是用 visible 开头的 ... 后面加上表示窗口尺寸的后缀 ... 比如 xs 表示特小的设备，sm 是小设备，md 是中间尺寸的设备，lg 是大尺寸的设备。

比如你想让某块内容，只在特小尺寸的移动设备上显示 ... 可以在这块内容上添加一个 visible-xs 这样的 css 类。

或者，你可能想让某块内容，只在特小尺寸的移动设备上隐藏的话 ... 可以在这块内容上面添加一个叫 hidden-xs 的类。

下面，我们去试一下 ...

在这个文档里，先添加一块内容 ... 让它只显示在特小尺寸的移动设备上 ...

可以把它放在主体这块内容里面 .. 用一组段落标签 ... 上面加上一个 visible-xs 类 ...

再给它点文字 ... 在这段文字上可以再添加点额外的样式 ... 用一个 alert ... 再加上一个 alert-info ...

<p class="visible-xs alert alert-info">我们有支持 iOS 平台的 App，点击下载！</p>

保存 ... 回到浏览器 ... 刷新 ... 在这里，没有显示刚才添加的那段文字 ...

缩小一下窗口的宽度 ... 在特小尺寸的宽度范围内，会把这段文字显示出来 ... 也就是，使用了 visible 类的元素，只在特定尺寸的窗口上显示它。在其它尺寸的窗口上面，都会把元素隐藏起来 ...

下面，我们可以在这个边栏上面，添加一个 hidden 类 ... 让边栏只在特小尺寸的设备上隐藏起来 ... 在其它尺寸的窗口上都显示 ...

回到编辑器 ... 找到边栏 ... 在它上面，添加一个 hidden-xs ... 表示只在 xs ，特小尺寸窗口下面隐藏这个元素。

保存 ... 回到浏览器 ... 刷新 ...

现在窗口的宽度在特小尺寸这个范围内 ... 所以，边栏就会被隐藏起来 ...

再放大一下窗口的宽度 .... 到一定程度的时候， 边栏又会显示出来 .... 继续放大 ... 同样会显示边栏 ... 因为边栏只有在特小尺寸的窗口上才会被隐藏 ...