3.8.4　隐藏与显示

对于元素或者文本内容，通常我们要注意两种形式的隐藏和显示，一种是display的隐藏和显示，另一种是visibility的隐藏和显示。对于显示元素，Bootstrap框架仅定义了show样式，而对于隐藏则定义了hidden和invisible样式，其中hidden表示元素既不显示，也不占用文档流（会影响布局的调整），invisible则表示虽然不显示，但其占用文档流占位。这3种样式的源码定义如下：

  1. /* 源码 5659 行*/
  2. .show {  display: block !important;             /*显示内容*/}
  3. .invisible {  visibility: hidden;               /*隐藏可视性*/}
  4. .hidden {
  5.   display: none !important;                     /*隐藏内容*/
  6.   visibility: hidden !important;                /*隐藏可视性*/
  7. }

另外，如果一个元素对所有设备都要隐藏，而只对盲人可用的话，可以使用特殊的sr-only样式。

注意

虽然目前还有一个hide样式是可用的，但是未来版本将会删除它，请大家尽量不要再用该样式。

还有一种特殊情况，若想让一个元素的文本内容不显示，而只显示背景效果（也就是类似透明的效果）的话，可以使用text-hide样式。其实现原理是隐藏文本，设置背景色透明。源码如下：

  1. /* 源码 5665 行*/
  2. .text-hide {
  3.   font: 0/0 a; /* 等价于 font-size: 0px;line-height: 0;font-family: a;*/
  4.   color: transparent;
  5.   text-shadow: none;
  6.   background-color: transparent;/*将页面元素所包含的文本内容替换为透明色,以显示背景图片*/
  7.   border: 0;
  8. }