jquery - 如何实现这个模板的 "responsiveness"？

Question

我在看这个模板:

http://www.meanthemes.com/theme/daily/photo/

我的网站上会有与此类似的图 block ，但我不确定如何开始根据窗口大小移动图 block 。我目前正在使用 MeanMenu ( http://www.meanthemes.com/plugins/meanmenu/ )，这对菜单项来说很棒，但我不知道如何处理正文。 HTML/CSS/JQuery 的 super 新手——任何指针都会很棒。

Answer 1

OP,

Twitter Bootstrap可能是您正在寻找的。

Bootstrap 可以很好地处理响应式 UI。

Fluid Grid System 文档有更多信息和示例，但这里是概述:

The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key screen resolutions and devices. - via the Bootstrap Docs

用户界面/导航栏

除了响应式设计之外，Bootstrap 还附带了一堆常用的 UI 元素/插件。像 MeanMenu(不可否认，我对此一无所知)，Bootstrap 确实 navigation bars .

Plunker，协作式在线编辑。

最后，由于您刚刚起步，Plunker是原型(prototype)制作和样板的绝佳工具。这对于与 SO 社区共享代码问题/答案特别有用。

我整理了一个 Plunk > http://plnkr.co/edit/LF6BCCDam2w67aUwOSaq其中包括 Bootstrap 以及响应式图像网格和导航栏的示例。

希望对您有所帮助。祝你好运!