使用 jQuery 和 Bootstrap 3 的響應式儀表板

Question

我正在嘗試使用 jQuery 和 Bootstrap 創建一個門戶/儀表板。 我需要能夠顯示具有固定尺寸的小工具，這些小工具可以一起顯示在同一頁面上。 我讓用戶能夠為每個頁面定義一個模板，它定義了可以在頁面上顯示的小工具的尺寸以及它們的布局。

我已經可以做一個基本的無響應儀表板，但讓我感到困惑的部分是我想讓儀表板響應。 如果小工具都具有相似的大小，按照 Bootstrap 的網格系統組織成行，這將是相當容易的。

我想最好的例子是我在網上找到的這張截圖。

第一個小工具跨越兩行，接下來的兩行只跨越一個。 我看不出如何使用 Bootstrap 的網格系統來做到這一點。

或者，它甚至應該響應嗎？ 如果儀表板沒有響應，是否會帶來更好的用戶體驗？

編輯：我確實有使用平板電腦和/或手機的客戶。

Answer 1

當您在小屏幕上工作時，響應能力總是一個優勢。 因此，如果您的客戶使用小屏幕，例如手機、平板電腦、老式顯示器，那么是的，響應式是個好主意。

對於網格系統問題。 嘗試以適合一行的方式對小部件進行分組。 例如，表格和 2 個餅圖是單行的完美候選者。 然后它們<div class="col-xx-6">的餅圖應該在單獨的行中，依此類推。

您可以根據需要嵌套盡可能多的行。

一行跨越父項的所有 12 列。 因此，表格和餅圖應該在不同的<div>以允許內容在沒有空間時“倒下”。

Answer 2

我在bootply 中為您找到了一個很好的起點。 這是一個使用引導網格系統構建的儀表板。 此處鏈接您可以使用在前端開發人員中非常流行的谷歌圖表為圖表控件添加響應能力。