桌面，就像使用引導

Question

我開發應該表現或多或少像一個桌面應用程序，具有以下功能的Web應用程序佈局：

• 它必須把所有的瀏覽器空間（寬度爲100％和高度，不滾動），具有以下4個主要元素：

  • 標題。它將包含主菜單。它必須固定在頂部。

  • 帶有對象窗格的左邊欄。

  • 主要內容區域，側邊欄的右側，它將顯示網格和數據。內容很大時必須可以滾動。

  • 固定在屏幕底部的頁腳，只有當用戶雙擊左邊欄的對象時纔可見。它也必須通過點擊右上邊框上的'X'按鈕來摺疊。

棘手的部分是，當我雙擊一個對象，頁腳（約150-200px）必須是可見的，並顯示對象數據。側邊欄和主要內容區域的高度必須縮小，以便頁腳不會與它們重疊，並且在用戶關閉頁腳時它們會回到完整高度。

是否可以使用Bootstrap框架來做這樣的佈局？我一直在玩它，但我不能正常工作...

在此先感謝，歡呼！

Answer 1

對不起，發佈這樣一個通用的問題，我花了整整一天在沒有找到適當的解決方案做測試bootply後，我累了，所以我決定問這裏。

我決定從Bootstrap轉移到基金會，因爲它提供了我在其XY網格上尋找的確切功能。使用此框架，我的應用程序佈局將如此簡單：

<div class="grid-y medium-grid-frame"> 
    <div class="cell shrink header medium-cell-block-container"> 

    <!-- NAVIGATION BAR --> 

    </div> 

    <div class="cell medium-auto medium-cell-block-container"> 

    <div class="grid-x grid-padding-x"> 
     <div class="cell medium-4 medium-cell-block-y"> 

     <!-- SIDEBAR --> 

     </div> 

     <div class="cell medium-8 medium-cell-block-y"> 

     <!-- MAIN CONTENT --> 

     </div> 
    </div> 

    </div> 

    <div class="cell shrink footer"> 

    <!-- FOOTER --> 

    </div> 
</div> 

下次我會更簡潔，歡呼！