6.7.5 显示或隐藏内容

发表于 更新于 分类于 ， ， Waline： 本文字数： 513 阅读时长 ≈ 1 分钟

6.7.5 显示或隐藏内容

Bootstrap提供了如下CSS样式来显示或隐藏内容。

样式类 描述
.hidden 隐藏设置该样式的元素。
.show 显示设置该样式的元素。
.invisible 将设置该样式的元素设为不可见,但该元素所占据的位置依然被保留。
其实这三个样式的源代码非常简单: 
1
2
3
4
5
6
7
8
9
.show{
    display: block !important;
}
.hidden{
    display: none important;
}
.invisible{
    visibility: hidden;
}

从源代码可以看出,.show 和.hidden 样式其实就是将display 设为block 或none 来实现的;.invisible样式其实就是将visibility设为hidden来实现的。其中,!import用于指定CSS样式的优先级。
.show、.hidden、.invisible也可作为mixin使用,关于mixin的用法可参考6.3节。

提示:关于CSS 样式中display、visibility 属性的作用可参考《疯狂HTML 5/CSS 3/JavaScript讲义》。