bootstrap自带的隐藏类有哪些
程序员文章站
2022-03-22 19:09:44
...
bootstrap自带的隐藏类有:“.hidden”、“.visible-xs-*”、“.visible-sm-*”、“.visible-md-*”、“.visible-lg-*”、“.hidden-xs”、“.hidden-sm”等等。
本教程操作环境:Windows7系统、bootsrap3.3.7版、DELL G3电脑
Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备,实现内容对设备的显示和隐藏。
需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。
类 | 描述 |
---|---|
.show | 强制元素显示 |
.hidden | 强制元素隐藏 |
超小屏幕 手机 (<768px) |
小屏幕 平板 (≥768px) |
中等屏幕 桌面 (≥992px) |
大屏幕 桌面 (≥1200px) |
|
---|---|---|---|---|
.visible-xs-* | 可见 | 隐藏 | 隐藏 | 隐藏 |
.visible-sm-* | 隐藏 | 可见 | 隐藏 | 隐藏 |
.visible-md-* | 隐藏 | 隐藏 | 可见 | 隐藏 |
.visible-lg-* | 隐藏 | 隐藏 | 隐藏 | 可见 |
.hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
.hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
.hidden-md | 可见 | 可见 | 隐藏 | 可见 |
.hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
从 v3.2.0 版本起,形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体,每个针对 CSS 中不同的 display 属性,列表如下:
类组 | CSS display |
---|---|
.visible-*-block | display: block; |
.visible-*-inline | display: inline; |
.visible-*-inline-block | display: inline-block; |
因此,以超小屏幕(xs)为例,可用的 .visible-*-* 类是:.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。
.visible-xs、.visible-sm、.visible-md 和 .visible-lg 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了 <table> 相关的元素的特殊情况外,它们与 .visible-*-block 大体相同。
更多关于bootstrap的相关知识,可访问:bootstrap基础教程!!
以上就是bootstrap自带的隐藏类有哪些的详细内容,更多请关注其它相关文章!
推荐阅读
-
用bootstrap做的网站有哪些,bootstrap制作网站实例
-
300分的医学类学校有哪些?高考分数在300左右能学医吗?
-
美术专业好的综合类大学有哪些?附几所比较好的综合类大学介绍
-
全国好一点的二本医学类学校有哪些?附二本公办医学类大学分数线2020年最新排名
-
湖南比较好的师范大专院校有哪些?附湖南全日制师范类大专院校排名
-
*财经大学什么水平?中国最牛的财经类大学有哪些?
-
苹果MAC有哪些秘密功能?苹果电脑中隐藏的10个秘密功能介绍
-
北京的师范大学有哪些学校?附北京所有师范类大学录取分数线(2021最新)
-
全国比较好的二本政法大学有哪些?附2020年政法类985大学排名(录取分数线及位次)
-
300分的医学类学校有哪些?高考分数在300左右能学医吗?