Bootstrap CSS根据屏幕大小控制隐藏与显示

朱雀 2021-07-05 00:58 906阅读 0赞

`Bootstrap` 提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。

需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。**响应式实用工具目前只适用于块和表切换。**

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th align="left">超小屏幕</th> 
   <th align="left">小屏幕</th> 
   <th align="left">中等屏幕</th> 
   <th align="left">大屏幕</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"></td> 
   <td align="left">手机 (&lt;768px)</td> 
   <td align="left">平板 (≥768px)</td> 
   <td align="left">桌面 (≥992px)</td> 
   <td align="left">桌面 (≥1200px)</td> 
  </tr> 
  <tr> 
   <td align="left">.visible-xs-*</td> 
   <td align="left">可见</td> 
   <td align="left">隐藏</td> 
   <td align="left">隐藏</td> 
   <td align="left">隐藏</td> 
  </tr> 
  <tr> 
   <td align="left">.visible-sm-*</td> 
   <td align="left">隐藏</td> 
   <td align="left">可见</td> 
   <td align="left">隐藏</td> 
   <td align="left">隐藏</td> 
  </tr> 
  <tr> 
   <td align="left">.visible-md-*</td> 
   <td align="left">隐藏</td> 
   <td align="left">隐藏</td> 
   <td align="left">可见</td> 
   <td align="left">隐藏</td> 
  </tr> 
  <tr> 
   <td align="left">.visible-lg-*</td> 
   <td align="left">隐藏</td> 
   <td align="left">隐藏</td> 
   <td align="left">隐藏</td> 
   <td align="left">可见</td> 
  </tr> 
  <tr> 
   <td align="left">.hidden-xs</td> 
   <td align="left">隐藏</td> 
   <td align="left">可见</td> 
   <td align="left">可见</td> 
   <td align="left">可见</td> 
  </tr> 
  <tr> 
   <td align="left">.hidden-sm</td> 
   <td align="left">可见</td> 
   <td align="left">隐藏</td> 
   <td align="left">可见</td> 
   <td align="left">可见</td> 
  </tr> 
  <tr> 
   <td align="left">.hidden-md</td> 
   <td align="left">可见</td> 
   <td align="left">可见</td> 
   <td align="left">隐藏</td> 
   <td align="left">可见</td> 
  </tr> 
  <tr> 
   <td align="left">.hidden-lg</td> 
   <td align="left">可见</td> 
   <td align="left">可见</td> 
   <td align="left">可见</td> 
   <td align="left">隐藏</td> 
  </tr> 
 </tbody> 
</table>

从 `v3.2.0` 版本起，形如 `.visible-*-*` 的类针对每种屏幕大小都有了三种变体，每个针对 `CSS` 中不同的 `display` 属性，列表如下：

<table> 
 <thead> 
  <tr> 
   <th align="left">类组</th> 
   <th align="left">CSS display</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">.visible-*-block</td> 
   <td align="left">display: block;</td> 
  </tr> 
  <tr> 
   <td align="left">.visible-*-inline</td> 
   <td align="left">display: inline;</td> 
  </tr> 
  <tr> 
   <td align="left">.visible-*-inline-block</td> 
   <td align="left">display: inline-block;</td> 
  </tr> 
 </tbody> 
</table>

因此，以超小屏幕（`xs`）为例，可用的 `.visible-*-*` 类是：`.visible-xs-block、.visible-xs-inline` 和 `.visible-xs-inline-block`。

`.visible-xs、.visible-sm、.visible-md` 和 `.visible-lg` 类也同时存在。但是从 `v3.2.0` 版本开始不再建议使用。

`visible`不要直接用在`table`上，会有问题，比如`table`放到一个`div`里`table`宽度被固定，无法百分百。在`table`外再加个`div`，对`div`设置`visible`