读书频道 > web开发 > 其他综合 > 深入理解Bootstrap
3.8.4 隐藏与显示
2014-05-09 16:20:52     我来说两句 
收藏    我要投稿   

本文所属图书 > 深入理解Bootstrap

本书是目前Bootstrap领域技术版本最新、内容最全面、介绍最详细、实战性最强、最具深度的著作。它是资深Web技术专家多年工作经验的结晶,不仅授人以鱼,全面讲解了Bootstrap各个功能组件的使用方法,以及对现有插  立即去当当网订购

对于元素或者文本内容,通常我们要注意两种形式的隐藏和显示,一种是display的隐藏和显示,另一种是visibility的隐藏和显示。对于显示元素,Bootstrap框架仅定义了show样式,而对于隐藏则定义了hidden和invisible样式,其中hidden表示元素既不显示,也不占用文档流(会影响布局的调整),invisible则表示虽然不显示,但其占用文档流占位。这3种样式的源码定义如下:
/* 源码 5659 行*/
.show {  display: block !important;  /*显示内容*/}
.invisible {  visibility: hidden;  /*隐藏可视性*/}
.hidden {
  display: none !important;   /*隐藏内容*/
  visibility: hidden !important;  /*隐藏可视性*/
}

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

注意

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

还有一种特殊情况,若想让一个元素的文本内容不显示,而只显示背景效果(也就是类似透明的效果)的话,可以使用text-hide样式。其实现原理是隐藏文本,设置背景色透明。源码如下:
/* 源码 5665 行*/
.text-hide {
  font: 0/0 a; /* 等价于 font-size: 0px;line-height: 0;font-family: a;*/
  color: transparent;
  text-shadow: none;
  background-color: transparent;/*将页面元素所包含的文本内容替换为透明色,以显示背景图片*/
  border: 0;
}

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:3.8.3 内容浮动
下一篇:3.9 响应式样式
相关文章
图文推荐
3.2 Windows 7设置
3.1 DNS解析
2.3 HTTP协议
2.2 TCP/IP协议与So
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站