如何在Twitter Bootstrap中隐藏/显示DIV以获取响应式站点

时间:2015-10-16 04:18:52

标签: twitter-bootstrap-3 responsive-design

我第一次在Bootstrap中处理响应式网站,我无法解码hidden-smvisible-md等类。

hidden-sm是否意味着隐藏特定的DIV?

2 个答案:

答案 0 :(得分:3)

你的问题的答案是肯定的。如果将div添加到.hidden-sm类,它将隐藏屏幕大小为768px的特定div。

如果某个元素属于.visible- *类,则表示该屏幕大小或以上可见。

示例:

.visible-xs仅在屏幕尺寸< 768px

中显示

.visible-sm仅在屏幕尺寸< 992px

.visible-md仅在屏幕尺寸< 1200px

.visible-lg显示屏幕尺寸为1200px及以上

另一方面,您可以使用其他大小的.hidden类完成相同的操作。

如果某个元素属于.hidden- *类,则应该隐藏该特定屏幕尺寸范围

示例:

.hidden-xs隐藏屏幕尺寸为< 768px

的元素

.hidden-sm隐藏屏幕大小为768px

的元素

.hidden-md隐藏屏幕大小为992px

的元素

.hidden-lg隐藏屏幕大小为1200px

的元素

答案 1 :(得分:1)

hidden-xx表示将特定部分隐藏在屏幕大小xx

您可以在bootstrap文档中找到更多信息 http://getbootstrap.com/css/#responsive-utilities-classes