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

我正在嘗試使用jQuery & Bootstrap創建一個門戶/儀表板。我需要能夠顯示可以在同一頁面上一起顯示的固定尺寸的小工具。我爲用戶提供了爲每個頁面定義模板的能力，該模板定義了可以在頁面上顯示的小工具的尺寸以及它們的佈局。使用jQuery和Bootstrap 3的響應式儀表板？

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

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

Dashboard example

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

另外，它應該甚至是響應？如果儀表板不響應，這是否更好的用戶體驗？

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

任何建議表示讚賞。謝謝

來源

2014-11-23 Mike Stoddart

僅供參考，我還使用http://gridster.net/創建了一個簡單的儀表板，我正在查看http://masonry.desandro.com/以查看是否可以忽略響應方並使用現有的圖書館提供專業的儀表板。謝謝大家。 – 2014-11-24 13:41:54

我以爲我會回來併發布更新。這種設計不適合我的需要，所以我設計了儀表盤讓用戶調整大小和移動小工具。我想最終的結果並不是真正的儀表板，但它可以很好地工作，因爲用戶可以爲臺式機，手機和平板電腦創建單獨的頁面。儀表板不再使用模板來指定頁面佈局。對於我的用戶來說，這太費勁了。謝謝。 – 2016-05-13 18:24:42

當您在小屏幕上工作時，響應性始終是一個優點。所以如果你有小屏幕的客戶，例如手機，平板電腦，舊的scool顯示器，那麼是的，這是一個好主意，要有響應。

針對網格系統問題。嘗試將小部件分組，使其適合成一排。例如，表格和2個餅圖是完美的候選單列。然後，<div class="col-xx-6"> tad中的餅圖應該位於不同的行中，依此類推。

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

行橫跨父級的所有12列。因此，表格和餅圖應該位於不同的<div>之間，以便在沒有空間的情況下允許內容「倒下」。

來源

2014-11-23 21:41:52

我在bootply找到了一個很好的起點。這是一個使用引導網格系統構建的儀表板。 Link Here您可以使用google charts在圖表控件中添加響應，這在前端開發人員中非常流行。

來源

2014-11-23 22:32:59 Purusartha

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

回答

相關問題