html - Twitter Bootstrap 折叠是如何工作的？

Question

所以我一直在玩弄Twitter Bootstrap 网站，我对缩小浏览器窗口时顶部导航栏如何折叠成不同的布局很感兴趣。

这是扩展后的样子：

这是折叠时的样子：

它是如何做到的？

Answer 1

它通过媒体查询进行更改。CSS3 允许按媒体（视口？）和检测诸如宽度/高度之类的媒体相关样式表

有关媒体查询的更多阅读：https ://developer.mozilla.org/en/CSS/Media_queries 我看了他们的 css，但你可以在页面 css 源中得到提示：bootstrap-responsive.css

我相信 bootstrap 也可以通过他们的工具包促进响应式设计。希望这可以帮助。