使用jQuery＆amp;的响应式仪表板Bootstrap 3？

Question

我正在尝试使用jQuery＆amp;创建门户/仪表板引导。我需要能够显示具有固定尺寸的小工具，这些小工具可以一起显示在同一页面上。我让用户能够为每个页面定义一个模板，该模板定义了可以在页面上显示的小工具的尺寸以及它们的布局。

我已经可以做一个基本的非响应式仪表板，但令我困惑的部分是，我想让仪表板响应。根据Bootstrap的网格系统，如果小工具都具有相似的大小，按行组织，这将非常容易。

我想最好的例子是我在网上找到的这个截图。

第一个小工具跨越两行，接下来的两个跨越一行。我无法使用Bootstrap的网格系统看到如何做到这一点。

或者，它是否应该响应？如果仪表板没有响应，这是一种更好的用户体验吗？

编辑：我忘了提到我确实有客户使用平板电脑和/或手机。

任何建议表示赞赏。感谢

Answer 1

当您在小屏幕上工作时，响应能力总是有利的。所以，如果你有小屏幕的客户，例如电话，平板电脑，旧scool显示器，然后是的，做出回应是一个好主意。

对于网格系统问题。尝试以适合行的方式对小部件进行分组。例如，表格和2个饼图是单排的完美候选。然后，<div class="col-xx-6"> tad中的饼图应该在不同的行中，依此类推。

您可以根据需要嵌套多行。

一行跨越父级的所有12列。因此，表格和饼图应该在不同的<div> s中，以便在没有空间时让内容“掉落”。

Answer 2

我在bootply找到了一个很好的起点。这是一个使用引导网格系统构建的仪表板。 Link Here您可以使用google charts在前端开发人员中非常受欢迎来增加对图表控件的响应能力。